Join James Williamson for an in-depth discussion in this video Using 3D transforms, part of CSS: Advanced Typographic Techniques.
- View Offline
- Exercise Files
In this exercise, we're going to explore how…combining the 3D transforms with the perspectives that…we set in our last exercise can…really help us create extremely realistic typographic effects.…Alright, so I will be working with a submerged file, this time from the 04>…04_08 directory, and I'm going to scroll down to find the paragraph selector.…And what I'm going to…do is I'm actually going to apply…the transformations themselves to the individual letters.…
You may have noticed, at the very top, that we…do have lettering going on, and we're targeting that paragraph down.…Normally, I wouldn't using lettering in quite so…generic a sense, I'm just saying hey, all paragraphs.…But since we only have one paragraph in the entire document, that's okay.…Alright.…But you may want to be careful next time and not, not do it to everybody.…So that means that inside of our paragraph…of course that each of the letters is surrounded by…a span tag with character one, character two, character three.…Now in the past, we've used that to write selectors that target…
- 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.