Category Archives: Resources

How to Use CSS Sprites With Son of Suckerfish Drop Downs

Jun
22

32 Comments - LEAVE A COMMENT

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.

Create Full Width Header & Footer With Centered Content Using CSS

Jun
7

21 Comments - LEAVE A COMMENT

Update #2 1/15/2012 – I have update this version once again, please see the latest release of 100% Full Width Header & Footer with Centered Content.

Update!: I’ve published a new version of this method that is even EASIER. If you would like to learn more please see How to: Create Full (100%) Width Header/Footer with Centered Content (Updated). This method is still valid and feel free to use it if you like.

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:

Photoshop Essentials – Thousands of Free Brushes, Gradients, Layer Styles and More!

Jun
1

15 Comments - LEAVE A COMMENT

Photoshop is an amazingly powerful tool. It alone can allow you to create fantastic designs and photo manipulations. But, there are many, many other resources available to designers to enhance Photoshop and increase your productivity.

I’m talking about free gradients, patterns, brushes, layer styles and more that you can download and add on to Photoshop.

CSS Sprites – Easily Use CSS To Replace Images

May
28

23 Comments - LEAVE A COMMENT

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.

Using IE Conditionals For Cross Browser Compatibility

May
27

2 Comments - LEAVE A COMMENT

What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.

IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)