4 Ways for Using CSS Instead of Images for Design Effects

4 Ways for Using CSS Instead of Images for Design Effects

There was a time (not so long ago and far away) when having rounded corners, box shadows, text shadows and opacity on a web page required creating images and then futzing and finagling with the HTML and CSS to place those images. However, as of this writing browsers are well on their way to supporting all these effects using only CSS. And, let me say, it’s about time!

The CSS properties we’re talking about here are

  • border-radius
  • text-shadow
  • box-shadow
  • opacity

There are a few caveats, mostly involving Internet Explorer (IE). In brief: IE6, IE7 and IE8 all require proprietary declarations to create these effects. IE9 supports most of the new CSS properties, and IE10 supports all of them. Furthermore, the newest versions of the other popular browsers – Firefox, Chrome, Safari, Opera – support these properties as-is. On the other hand, past versions of these browsers do require proprietary property names such as -moz-text-shadow or -webkit-border-radius.

The following are 4 simple ways to use CSS (instead of images) to implement largely sought after website design effects.

Rounded Corners

Adding rounded corners to many of your site’s elements is as easy as adding the border-radius property to the given selector. For example:

.rounded-corners {
    border-radius: 20px;
}

And, if you prefer to specify each corner’s value separately, you can do so like this:

     .rounded-corners {
         border-radius: 10px 10px 4px 4px;
     }

The values in order are for the corners top-left, top-right, bottom-right and bottom-left.

This is easy, right? The only downside worth mentioning is that for IE6-IE8 there are no (relatively) simple CSS solutions. Doing this in IE6-IE8 requires JavaScript or an .htc file, which I won’t be covering in this post.

Text Shadows

Text shadows are the most difficult to create fully in IE9 and earlier. But if you use basic shadows you should be fine. Or, you can always create more complex text shadows individually for supporting browsers and use basic shadows in IE.

To create a basic text-shadow, simply add the text-shadow property to the given selector. For example:

.text-shadow {
    text-shadow: 3px 3px 0 #b9b9b9;
}

The values are x-offset (right/left), y-offset (bottom/top), blur and color.

For the best results in IE6-IE9, an extra html element is required in addition to the proprietary CSS, as shown here:

.text-shadow {
    background-color: #ffffff;
}

.text-shadow p {
    text-shadow: 3px 3px 0 #b9b9b9;
}

.text-shadow p {
    zoom: 1;
    background-color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.Chroma(Color=#ffffff)
		    progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#b9b9b9);
}

Furthermore, please note that the IE version doesn’t have a value for blur, so they’ll have to do without. Also, if the Chroma portion is omitted the text and shadow will appear quite jagged.

Box Shadows

A box shadow property will create a gray box shadow below and to the right of an element that is 5px wide. To do this, simply add the box-shadow property to the given selector, as shown here:

.box-shadow {
    box-shadow: 5px 5px 0 #d0d0d0;
}

The values are x-offset (right/left), y-offset (bottom/top), blur and color.

For IE6-IE8, add this:

.box-shadow {
    background: #ffffff;
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#d0d0d0);
}

Again, please note that the IE version doesn’t have a value for blur, so they’ll have to do without.

Opacity

Opacity is the simplest of the bunch. To the opacity property to a selector, do so like this:

.opaque {
    opacity: 0.5;
}

Add this for IE6-IE8:

.opaque {
    filter: alpha(opacity=50);
}

In Closing…

Keep in mind that these are visual enhancements and that your website is usable with or without these effects. Hey, maybe Internet Explorer users really don’t care about rounded corners.

If you find that you’re having iffy results in IE9 try adding this to your head tags:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Doing so will encourage IE9 to avoid compatibility mode which will thwart your CSS effects efforts. And you’ll need a valid DOCTYPE in your html, always.

In any event, it’s true that using these rules at this point in time will not give perfect results in every browser. And certainly there are many more complex and more comprehensive solutions available for IE. However, browsers are being updated much more frequently than previously, and it won’t be long before these CSS effects work just fine across all of them. If nothing else, you can always begin the journey simply and let the browsers catch-up:

    .rounded-corners {border-radius: 10px 10px 4px 4px;}
    .text-shadow {text-shadow: 3px 3px 0 #b9b9b9;}
    .box-shadow {box-shadow: 5px 5px 0 #d0d0d0;}
    .opacity {opacity: 0.5;}

Give it a try!

Alan Shupp

Alan brings to the All Web staff 25 years of programming experience and is able to program in several languages including Javascript, PHP and Basic. He develops many of our custom scripts and RTML programming that our clients use to enhance and expand their stores. He also explores his creative side as a talented musician.

Binge on our blogs!

Speaking to Clients

Tips for Speaking to Clients

How to SEO for a Small Business

How to Learn SEO for Your Small Business

Workout Equipment and Email Marketing

An Email Marketing Workout That Gives Results

Leave a Comment





We love keeping up with trends & updates... do you?!