Now that we understand the basics of the radial gradient syntax, let's create our own basic …gradient here inside of our code editing application. …Now again, you can use any code editing application you want, just have opened up this CSS document, …and then in a browser have opened the index.html file that I provided for you. …And so what we're going to do here is just type out the basic syntax for a gradient. …So I'm going to start out with the background property, and then we're going to append the …webkit radial gradient statement, and then I'm going to define some color.…
So I'm actually going to have this start off with red and then go to yellow, just like …that, and then I'm going to go over to my browser once I save it and refresh it, and …so there you can see, and since I have a border- radius applied to this, it almost looks like a little …picture of the sun. …And if I go back in here I can reverse those pretty easy just by going yellow, red--I think …that will look better, there we go, and when I save it and refresh it that's what it looks like. …
- 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.