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>