Join James Williamson for an in-depth discussion in this video Using generated content, part of CSS: Advanced Typographic Techniques.
While I would love to be able to take a single word and split it in…half as I mentioned earlier the truth is that CSS just doesn't let us do that.…So we're going to have to have two copies of the work, we're going to…clip them so they each appear as like the top and the bottom half.…And then we're going to join them together.…Now rather than adding additional markup to our HTML,…we want to keep it as simple poss, as possible.…We're going to use generated content to add the second copy of the word.…So here I have the submerge.htm file open in the 04_03 directory.…
As you can see, it's kind of the same thing we had before.…Not a whole lot going on within the CSS right now.…We have some defined widths happening in the section and the the text file itself.…Or, or the text div tag I should say. But not a whole lot else going on.…Okay.…So at the very bottom of this, I'm…going to go ahead and create a new selector and…I'm going to target that empty div tag with the class of top.…So I'm going to say top, so class of top, class…
- 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.