cssgirl... web and blog design

Archive for the ‘CSS’ Category

9
Aug

IE6 PNG Fixes – SuperSleight & Unit PNG Fix

Unit Interactive’s Unit PNG Fix A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.

seperator
22
Jun

How to Use CSS Sprites With Son of Suckerfish Drop Downs

So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.

I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.

seperator
7
Jun

Create Full Width Header & Footer With Centered Content Using CSS

There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.

So the simple way to do this is as follows:

seperator
28
May

CSS Sprites – Easily Use CSS To Replace Images

If you’re not using CSS Sprites (also known as the CSS Image Replacement Method) you should be. Many coders seem to fear this easy and basic way to use images with CSS and I’m not sure why.

The benefits of CSS Sprites are plentiful, but you (and your visitors) will benefit from this method ten-fold. For the coder it’s less slicing and cropping of images, and for the user it rids us of that annoying image loading flash when you use CSS to replace background images.

I’ll take you through some quick steps to get started with CSS Sprites.

seperator
20
May

Give Images Polaroid Style Treatmeant

I’m a big fan of polaroid’s. I love the fact that you can snap a photo and the camera will spit out a photo for you instantly. I love the style so much in the new version of CSSgirl (to be released within the next two weeks!!!) has incorporated their style in the new design. I thought I’d share how I went about creating the image and the HTML/CSS behind it!

seperator