Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I know we talked briefly about CSS3 earlier when we discussed the history and current state of CSS. So we know that CSS3 isn't really a specification itself, as CSS has been broken up into series of modules that are evolving at different paces. That still, however, leaves the question open: what exactly is CSS3, and why are so many people talking about it? Well, in many ways, CSS3 is simply a brand much, like HTML5 is.
People are using it as a blanket term to describe the new CSS features and the functionality that have emerged over the last few years. Now, part of this new functionality is the continued development of CSS through the W3C. Another part of it is being driven by a new generation of browsers that are focused on giving designers more powerful tools for creating sites. In fact, some of the syntax and features being added to the CSS modules are coming straight from people like Mozilla and WebKit, as they continue to stretch the boundaries of what's possible through CSS.
So let's take a look at some of the features most commonly associated with CSS3. Keep in mind that many of these features are in the early stages of being supported by browsers. Many are experimental, and many are features that have been around for some time, but are just now being widely implemented. Taken as a whole together, they will give you a good idea as to what people are talking about when they mention CSS3. In many cases, enhancements to older capabilities are defined as CSS3. This include things like border radius, which allow you create rounded corners for elements; border images; background property editions, like the ability to have multiple backgrounds; and enhancements to controlling background image size, orientation, and clipping.
In some cases, it's also associated with enhancements to existing property values. The new color values of HSL and the addition of RGBA and HSLA, which add alpha values to color values, are also often labeled as being features of CSS3. Many of the new text-formatting features are often also classified as CSS3. These include things like the new text shadow property, creating multiple columns, and working with web fonts. Now, web fonts aren't new, and they've been around since the CSS2.0 specifications, but browsers have only recently started adding widespread support.
Web fonts allow you to use fonts that aren't installed on the client's system, and greatly increase their creative control that designers have over their sites. Quite a few new selector types have been added to CSS as well, and although they don't get a lot of attention when people discuss CSS3, I would actually argue that they are among the most important additions to CSS, as they dramatically increase a designer's ability to target elements on the page. There are also a few features that are almost always mentioned when CSS3 is discussed.
If you've been researching it at all, I am guessing you've come across these. First, box shadow gives us the ability to add drop shadows to element boxes. You can control the color, offset, blur, and whether this shadow is offset or inset in relation to the element. One of the features that gets a tremendous amount of attention is CSS gradients. CSS gradients are incredibly powerful and allow you to set the background color of an element to a gradient. You can use a simple two-color gradient, or you can go all out by using numerous color stops and varying levels of opacity throughout the gradient.
Now, these can be linear or radial, and designers are currently using them to create all kinds of impressive visual effects, from creating buttons all the way to building background patterns. CSS transforms are also getting a fair amount of recent attention. Transforms allow you to do things like rotate items, scale them, skew them, or otherwise transform elements on the page. While this has powerful implications on how page layout can be controlled, it's also often used in conjunction with another new CSS feature, CSS transitions.
CSS transitions lets you animate from one CSS property value to another. For example, you could animate the height of an element from 0 pixels to 100 pixels to reveal the contents of the element. When combined with transforms, you can animate the position, rotation, and even scale of an element. One of the properties gaining the most attention currently is CSS-based animations. Although the two are similar, don't confuse transitions with animations. CSS animations are contained within their own specification, and they allow you to create keyframes to control animations and properties that allow you to control the timing, duration, and looping of the animations.
While that's not a comprehensive list of all the features that are being attributed to CSS3, it should give you a good idea of what people are referring to when they discuss it. There's another thing that you should consider when approaching many of the features that I've talked about here: most are either not widely supported or not supported at all in older browsers. Now, many of them are experimental and are only supported through the use of vendor prefixes, which we're going to discuss in more detail in just a little bit. What that means is that if you decide to use these new features, you will need to--at least in a short term--plan for how you want to deal with older browsers, or browsers that don't support the features.
In some cases, like gradients, browsers differ in syntax and execution. You'll also need to keep an eye on how the syntax is evolving. Many of those features are still being refined, and it's not uncommon to see the syntax and behavior go through significant changes before they're stabilized. In other words, proceed with caution until the features are supported evenly across browsers. So keep in mind that CSS3 isn't really any one specification; it's more of a general term used to describe evolving CSS features.
Keep an eye on emerging techniques and how they're being implemented, so that you can make intelligent decisions about when to start using them. For more information on many of the CSS3 features I've mentioned here, be sure to check out my CSS3 First Look title in the lynda.com Online Training Library.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65169 Viewers
61 Video lessons · 96056 Viewers
56 Video lessons · 109884 Viewers
82 Video lessons · 104996 Viewers
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.