CSS3 is probably one of the coolest things to hit the web design scene since, I don’t know, HTML5. And here’s why: CSS3 has a lot of new features that simply take web site styling to the next level.
With CSS3, web browsers natively produce a lot of the styling effects that were once only achievable through creative HTML hacks and images editing programs like Photoshop. What’s great about CSS3 is that it’s good at reducing the amount of image files and code you have to place on your site as part of your design. This means reduced server requests and load times for your website.
Box Shadows
You’ll usually find this effect used subtly to surround item containers on a webpage. Back in the day, the shadow had to be a separate image slice (or a few different images). With CSS3, you can now easily create a shadow around an element with some code, and be able to change the position, color, and blur of that shadow.
Rounded Corners
This is already very popular on the web. Honestly, rounded corners just look more user friendly than square boxes. Best part now is, you can apply this effect to HTML elements with CSS3. That’s good because you’ll find rounded corners almost everywhere. Twitter for example, takes the “Round ALL the corners!” approach.
Text Shadows
You can add a shadow to HTML text that can then be highlighted, copied and pasted just like normal text. The old way involved typing the words you wanted in Photoshop, applying a drop shadow, and saving those words as an image file. But why use images when you can use just text? You can change the shadow angle, the shadow blur, and the shadow color in CSS. You can also check out this CSS3 generator to see how it works.
Opacity
This property makes can make elements more see-through. You could go about setting the opacity of an image in an image editor, and then save it as a .png or .gif file with transparency enabled. Or you could just write one line of code in CSS. It’s up to you. The transparency value ranges from 0 (completely see-through) to 1 (completely solid).
Background Gradients
Gradients created right in the browser as soon as you load the page? Cool! It’s another really popular effect that was accomplished by using images (plus some CSS actually) and can now be done solely with CSS3. Notice that this code will only work on specific Firefox, Chrome, and Safari browsers. This feature is not as widely supported on all browsers and you have to write separate lines of code for different browsers. The old way of doing gradients involved generating a thin gradient image and repeating it across the page. If you want to stick with the old way, you can use this gradient generator. If you want to try the new CSS3 way, try this resource. It generates a lot of that compatibility code for you.
The only real caveat of CSS3 is the fact that not all features are compatible in all browsers. CSS3 is constantly in development and browsers simply need time to catch up to all the latest features. However, the features mentioned above should work fine across the latest iterations of all the major browsers.
CSS Animations and Transitions
CSS animations are finally available in all major browsers, even in IE (since version 10). There are two ways to create CSS animations. The first is very easy, it is done through animating the changes of CSS properties with the transition declaration. With transitions, you can create hover or mouse down effects, or you can trigger the animation by changing the style of an element with JavaScript. You can see the transition below by hovering over the planet - this will cause the rocket to close in.
Box Sizing
The single biggest cause for headaches for CSS beginners is the box model. The standardization bodies have probably had their reasons, but it doesn't feel at all intuitive to have the CSS width and height of an element affected by its padding and borders. This little (mis)feature breaks layouts and wreaks havoc, but finally there is a way to restore our sanity by using the box-sizing rule. You can set it to border-box, which makes elements behave exactly the way you expect. See for yourself:
Border Images
The border-image property allows you to display custom designed borders around elements. The borders are contained in a single image (sprite), with each region of that image corresponding to a different part of the border. Here is the image used in the below example.
Media Queries
Media queries are an absolute must if you are serious about web design. They have been around for a while, but are worth a mention, because they have transformed the way we build websites. It used to be that you had a regular website, wide enough to fit the smallest monitor resolution used at the time, and a separate mobile website. These days, we build sites that are responsive and which adapt to the type of device, orientation and resolution.
Media queries are surprisingly easy to use - all you need to do is to enclose CSS styles in a block guarded by a code>@media rule. Each code>@media block is activated when one or more conditions are met. As an example, try resizing this page. I have also included it in the editor below; try removing the the code>@media block to see what happens.
Multiple Backgrounds
With multiple backgrounds, designers can achieve very interesting effects. They can stack different images as backgrounds of the same element. Each image (or layer) can be moved and animated independently, like you can see in the demo below (try hovering over the image with your mouse). All background-releated CSS rules can now take a comma-delimited list of properties, each for the specific background image: