Join James Williamson for an in-depth discussion in this video Project overview, part of CSS: Advanced Typographic Techniques.
- View Offline
- Exercise Files
In this project we'll explore how to…create text that displays realistic dimensions and depth.…Here we're looking at the finished version of the project.…We're going to take the word hotrod…and transform it into something that resembles a…magazine masthead by using box model properties,…gradient fills, drop shadows, and CSS two-dimensional transforms.…We're going to explore how drop shadows can be used to create realistic depth.…How transforms can add dynamic…tension to type and some best practices around using linear gradients.…So let's get started.…
We're going to work on our first exercise next and…that will be adding dimensions to each individual letter.…
- 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.