nrkn CSS Tutorials and Examples

nrkn CSS Tutorials

• CSS Image Slicing Tutorial

Examples

The following have little or no explanation and are generally just single pages demonstrating or testing one thing.

CSS Horizontal Navigation

• Fluid, centered horizontal navigation with sliced image backgrounds and with rollovers. Tabbed navigation that grows and shrinks to fit the text size.
• Centered horizontal navigation using images of text, with rollovers. Sometimes you just want to use images of text, this is otherwise similar to the above example.
• Centered horizontal navigation, text-only.
• Example of how easy the first CSS navigation example is using CSS3 multiple backgrounds. Note, at the moment, AFAIK, only Safari and Konquerer support this.

Miscellaneous

• Skinning elements. Techniques for applying a "skin" to an element, for example to get round corners, drop shadows and other effects that rely on images
• Fluid layout with tiling background. Making a container's size a multiple of a background image's size so that background tiles fit together properly. If it's unclear what I'm talking about, have a look at the page and all should become clear
• 3 column layout with fluid/liquid central column, rounded boxes, alpha transparency. Some techniques for 3 column layouts. Note: I have never bothered hacking this to work in IE 6, it is however possible using the AlphaImageLoader hack.
• Static background images using available space on fluid pages This page is intended to show some techniques for dealing with helping images that are smaller than the width of the page to use the remaining available space.
• Custom Checkbox. Use two images, one for checked and one for unchecked, as an ordinary form checkbox input element. Degrades gracefully.

Drop Shadows

• Photo shadow. Adding a drop shadow to a photo of known size, with alpha transparency to allow the background to show through.
• Photo shadow of arbitrary size. Adding a drop shadow to a photo (or any other element) of unknown size, with alpha transparency to allow the background to show through. Note: the technique I use here is an old and fairly clunky way of doing it. The CSS image slicing tutorial will teach you better techniques to do the same thing.