Join James Williamson for an in-depth discussion in this video Project overview, part of CSS: Advanced Typographic Techniques.
In this chapter, we're going to be exploring…a couple of different techniques for animating text.…While the projects, themselves, are relatively simple,…the techniques that we're going to be…using are extremely versitile and can be…used in various ways throughout your projects.…Now first, we're going to do this exercise.…And we're going to take a look at how to…use transitions to animate text based on user interaction.…In this case, hovering over the text itself.…We're going to focus on creating blurred text, how to set up transitions,…and then how to trigger them as the text is being interacted with.…
Then we're going to explore CSS animations, and how…to define and use keyframe animations in CSS.…And in this case, as you can see here, we're going to create…a persistent animation that's going to simulate the random fading of each 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.