CSS, JavaScript & JQuery examples

Navigation

Text links

Simple text links
Mimicing vertical buttons
Mimicing horizontal buttons

Image links

Simple image rollover link
Multi-state links employing a single background image and an unordered list
An navigation bar that uses a single background image to create individual states for each link

Drop down / fly out menus

Pure CSS drop-down menu - recommended method
Show / hide element - good for maximising space etc

Other (old) methods

Using JavaScript & CSS to create a simple drop down menu
Using the display property/value to create a dropdown/flyout menu
Using the visibility property/value to create a dropdown/flyout menu

Styling text

Re-defining text tags
Superscript and Subscript
Text shadows

Over riding minimum text sizes on mobile

Add this selector to your stylesheet ..

div, p, a, li, td { -webkit-text-size-adjust:none; }

Styling tables

Re-defining table tags

Backgrounds

CSS3 Gradient backgrounds

Rounded corners

CSS3 - Creating flexible boxes with rounded corners

Other (old) methods

CSS1 & 2 - Creating flexible boxes with rounded corners

Drop shadows

CSS3 - Creating a drop shadow effect for a "box" element

Other (old) methods

CSS1 & 2 - Creating a drop shadow effect for a "box" element

Opacity

Controlling image opacity
Controlling layer opacity

Images stuff

Formatting images
Controlling image visibility with CSS
Controlling image opacity
Adding multiple background images to a style
Annotating images

Image galleries & slideshows

Image sideshow 1 (with manual controls)
Image sideshow 2 (automatic & manual controls)
Image sildeshow 3 (simple and automatic)
Lightbox 2 - for images
iFrame image gallery
JavaScript / CSS Rollover thumbnail image gallery