Join James Williamson for an in-depth discussion in this video Aligning split text, part of CSS: Advanced Typographic Techniques.
We have just one more small task to…perform before we're finished with our submerged text.…We need to align, the blurred, the transform blurred text, a…little bit more closely to each letter of the submerged text itself.…So I've got the submerged file open from the 04, zero 09 directory.…And what I'm going to do is just I'm going to scroll down here, past the span…selector and here is where we are going to target each individual letter.…This is again where lettering js is going to help us out a little bit.…
And I'm going to create my first select here, character one or…char1 and I'm just going to give it a left value of ten pixels.…Now, that really doesn't mean anything right now.…So one thing I haven't done is, is told all…of these individual characters to have a position of relative…so this left offset will work. I could use negative margins here.…I can certainly do that. But I really like using offsets instead.…So I could every, single character tell it…position: relative, position, relative, but it's much easier…
- 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.