Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
There is a lot of excitement surrounding CSS3 gradients and the ability they give us to draw gradients directly within the browser without using any background images or filters. While this excitement is well founded, the current implementation in support of gradients varies widely from browser-to- browser, requiring us to do a little bit of extra work to get them to work properly and to provide fallback methods for browsers that don't support them currently. To understand why there's such variation in support for gradients, it's helpful to understand the background behind them.
In 2008, the WebKit team announced support for gradients, with a modified syntax that was based off of the HTML5 canvas syntax. In 2009, Mozilla announced support for gradients as well, with a similar syntax as WebKit but slightly modified. As it turns out, the CSS working group had already have been discussing of gradients syntax, and voted in the same year to add their syntax to the image value's module 3 working draft. Mozilla decided to go with the standard, and modified their syntax to match the W3C's model.
Where does that leave us? Well, currently we have two working syntaxes. The WebKit implementation and the W3 proposed standard, which is the syntax implemented by Mozilla. At the time of this recording, Opera and Internet Explorer don't support either of these implementations, although I think it's safe to assume that some type of support on both of those browsers is on the way. Before we get into building a couple of gradients for ourselves, let's take a moment to explore the basic syntax of both implementations.
For WebKit, you can use gradients as part of the background image, border image, list style image, and as generated content. The basic syntax uses the WebKit vendor prefix, which is then passed the values required to create the gradient. First, you declare the type of gradient, linear or radial, and then you pass the start and end position of the gradient. This can be keywords, such as you see here, or X and Y coordinates. If the gradient is a radial gradient, a radius can be passed through as well.
Finally, color stops for the gradient are passed. Color stops are functions that determine where on the gradient colors should appear. The first value passed into the color- stop is its position passed as a decimal, representing its location as a percentage of the total gradient. Next, the color of the color stop is specified. Keywords, hex values, RGB, RGBA, HSL, and HSLA are all except the color formats for this syntax. The unlike WebKit, Firefox currently supports applying CSS gradients to the background image property only.
For the syntax, you first use the appropriate vendor prefix with the gradient you want. Linear, radial, or repeating linear or radial gradients. The first value is the starting point for the gradient. This can be defined as a point using keywords, percentages, or pixel values, or even as an angle. If you mix points and angles together, you'll define the starting point for the gradient, which will then follow the path of the angle specified. If no starting point is specified, it's understood to run from left to right on the element.
After this, you specify color stops, which are comma-separated values. Color stops indicate the color, which can be keywords, hex values, RGB, RGBA, HSL or HSLA values, and an optional stop position, which can be represented as a percentage or as a length of value. Now it's easier to understand these methods after you've actually done them. So in a moment, we'll experiment by building a couple of gradients for our test site. However, there is a lot more to the gradient implementations that we've covered here.
For more information, I recommend checking out the W3C's Image Values Module Level3, the WebKit blog that introduced the WebKit syntax, and Mozilla's Developer Center's articles on gradients. There is a lot of gradient information in those pages that will deepen your understanding of how these gradient implementations work.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.