Join James Williamson for an in-depth discussion in this video Clipping text, part of CSS: Advanced Typographic Techniques.
At the moment we have two copies of our text.…We need to simulate a single word by clipping them,…so that the top and bottom halves are all that displays.…And then by aligning them so that the edges meet in and they can join together.…So I'm be working in the submerge file again.…This time from the 04 > 06 directory.…And this time it's going to be all about defining…heights and moving, using some offsets to move things up.…We're also…going to pay attention to the HTML structure that we created earlier.…Alright and we're going to take advantage of the fact that we have all…these different elements that we can work with in terms of clipping content.…
Okay.…First thing that I'm going to do is right above the text selector, I'm…going to create a brand new selector that targets all the divs on the page.…So, we've got a couple of divs, I've got three of them actually.…And this is going to target two of them, because the text…selector that's underneath it is a class selector.…And because it has a higher level of specificity,…
- Controlling font rendering with CSS
- Using web fonts
- Adjusting kerning
- Adding dimension to text
- Working with gradients and drop shadows
- Using 2D and 3D transforms
- Applying perspective
- Aligning split text
- Creating and triggering transitions
- Enabling animations
- Extending CSS with Lettering.js and Modernizr
Skill Level Intermediate
1. Getting Started
2. Using Lettering.js
3. Creating Dimensional Text
4. Creating Refracted Text
5. Animating Text
6. Using Modernizr
Additional resources2m 11s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.