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
Using JavaScript & CSS tocreate 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
Show / hide element (good for navigation etc)
Styling text
Re-defining text tags
Superscript and Subscript
Text shadows
Styling tables
Backgrounds
Rounded corners
CSS1 & 2 - Creating flexible boxes with rounded corners
CSS3 - Creating flexible boxes with rounded corners
Drop shadows
CSS1 & 2 - Creating a drop shadow effect for a "box" element
CSS3 - 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
Transformations
Scale, skew, move, rotate, fade-in/out, expand
Simple animation
"Animations"
Scrolling parallax effect
Simple animation
Visibility / show & hide
Controlling layer visibility with CSS
Controlling image visibility with CSS
Controlling layer visibility with JavaScript
Using JavaScript & CSS to create a simple drop down menu
Toggle layer visibility with JavaScript
Layering with Flash movies
Using the display property/value to create a dropdown/flyout menu
Using the visibility property/value to create a dropdown/flyout menu
Show / hide element (good for navigation etc)
Simple interface examples
Steel interface
Simple 3 page CSS site
Layout & positioning
Layers
Layer positioning
Centering a site in a browser window
Fixed position sidebar with centered content
Ensuring a container (parent) box expands as floating content is added to it
Horizontal scrolling with fixed sidebar and nav
Footers
Positioning a footer that moves downwards as content is added to the page
Float & Clear
Creating columns
3 fixed columns centered in a browser window
2 floating columns
Ensuring a container (parent) box expands as floating content is added to it.
Boxouts
Simple boxout
Multiple boxouts
Flexible layout
A layout that is centered in a browser and that expands when content is added to any div tag
Find us