Join James Williamson for an in-depth discussion in this video Controlling stacking, part of CSS: Advanced Typographic Techniques.
By wrapping each letter in a span tag, Lettering gives us the…ability to have individual letters interact…with each other in really creative ways.…Now, in the bookcover design, each of the letters stack on top or behind each other.…We're going to emulate that by giving each of the letters a z index property.…And I just want to show you.…a second here, I have the Stacked.htm file open from…the 02_05 directory and I've made a slight change to it.…I'm going…to show you that in the browser.…And you can see that I have changed the color for each of the individual letters.…
And I did that because once we start…changing the stacking order of them you can see…that they're already overlaying each other just sort…of naturally because we've been using those negative margins.…So we need to make it look at little bit more like the actual book…cover, where the stacking order is really independent…of the order of the, the letters themselves.…And it, it really gives it sort of this interesting depth.…I really get, I really like that. So I want to emulate that.…
- 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.