Join James Williamson for an in-depth discussion in this video Enabling Lettering.js, part of CSS: Advanced Typographic Techniques.
As you can see by looking at the actual book cover, we're going to…need to have the ability to style…each letter in the word Competition individually.…However, if I go to the file that we're…going to be working on and scroll down a little bit…and I see the word Competition down here in the…HTML, I can see that it's just a single word.…So rather than having to go ahead and mark up each individual letter ourselves.…It's a little bit easier and cleaner to just use lettering.js.…So I'm working on the stacked.HTML file and the 02_02 directory as you can see.…
The HTML mark up is pretty basic.…We have a div with three paragraphs inside of it.…The authors name, the name of the book and the tag line.…And of course they're all indicated by their respective classes.…Now if I preview this in the browser.…You're going to see that we have an image that we have embedded…on the page of the actual book cover that we're trying to reproduce.…So that just gives us sort of something…to compare what we're working on against each other.…
- 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.