Basic CSS3 Techniques to Liven Up Your Design

code

If you still haven't tried out CSS3, you should know how easy it is to create excellent designs. Most of these techniques can be done without requiring extra bloat such as images or JavaScript.

What's great is these are mostly small details in the design, meaning that everything will still be usable in older browsers, including Internet Explorer.

There are many advanced techniques that could be done with CSS3, but I'll just stick to some of the simpler ones that even beginners can try out and mess around with.

Note: The examples shown will only work in modern browsers (i.e. not IE)

Rounded Corners

Rounded corners are a very common feature in web design. Unfortunately, before CSS3, these would be created using images. The problem with that is it requires the images to be loaded, increasing filesizes and HTTP requests, slowing everything down.

To create rounded corners with CSS, you can use the simple border-radius property. However, for this to work in Firefox and Webkit browsers, you would need to use -moz-border-radius and -webkit-border-radius, respectively.

.rounded-corners {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}
Firefox, Safari, Chrome, Midori, etc. users should see rounded corners around this box.

For more information on border-radius see CSS3.info.

Shadows

Remember when shadows were a pain to get working on a website? Well, thanks to the box-shadow property, shadows around boxes are now made easy!

Shadows behind text have been included in CSS for a while now, with the text-shadow property.

Usage of box-shadow is as follows:

box-shadow: 1px 1px 7px #2D1D1D;

As you can see, this takes four values. The first is the horizontal offset of the shadow, the second is the vertical offset, and the third is the blur radius. Finally, we have the colour of the shadow.

Like border-radius, you need to prefix the properties with -moz- and -webkit-.

box-shadow: 1px 1px 12px #2D1D1D;
-moz-box-shadow: 1px 1px 12px #2D1D1D;
-webkit-box-shadow: 1px 1px 12px #2D1D1D;

Firefox, Safari, Chrome, Midori, etc. users should see rounded corners around this box, with a drop shadow. Notice how the shadow matches the rounded corners.

Transparency with RGBA and Opacity

Have you ever wanted to make transparent elements with CSS? Well, now you can!

First, let's take a look at the opacity property. This takes a value from 0 for completely transparent, to 1 for completely opaque. For example, to make a box that has 50% opacity, you would set opacity to 0.5.

opacity: 0.5;

This box has all of the previous properties piled on it, but with 50% opacity.

But what if you just want to make the background transparent? Don't worry, you can do that with RGBA!

RGB was used in older versions of CSS to use red, green and blue colour values, written as decimal numbers. RGBA extends that with A for alpha, meaning opacity. You can use it like this:

background: rgba(156, 87, 88, 0.5);

This will have the same colour as the last box, but it will only apply to the background.

This box has all of the previous properties piled on it, but with 50% opacity.

Note that this time, the shadow is not affected by the opacity. Also, the text looks about the same, because it's light text on a light background, which isn't too readable.

Border Images

Border images are another cool feature of CSS3. It does pretty much what you'd think: it uses an image for a border. For information on using images for borders, check out this awesome page at CSS3.info.

These are just a few examples of common features made easier. CSS3 has a lot more to offer, just try things out and see what you like.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

11 Comments

  1. January 16, 2010

    Just curious... weren't rounded corners available in CSS2?

    • January 16, 2010

      Good question. I'm pretty sure they were introduced in CSS3, but I'll check.

      Using the W3C CSS validator, I just tested out the following code:

      .test {
          border-radius: 5px;
      }

      When validating as CSS2.1, it gives me an error, but when validating as CSS3, everything goes fine. So I think that means that it wasn't introduced until CSS3.

      Of course, border-radius was in use since a while ago, when CSS2 was (and still is) used more.

  2. January 17, 2010

    I really need to start learning what CSS3 can do. I have been putting it off, but this article is a good motivator.
    Thanks for the examples - those are exactly what I need to implement on my site.

    Good stuff as usual.

  3. January 21, 2010

    These are great tips. I can't wait until CSS3 becomes more accepted across the board - it will make snazzy web development that much faster/easier!

    Thanks!

    • January 21, 2010

      Yeah. I at least hope the next version of Internet Explorer will have at least some CSS3 compatibility.

  4. January 22, 2010

    Great advice about some of the great things CSS3 is capable of, Eric. I'll definitely tweet this post as well. :)

  5. Maxi
    January 26, 2010

    very good

Trackbacks/Pingbacks