Tutorials

Five Cool CSS3 Tricks

There's loads of stuff on the web about CSS3 so I won't bore you with the details and the fact that you won't be able to use them for ten years until every last trace of IE6 and 7 has been eradicated. I just wanted to show you what I believe are the five coolest effects you will (eventually) be able to create with full CSS3 support.

IE users may as well look away now. This isn't going to be for you!

Box Shadow

Ever wanted to give your boxes a cool shadow effect without using images? Well, with CSS3 support, you are able to. The code is simple to use and has the attribute box-shadow. You need to tell the browser four things in your code.

  1. The horitontal off-set of the shadow. A positive off-set on the shadow will appear at the right of the box and a negative at the left of the box
  2. The vertical off-set of the shadow. A positive off-set will appear below the box and a negative off-set will appear above it
  3. The blur radius. 0 will give you a solid black shadow and anything upwards will start to blur the effect
  4. The colour of the shadow

This is what the code for the example below would look like;

#box1 {
background-color: #09f;
box-shadow: 8px 8px 5px #888;
padding: 5px;
}

And here is the result;

Here is your Drop Shadow Box

Text Shadows

Just whilst we are getting jiggy with the shadows we can add some drop shadow effects to text with CSS3 as well. Much like the box shadow property above you need to give it four attributes.

  1. The horitontal off-set of the shadow
  2. The vertical off-set of the shadow
  3. The blur radius
  4. The colour of the shadow

This is what the code for the example text below would look like;

#text1 {
color: #06F;
font: bold normal 18px/22px Verdana, Arial, Sans-serif;
text-shadow: 2px 2px 2px #888;
}

And here is the result;

Corrosive Online Taught Me CSS3 Magic Tricks

OK, before you say it, I know that this is CSS2 really. I wanted to include it as something that is now widely supported by browsers and will be a much loved feature of CSS3.

Rounded Corners

As Homer Simpson might say..."mmmmm...rounded corners". This effect is achieved using the border-radius attribute. This is what the code for the example below would look like;

#box2 {
background-color: #06f;
border-radius: 5px;
border: 2px solid #333;
padding: 10px;
}

And here is the result;

Here is your Box with Rounded Corners

Border Images

Carrying along the border theme for my next trick, let's try using an image for a border. At the time of writing this, support for this property is handled by Safari, Firefox 3.5 and upwards and Chrome. The attributes are broken down into shorthands for;

border-image:
  1. border-top-image
  2. border-right-image
  3. border-bottom-image
  4. border-left-image
border-corner-image:
  1. border-top-left-image
  2. border-top-right-image
  3. border-bottom-left-image
  4. border-bottom-right-image

This is what the code for the example text below would look like;

#box 3 {
width: 80%;
padding: 14px;
border-image: url('images/tips_images/css3_tut1/border_img.png') 20 20 20 20 round round;
}

And here is the result;

Here is your Box with an Image for a Border

One more quick trick with a border image is to make it stretch by changing the code slightly;

#box 4 {
width: 80%;
padding: 14px;
border-image: url('images/tips_images/css3_tut1/border_img.png') 20 20 20 20 stretch stretch;
}

Now the box looks like this;

Here is your Box with a Stretched Image for a Border

Opacity

Saving the best 'til last I reckon. Adding opacity to a div means that you can get really cool masking effects over images. It also probably the simplest one to master. Here is the code for the example below;

#box5 {
background-color: #fff;
color: #000;
width: 285px;
opacity: 0.7;
}

And here is the effect it all it's glory;

The Tree Gives a Stunning Dappled Light Effect

You'll notice for this one I used an opacity value of 0.7. This can easily be adjusted between 0.1 and 0.9 to achieve the effect you want.

I hope you have enjoyed this brief journey into five cool CSS3 Tricks. I have had a lot of fun researching and getting it all to work. If you are missing the point and viewing in an older browser then do yourself a favour and upgrade! You won't get the benefits of CSS3 until you do.

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details.
Join The Mailing List
    If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.