Main content begins here

Designing & Coding CSS Special Effects

Wednesday, March 18, 2009

Using CSS for special effects has gotten easier with better browser support for CSS and PNG graphics. Although still painful in IE6, these changes have made special effects more fun to use. Using them requires a little planning though.

If you're a true designer for the web you know that web design is not all about a pretty face for a web site. It's about planning. Planning for a user's reactions, planning for content to grow, and on it goes. So in this article we'll talk a bit about planning for and executing special effects. I'll use some real-life examples from sites I've worked on.

Special CSS Effects Using PNGs For Transparency

First up is the Reston Virginia Pet Fiesta. That's right, a party for your pets! In this design I was given a logo, so I based the design on some colours used in the logo, plus the whole fiesta vibe. The background is a sort of stucco feel but that's a fairly mundane repeating background. The special part is the jagged red line between the header and body content, echoing the jagged red line from the hat which the logo animals are wearing.

The first step here was knowing I needed something to dress up the design and to help marry the header with the body content area. Like The Dude's rug in The Big Lebowski, I needed something to tie the room together. I figured a big jagged line echoing the hat would be nice. The problems that went through my head were:

  • do i want to have to cut all those images for where the jagged line overlaps the header and body and left/right columns
  • how will i be able to get this to work with the flash piece that is supposed to show at the top of the body area?

What I decided was that I needed one graphic that had transparency. This way I would not have to cut a bunch of graphics but could instead cut one image that I could layer on top of the design. A GIF was ruled out because I didn't want to have to fuss with getting the jagged line placed EXACTLY right so the edges all matched the various colours it was overlapping, and additionally it probably wouldn't have looked good overlapping the Flash piece. The answer was to use a PNG.

Using PNG and CSS to Achieve Special Effects

Using a PNG meant now I was opening another can of worms because IE6 doesn't support PNG. In order to use them you have to use something like JQuery with PNGFix. This was OK with me because from the beginning I was planning to use JQuery, knowing the shadowed edges of the design would need PNG-power as well.

I went into Illustrator and used a brush to create a fat, irregular-edged but straight line. I then used a filter to make the line jag up and down. I then pasted this as a smart object into Photoshop. Since it remained a vector shape I could resize it without loss of clarity until it looked right in the design. Then I saved out just this jagged line as a PNG.

I created a <div> at the bottom of the HTML template for this design, using CSS to size the div. I placed the jagged line PNG inside the div, then used CSS to position the jag up in the header, overlapping the other design elements including the flash piece. Once the flash was saved out with a transparent background and the wmode was set for its embedding, the jag appears to overlap the flash piece.



It seems like you could have

It seems like you could have achieved this affect without adding the extra non semantic div. I might be wrong, but using the z-index property and negative margins would be a solution that you may want to consider in the future.



I am the anti-semantic DIV guy. I must be living in a vacuum but the whole semantic DIV thing really bothers me and doesn't make much sense to me when most web sites are in a dynamic environment. We're not making static sites anymore, so calling your DIV "comment-purple-right-sidebar" or whatever just doesn't cut it in a content management system where anyone can easily make your purple right sidebar comment into a yellow left sidebar DIV containing feedback.

Everyone seems to be proposing that it's incorrect to give a DIV a class of something generic like "type1" -- which makes much more sense to me, especially in a dynamic environment where we can change the look and purpose of that DIV across the site.

I meant to write a whole post about this but haven't gotten to it yet. It also feels like I'm alone in a sea of "you're not using semantic DIV" gurus so I didn't yet feel like going out on that limb. but here I am. I'm out of the semantic closet.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <h2> <br> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.

We were looking for excellent HTML skills and found them with John. If you need your HTML to look just like the mockup, he's the guy for the job.

Jason T., Lead Developer The Intelligent Investor
Copyright ©2001-2018 Way Cool Web Design LLC. All Rights Reserved.