Join James Williamson for an in-depth discussion in this video Using gradients, part of CSS: Advanced Typographic Techniques.
Gradients are a long awaited addition to CSS.…And they have been around long enough now…for us to start using them with confidence.…However, there are still enough…differences in syntax support among browsers.…That is does require a bit of an effort on…your part, in order to make them cross browser compatible.…So, I have the speed.htm file open from 03_03.…And we're just going to add a gradients to our hot rod span…selector here.…And I just want to go over the initial gradient syntax,…and then I'm going to show you the cross browser stuff.…
So, first thing I'm going to do is…right after background color I'm going to come down.…I'm going to come in, and I'm going to type in background.…And what I'm going to do here is I'm going to do a linear-gradient,…so it's letting me know that I want to do a linear gradient.…Open up a parenthesis and I'm going to say, to bottom.…So this is directional, so it's basically going to say from one…color to the bottom.…the next thing I'm going to do is do a comma,…so I'm going to separate the values out here through using commas.…
- 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.