Join James Williamson for an in-depth discussion in this video Applying perspective, part of CSS: Advanced Typographic Techniques.
Our next couple of exercises will focus on applying 3D transformations to our text.…Now 3D transformations are a lot like the 2D transforms that we did earlier.…They just let us add perspective and they give us…a z axis that we can transform on as well.…Now we're going to get our text ready to transform by telling…the browser what amount of perspective we'd like to apply to it.…And if you want to kind of get an idea of what…that, that perspective property is going to allow us…to do, take a look at the lake itself.…1 of the things that, you know, we learn very…early on in art school was perspective and vanishing points.…
And, if we kind of drew some imagining lines here, we could see that…the vanishing point for this lake is going right back here to the horizon.…I'll write it through here, and I would like to…distort the text in the water on that vanishing point.…So that it really sort of blends in…seamlessly with the, the image that I have here.…And that's one of the really cool things…that this perspective property allows us to do.…
- 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.