Cross-Browser CSS3 Visual Effects
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
This article covers several CSS3 features that you can use to give your websites creative visual effects such as drop shadows, rounded corners, and gradients. These new features save you from having to use static image files to achieve the same effects, improving flexibility and cutting down on bandwidth and HTTP requests (and time spent in Photoshop).
CSS3 doesn't really provide anything completely new that we've never achieved on websites, but it does allow for doing a lot of our design and development work more quickly and easily than ever before. In this article, I'll talk about some of the different types of "CSS3 bling," how it can make your work easier and more efficient, and how you can expect it to work across browsers.
Now, let's qualify what I mean by "CSS3 bling."
The Premise of CSS3 Bling
Essentially, I use the term "CSS3 bling" to refer to CSS3 features that you can use to make your web user interfaces (UIs) prettier, more striking, and more interactive. These features take the place of older techniques we once used to enact using several images, superfluous non-semantic elements, scripting, or all of the above.
For example, to create a rounded-corner box that changed size in a liquid layout, we used to have to create four background images for the individual corners and hang them off the box itself and three extra <div>s nested around it. Now we can create a rounded box using a single CSS declaration.
In short, CSS3 is great—more flexibility, fewer images to create, less time spent in Photoshop creating multiple image versions (because your boss keeps changing his mind about the color scheme), fewer HTTP requests, less script to process, and more time spent chatting down at the pub.