Remove images and increase load times with CSS3

by: Caleb Jonasson - May 5th, 2010   Filed under: CSS, Web Development Add Comment

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;
}
Tags: , , , ,

CSS3 Drop shadow on text

by: Caleb Jonasson - December 16th, 2009   Filed under: CSS Add Comment

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>

This is a text drop.

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.

Tags: , ,