Join James Williamson for an in-depth discussion in this video Project overview, part of CSS: Advanced Typographic Techniques.
Occasionally I'll try something just to see if I can do it.…Now such is the case with our third…project here which is called creating refracted text.…Now, I know that that's not the best title in the world…and I originally had it titled creating reflective text but as Scott Simpson,…one of our really, really intelligent producers here told me as he looked…at the exercise file, he said, you know, that's not reflected, it's refracted.…And I said you know…what, you're right.…So, I really just wanted to see if I…could replicate the effect of submerging text under water.…
Now doing so requires us to simulate the text being split in half.…With half of it the, solid 3D look that you're seeing here, and the other half of…course, blurred and sort of transformed, to simulate…the text, refracting, as Scott says, under the water.…So, this project is going to be a little bit…more technical than some of the other ones that we've…worked on so far, but it's really not as hard as you might think.…We're going to be focusing on several things.…
- 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.