Join James Williamson for an in-depth discussion in this video Enabling Lettering.js, part of CSS: Advanced Typographic Techniques.
As you can see by looking at the actual book cover, we're going to…need to have the ability to style…each letter in the word Competition individually.…However, if I go to the file that we're…going to be working on and scroll down a little bit…and I see the word Competition down here in the…HTML, I can see that it's just a single word.…So rather than having to go ahead and mark up each individual letter ourselves.…It's a little bit easier and cleaner to just use lettering.js.…So I'm working on the stacked.HTML file and the 02_02 directory as you can see.…
The HTML mark up is pretty basic.…We have a div with three paragraphs inside of it.…The authors name, the name of the book and the tag line.…And of course they're all indicated by their respective classes.…Now if I preview this in the browser.…You're going to see that we have an image that we have embedded…on the page of the actual book cover that we're trying to reproduce.…So that just gives us sort of something…to compare what we're working on against each other.…
Author
Released
9/25/2013- 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
Duration
Views
Related Courses
-
Choosing and Using Web Fonts
with Laura Franz6h 52m Appropriate for all -
Typography for Web Designers
with Laura Franz6h 25m Appropriate for all
-
Introduction
-
Welcome54s
-
Using the exercise files1m 23s
-
-
1. Getting Started
-
Course overview1m 23s
-
Controlling font rendering5m 36s
-
Introducing Lettering.js7m 28s
-
Web font options4m 37s
-
-
2. Using Lettering.js
-
Project overview1m 23s
-
Enabling Lettering.js6m 14s
-
Controlling text wrapping4m 47s
-
Adding kerning8m 29s
-
Controlling stacking4m 38s
-
Adding text shadows9m 55s
-
-
3. Creating Dimensional Text
-
Project overview37s
-
Adding dimensions to text4m 31s
-
Using gradients5m 56s
-
Working with drop shadows5m 19s
-
Using 2D transforms3m 34s
-
-
4. Creating Refracted Text
-
Project overview1m 25s
-
Structuring HTML3m 16s
-
Using generated content3m 40s
-
Giving text a 3D look5m 22s
-
Simulating submerged text5m 59s
-
Clipping text6m 40s
-
Applying perspective5m 4s
-
Using 3D transforms7m 55s
-
Aligning split text3m 47s
-
-
5. Animating Text
-
Project overview48s
-
Creating blurred text2m 45s
-
Creating transitions3m 40s
-
Triggering transitions3m 28s
-
Creating keyframe animations6m 49s
-
Enabling animations6m 12s
-
-
6. Using Modernizr
-
Project overview2m 2s
-
Downloading Modernizr5m 8s
-
Modernizr basics6m 25s
-
Creating default styles5m 14s
-
Conditional resource loading4m 15s
-
Using vendor prefixes6m 45s
-
Extending Modernizr5m 25s
-
-
Conclusion
-
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.
CancelTake 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.
Share this video
Embed this video
Video: Enabling Lettering.js