Four CSS3 Tricks to Pimp Your Site in Minutes!

If you’re one of those people who shuts down or goes cross-eyed when you read anything about CSS, stay with me.

You guys know how I roll. I will make this as painless and easy for you to implement as possible — at least that’s my goal anyway. The code is provided below so all you need to do is copy and paste.

I’ve been taking some time to learn more about CSS3, which allows you to do more styling on your site with minimal code and images.

Cleaner code and fewer images ultimately means faster loading pages and it’s better for SEO (less code for the engines to wade through.)

I’ve been slowly implementing a few CSS3 tricks here and there so I developed this mini tutorial on how to take advantage of the border, box and shadow properties. Because not all browsers support CSS3, I haven’t gone too crazy with implementation just yet.

The CSS Border/Box Properties

In this post I’m going to focus on adding rounded corners, image borders and shadows.  Before CSS3, creating rounded corners and shadows was a royal pain.  You had to use an image and position them using coordinates.  But with CSS3, it’s a breeze!

1) Creating Rounded Corners

The border-radius attribute creates rounded corners around an element. This code works in IE, Firefox, Chrome, Opera and Safari.

The first thing you need to do is paste the following CSS code into your style.css file. Feel free to adjust the color, width, padding, etc.

div.rounded
{
padding:10px 35px;
background:#eed9a8;
border:2px solid #000000;
border-radius:20px;
-moz-border-radius:20px; /* For Firefox 3.6 and earlier */
width:250px;
}

Now in your post you simply use…

<div class=”rounded”>This text will be surrounded by an object with rounded corners</div>

And this is the result…

This text will be surrounded by an object with rounded corners

2) Creating a Border With an Image

CSS3 allows you to use an image as a border. This does not work in IE — shocking, I know. 

So let’s say you want to turn the following image into a border…

This is a simple image I created in seconds using Photoshop’s Custom Shape Tool. To turn this into a tiled border, add the following code to your style.css file…

div.border
{
border-width:15px;
width:225px;
padding:15px 20px;
}

#tiled
{
-moz-border-image:url(redBox.gif) 25 25 round; /* Firefox */
-webkit-border-image:url(redBox.gif) 25 25 round; /* Safari and Chrome */
-o-border-image:url(redBox.gif) 25 25 round; /* Opera */
border-image:url(redBox.gif) 25 25 round;
}

Don’t forget to upload your own image and change the name and path of the image named redBox.gif or this won’t work.

Now, in your page, add the following code…

<div class=”border” id=”tiled”>This image is tiled/repeated around the text</div>

And this is the result…

The image is tiled (repeated) around the text

You can also stretch the image border with the following CSS code…

div.border
{
border-width:15px;
width:225px;
padding:15px 20px;
}


#stretched
{
-moz-border-image:url(redBox.gif) 25 25 stretch; /* Firefox */
-webkit-border-image:url(redBox.gif) 25 25 stretch; /* Safari and Chrome */
-o-border-image:url(redBox.gif) 25 25 stretch; /* Opera */
border-image:url(redBox.gif) 25 25 stretch;
}

Now paste the following code into your actual page…

<div class=”border” id=”stretched”>This image has been stretched so it takes on a slightly different shape</div>

And the result is this…

This image has been stretched so it takes on a slightly different shape

3) Creating a Box Shadow Effect

This is a great trick to use if you want to create a shadow box effect around your text, image, etc. You can also use this to add a shadow behind your site’s container. This works in all later versions of IE, Firefox, Safari, Chrome and Opera.

Here’s the CSS code…

div.shadow
{
width:400px;
height:25px;
background-color:#ddd;
-moz-box-shadow: 8px 8px 5px #999; /* Firefox 3.6 and earlier */
-webkit-box-shadow: 8px 8px 5px #999; /* Safari */
box-shadow: 8px 8px 5px #999;
}

Now paste the following into your page…

<div class=”shadow” id=”stretched”>This box will have a shadow behind it</div>

And it will look like this…

This box will have a shadow behind it

You’ve just created an image-free shadow box! Again, feel free to adjust colors, shadow sizes, etc. by editing the CSS code.

4) Creating a Text Shadow

I’m not a huge fan of this CSS3 trick because I think text drop-down shadows can make your site look it’s straight out of 1996.

The key is to make it very subtle by using a shadow color that’s very close to the text color and minimize the shadow spacing.

Text shadows do not work in IE. Again, very shocking. *sarcasm* 

Paste the following code into your style.css file…

h1.shadow
{
text-shadow: 3px 3px 3px #cc7777;
color: #d22929;
}

To call up the shadow, simply paste…

<h1 class=”shadow”>This text will have a shadow</h1>

And it will give you this…

This text will have a shadow

Notice the shadow is a lighter pink color. Of course, you can change the color of the text and shadow by updating the CSS.

Now you can successfully pimp out your site with CSS3! Don’t you feel current and hip? 

by Lisa Irby