Code With Design

Recently when working on a clients site I found that there were a lot of images being used when a quick little CSS fix could have done the trick. The basic outline of the site involved a few transparencies and a lot of drop shadows. The drop shadows were placed on the container/wrap and the text had drop shadows that had been all done in Photoshop. (Some of the drop shadows were not consistent.)

After looking at the site I told the client that within three minutes I could remove all of the images being for text, drop shadows and opacity allowing his site to load faster.

The answer was what I had expected and the following code was quickly being thrown into the site.

The Code

For the drop shadows on divs:

1
2
3
4
5
6
7
8

.container{
     width:1080px;
     margin:0 auto;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     -moz-box-shadow: 0 2px 5px #666;
     -webkit-box-shadow: 0 2px 5px #666;
}

For the drop shadows on text:

1
2
3
4
5

h3{
	font-family: Times;
	letter-spacing: 1px;
	text-shadow: 2px 2px 2px #000;
}

For the opacity:

1
2
3
4
5

.sidebar ul{
	list-style-type:none;
	opacity: 0.9;
	width: 180px;
}

With the introduction of CSS3 we now have quite a few new CSS techniques at our disposal. To create a drop shadow we only need two lines of code for our technique to work on most of the popular browser. In order to get rounded corners we only need another two lines of code. This post is purely for reference purposes when using CSS3.

Rounding 4 corners

To round four corners you only need the following code. It is quite simple to get these to work and the information in the lines explain themselves when working with div tags.

-moz-border-radius:0px;
-webkit-border-radius:0px;

An example of this code in action would be as follows:

.post {

-moz-border-radius:5px;
-webkit-border-radius:5px;

}

The HTML:

<div class=”post”><h1>hello</h1></div>

Rounding individual corners

To round individual corners you will need to use the following pairs of code. Much like rounding all corners this is pretty self explanatory.

-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;

-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;

-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;

-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;

An example of the individual corners would be as follows:

.topleft3 {

-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;

}

.topright5 {

-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;

}

The HTML:

<div class=”topleft3″><div class=”ropright5″><h1>hello there</h1></div></div>

Giving a div a drop shadow

This is pretty simple much the rest of the code. It allows you to give a box a drop shadow and a pretty effective one at that.

-webkit-box-shadow: 0 0 0 #000000;
-moz-box-shadow: 0 0 0 #000000;

Once again an example:

.shadow {

-webkit-box-shadow: 0 1px 5px #333;
-moz-box-shadow: 0 1px 5px #333;

}

The HTML:

<div class=”shadow”><h1>Hello Shadow</h1></div>

Adding drop shadows is now possible with CSS3 but is it worth it? There are only a few web browsers that currently support a css styled drop shadow are Firefox, Opera and Safari. (Don’t expect the old IE versions to work with this because they don’t work with anything.) This means that the page may look better off without using dom style text and going with an image.

The code is simple and looks like this:

text-shadow: 2px 2px 3px #666666;

Yes, this is all that is required to add a drop shadow but it may not be worth it depending on what browser the user is currently on. For the following example I used this bit of code.

<style>
.textdrop {
font: 80px Verdana, Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 3px #666666;
}
–>
</style>

<div class=”textdrop”>This is a test</div>

If you are unable to view the above text in your browser I have included a print screen of what it looks like in Firefox.

The text is slightly different because it has been placed in a blog with a different css style on it. To see the drops shadow as it truly is you can use the image or click here to see it in action.