CSS: Advanced Typographic Techniques
3h 15mAdvanced2013-09-25
Authors
James Williamson
Adobe Certified Instructor
Course details
CSS is a veritable playground for type designers. It allows you to push the boundaries of typography, and explore new creative possibilities. In this course, senior lynda.com author James Williamson explores a number of advanced CSS typographic effects, including text shadows, animation, transforms, and transitions. Plus, learn to use the JavaScript libraries Lettering.js and Modernizr library to control aspects of typography that typical CSS does not.
Learning objectives
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
Learning objectives
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
Skills covered
jQueryTypographyWeb StandardsWeb DesignFront-End Web DevelopmentMotion Graphics and VFXGraphic DesignAnimation and IllustrationWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Welcome
- 02 - Using the exercise files
1. Getting Started
- 03 - Course overview
- 04 - Controlling font rendering
- 05 - Introducing Lettering.js
- 06 - Web font options
- 07 - Browsing Adobe Edge Web Fonts
2. Using Lettering.js
- 08 - Project overview
- 09 - Enabling Lettering.js
- 10 - Controlling text wrapping
- 11 - Adding kerning
- 12 - Controlling stacking
- 13 - Adding text shadows
3. Creating Dimensional Text
- 14 - Project overview
- 15 - Adding dimensions to text
- 16 - Using gradients
- 17 - Working with drop shadows
- 18 - Using 2D transforms
4. Creating Refracted Text
- 19 - Project overview
- 20 - Structuring HTML
- 21 - Using generated content
- 22 - Giving text a 3D look
- 23 - Simulating submerged text
- 24 - Clipping text
- 25 - Applying perspective
- 26 - Using 3D transforms
- 27 - Aligning split text
5. Animating Text
- 28 - Project overview
- 29 - Creating blurred text
- 30 - Creating transitions
- 31 - Triggering transitions
- 32 - Creating keyframe animations
- 33 - Enabling animations
6. Using Modernizr
- 34 - Project overview
- 35 - Downloading Modernizr
- 36 - Modernizr basics
- 37 - Creating default styles
- 38 - Using Modernizr to load scripts
- 39 - Conditional resource loading
- 40 - Using vendor prefixes
- 41 - Extending Modernizr
Conclusion
- 42 - Additional resources