css tutorial

Continuing with our CSS3 tutorial series, today we take a look at rounded box edges, box shadows, and text shadows – all using CSS3.

Rounded box corners

Many websites nowadays are making some of their more boxy elements have rounded edges to add elegance. Before CSS3 was around, this would have to be done via an image. But, here’s how to do it via CSS3:

Let’s break this down: the #rounded-edges part is the name of the element. Feel free to change the name, just keep the # in there at all times. The border-radius part is what actually makes the magic happen – don’t change this. And last, but not least, the 5px part is how rounded the edges of the box should be. The bigger the number, the more rounded the edges and vice versa.

Keep in mind that you may have to make some modifications to this code to make the border-radius work in all modern Web browsers. For example, for Firefox, you’re going to want to use -moz-border-radius in place of border-radius.

Box shadows

To add some depth to their boxy elements, websites are now adding shadows to the mix. They’re extremely customizable, and easy to integrate. Here’s how:

Let’s break this one down as well: the #box-shadow part is the name of the element. Feel free to change this, just be sure to keep the # part. The box-shadow is what makes the magic happen – don’t change this. The first 10px is the horizontal offset of the shadow. If the number here is position, the shadow will be on the right. If the number here is negative, the shadow will be on the left of the box. The next 10px is the vertical offset. If the number here is negative, the shadow will be above the box. If the number here is positive, the shadow will be below the box. The 5px is the blur of the shadow, or in easier terms – how sharp the shadow is. If the number here is 0px, then the shadow will be sharp. The bigger the number, the smoother the shadow. The #000 part is the color of the shadow. In this example, the shadow color is black.

Again, you may have to change the box-shadow part inside the {} to make the styling work in all Web browsers: for Safari and Chrome, change it to -webkit-box-shadow. For Firefox, change it to -moz-box-shadow and for Opera, change it to -o-box-shadow. You can have multiple box-shadows (each separated by a ; ) in the same element to make the effect work in all browsers.

Text Shadows

To add some cool effects to text, some web designers may add a shadow to the text to give it some depth. This wasn’t new in CSS3, but is beginning to become more widely used as support for text shadows is improving. Here’s how to make text have shadows:

And of course, let’s break this down: the #text-shadow part is the name of the element. Feel free to change this, but be sure to keep the # part. The text-shadow part is what makes the magic happen – don’t change this. The #000 is the color of the shadow. In this example, the color of the shadow is black. The 20px part is the x-coordinate of the shadow, while the -10px part is the y-coordinate. Finally, the 5px part of the blur of the shadow – in other words, how sharp it is.

That’s it! Now you can make boxes that have rounded edges, have a shadow, and have text inside them with shadows to add a cool small effect.