Okay, in this movie we're going to be exploring the basic linear syntax when it comes to CSS gradients. …So I'm working with a div here called box, and I defined this box to be 500 pixels by …500 pixels, and then I have specified a gradient, and I've used all of the different browser …prefixes that I need to use for this. …I'm going to jump over in my browser now and take a look at this, and you can see that …this is just a standard gradient that goes from top to bottom. …By default when you create a gradient using CSS, if you do not define which way it's supposed …to go, meaning, top, left, right, bottom whatever, it will automatically go from top to bottom.…
Now if I jump back in here and look at the actual syntax of this, let's take a look and …see exactly what it does. …At the very front end here, you are working on the background property and on the background …property you want to add a gradient to the background. …And so you have to append the browser prefix for now, because there is no standard for this. …
- Exploring browser compatibility
- Creating horizontal and vertical gradients
- Adding extra color stops
- Exploring radial gradient syntax
- Using transparency
- Creating fallbacks
- Generating gradients via the web
Skill Level Beginner
1. Getting Started
2. Creating Linear Gradients
3. Creating Radial Gradients
4. Quick Projects
Simulating metallic textures8m 31s
5. Beyond the Basics
- 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.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.