Join James Williamson for an in-depth discussion in this video Giving text a 3D look, part of CSS: Advanced Typographic Techniques.
We're going to focus on the top half of our text first, and I want…that text to look three dimensional, as it's sort of submerging into the water.…Well thankfully, that's really easy to do by revisiting one…of our old friends that we've been using throughout this course.…And that would be the text shadow.…So I'm working on the submerge.htm file from the 04_04 directory.…And…I'm just going to go straight down to the generated…content that we worked on in the last exercise.…
I'm just going to start adding to this.…So I'm going to go down to the last property here.…And I'll just start adding to it, and this, the first thing I want to do is set…font size, so I'm going to make it a…little bit larger and I'm going to to 120 pixels.…Now, you know me, I like relative units of measurement.…But in this case, where we're working with the defined image,…we're not really caring about making it responsive, that sort of thing.…There's nothing wrong with using pixels. In fact, it makes math easier.…The next thing I'm going to do is set my line height, and…
- 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.