Join James Williamson for an in-depth discussion in this video Modernizr basics, part of CSS: Advanced Typographic Techniques.
Since our poster project is fairly complex, I really don't want all of…that code to get in the way of introducing the basic concepts of Modernizr.…So, I want to demonstrate how it works with this slightly simpler example and…to do that I'm going to work with…reflection.htm which is found on 06_03 directory.…And as you can see, this is a really simple page.…If I preview this in the browser, you see…it just has some text that says, Reflect this.…Okay.…So, Modernizr is a feature detection library.…And in the first thing we need to do, in order to use…it, is to link to it, to bring it in as an external resource.…
Now, I'm going to do that in the head of my…document, so right underneath the link for our external CSS file.…And a couple of you guys might be wondering…well, why would we do it in the head?…Why not load it up in the body so that it doesn't slow down page loading?…The issue with that is that a Modernizr has the HTML5 Shiv baked into it.…So if it's going to be used properly, it needs to be in the head of the document.…
- 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.