CSS: Advanced Typographic Techniques

Explore the creative possibilities of CSS typographic effects, including text shadows, animation, transforms, and 3D depth.

Introduction

• Welcome
• Using the exercise files

1. Getting Started

• Course overview
• Controlling font rendering
• Introducing Lettering.js
• Web font options
• Browsing Adobe Edge Web Fonts

2. Using Lettering.js

• Project overview
• Enabling Lettering.js
• Controlling text wrapping
• Adding kerning
• Controlling stacking
• Adding text shadows

3. Creating Dimensional Text

• Project overview
• Adding dimensions to text
• Using gradients
• Working with drop shadows
• Using 2D transforms

4. Creating Refracted Text

• Project overview
• Structuring HTML
• Using generated content
• Giving text a 3D look
• Simulating submerged text
• Clipping text
• Applying perspective
• Using 3D transforms
• Aligning split text

5. Animating Text

• Project overview
• Creating blurred text
• Creating transitions
• Triggering transitions
• Creating keyframe animations
• Enabling animations

6. Using Modernizr

• Project overview
• Downloading Modernizr
• Modernizr basics
• Creating default styles
• Using Modernizr to load scripts
• Conditional resource loading
• Using vendor prefixes
• Extending Modernizr

Conclusion

• Additional resources