CSS Demos
home
This is a set of assorted CSS / XHTML tricks and conceptual demos, mostly cribbed from design cognoscenti across the Web in my attempts to teach myself CSS and apply it.
I often add to, mess with, adjust and improve these files - check back every so often to see the latest updates. Certain of the effects in these pages won't display correctly in Internet Explorer (surprise, surprise) - they'll look best in Firefox, Opera or Mozilla. Here I add my voice to the multitude asking you to upgrade your browser, if this is the case for you.
These pages are valid XHMTL 1.0 Strict, but in most cases the CSS will not validate. This is because, in each case, the hacks required to get Internet Explorer to behave make valid CSS impossible. Bah.
- Curved Corners v2 - divs with curves!(New and Improved!)
- Scroller - fixed position for background images
- CSS Frames - 'frames' via position:fixed
- 'Sliding Doors' - resizeable tabbed navigation
- Bevelled Buttons - simple buttons that look 3d
- Drop Shadows - drop shadows on images and divs
- Generated Content - CSS3 generated content
- :first Pseudoclasses - :firstline and :firstletter selectors
- :hover Pseudoclass - :hover on non-list elements
- Zoom - resizing a whole section at once
- Pop-Out Menus - Horizontal multi-level menus