Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

So what do we do? We figure out ways to start rolling out new techniques so we don’t have to wait. CSS3 is the third level of CSS to be created, and isn’t compatible with all browsers or officially launched quite yet. With that being said, there are some great techniques you can start using today to get yourself familiar with.

→  Browser Compatibility

  • Firefox
  • Safari
  • Chrome
  • Opera

Because CSS3 is so new, not all browsers have made the upgrade. As a result the following browsers are CSS3 compatible →

Internet Explorer 9 will also be compatible when released. Safari and Chrome seem to work best with CSS3 for the moment. When using CSS3 make sure you are testing your layouts with all three browsers to ensure the best layout for all three bowsers.

→  HTML5

Apple HTML Showcase

HTML5 is also a very much anticipated development in the web design world. CSS3 is being designed to work best with this code, and you can see what these two can really don on Apple’s website, although you have to use Safari to view. With all that being said let’s get started with what CSS3 can really do.

→  Buttons

Pretty CSS3 buttons
CSS3 Using the Button Element

CSS3 will allow you to do many different things to buttons with minimal work. Before, if you wanted to have your buttons have rounded corners, you would have to create images or use Javascript. Now, you can just add 2 more lines of code in your CSS sheets.

.r-box {
background-color: #666;
color: #fff;
line-height: 20px;
width: 200px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

The above example is from the web monkey, and demonstrates how to create a rounded corner button using CSS3. The last two lines are what should catch your eye. Adding the border-radius specs into the code is the key to creating the rounded corner look.

Creating multiple buttons at one time is a great feature CSS3 brings. Instead of creating each image individually, you can now create scalable components at once. Below is a screenshot of how ZURB creates multiple (and different colored) buttons.

/* Sizes ———- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}/* Colors ———- */
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}

This technique cuts out, “nearly half the CSS it would have taken with hex colors. We’d have three times the CSS per color—one color for background, one for border, and one for text-shadow,” reports ZURB.

→  Sliding Door Technique

CSS Sliding Door using only 1 image

Before this technique, using multiple images and a lot of time in photoshop was required. Now you can use CSS3 to use one image to navigate through your menu bar. To achieve a look like this (provided from LOONDESIGN) you will only need to have on image, not three.

“The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.“

This post goes on to explain exactly how the writer attained the look above.

→  RGBA

RGBa Browser Support

Similar to its counterpart RGB, RGBA adds an alpha-blending feature to the color scheme. RGBA makes creating buttons much easier, and cuts out a long drawn out process of creating multiple images and colored backgrounds. Safari supports the gradient feature for CSS3, but all other browsers haven’t caught up yet. To make sure your site is still able to be read on any other browser, it would be wise to still use an image for the gradient background.

RGBA will allow programmers to “fill areas with transparent color.” An example from CSS-Tricks is below.

→  Imagery

CSS3 Bokeh Gallery
Polaroids with CSS3

Between different transitioning effects, ways to showcase your photos and animation, CSS3 is making web designers life much easier. Without using any Javascript you can now design your images to look like a Polaroid picture. ZURB has made this technique popular already, and they explain how to do it here.

3D is also another feature that can be utilized with CSS3. Being able to integrate pictures that pop up at you without using Javascript can help with loading time, and make things a lot less simpler on the designing end.
As mentioned earlier, many of these new transitions work well with HTML5. Once you have familiarized yourself with this new code, you can integrate the two new styles to really create a modern looking page. Lostkore.es describes the transitions, “we’ve all seen those beautiful image hover description done with javascript, but why use javascript when we can use CSS3 to achieve the same cool effect.”

Sexy Image Hover Effects using CSS3
Pure CSS Sliding Image Gallery No JS

If you would like to animate your photo gallery and have multiple images slide from one picture to the next, using /* Animation for the :target image. Slides the image in. */ will help you. This command tells the browser (works best in Chrome and Safari) to slide the images from one to the next. The rest of the code will deal with timing of the slides etc. To see this effect in motion, click here.

To generate a pop up effect for your images, you can also integrate HTMl5 and CSS3 and cut out javascript and Flash all together. A demo of how this works is located here, although again it works best in Chrome and Safari.

These techniques are just a few of MANY that CSS3 is capable of doing. In the next series of this article we will go over how to create animation and 3D effects using CSS3.