Join James Williamson for an in-depth discussion in this video Creating default styles, part of CSS: Advanced Typographic Techniques.
Before we get into the complexity of integrating Modernizr into our poster…project let's take a moment to talk about what happens if nothing works.…(LAUGH).…You know, what if say JavaScript isn't enabled?…Or if the user agent doesn't support a lot…of the features that we're actually going to be using?…Well, the best way to approach this is to create a set of default styles first.…Styles that basically work anywhere.…And then progressively enhance your design…by using Modernizr and some other features.…So here I have the poster that HTM opened and…this is found in the zero six zero four directory.…
Again, if I preview this in my browser, you…can see it just has the text, I can't go…back, I don't want to because all my mistakes…brought me to you, Avett Brothers in All My Mistakes.…So, this is actually acceptable but I wanted to…make it a look a little bit more poster-ish.…Okay?…So, if I go back into my files, and I'm just sort of pointing out the fact…that we already have a set of sort…of default styles that we're going to be working from.…
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: Creating default styles