CSS tips and snippets
Feel free to grab and use anything you see here. Just click on the Markup or CSS links in the header to show the code, then copy/paste the code into a new .html document to test locally.
- layouts
- a fluid width, with min/max, equal height 2-column layout
- my faux columns demo
- full height layout with header/footer - works with or without content
- simple 2-column with header and footer
- this is as simple as a 3 column layout can get
- drop shadow around container
- 3 equal width divs
- 4 equal width divs
- lists
- three column ul
- li images/bullets
- two column dl
- dl with images and captions
- dl with included ul
- backgrounds
- fixed background
- background image resize
- photo presentation
- fluid, centers thumbs - I've been perfecting this one for a long time
- a simple disjointed rollover
- image captions made easy
- scrolling boxes, both vertical and horizontal
- menus
- basic ul menu
- horizontal navbar, in a ul, no images
- horizontal menu with dividers between the buttons
- horizontal ul navbar NO images - with breadcrumb
- CSS rollover
- horizontal ul navbar using images - with breadcrumb
- horizontal ul navbar done with a single image - with breadcrumb
- tabs made with the sliding door method
- tabs made using CSS rollovers
- CSS only dropdown menu - no js
- similar CSS only dropdown menu with dropped links horizontal
- 1 more super simple CSS only dropdown menu
- CSS only MegaMenu
-
centered menus
- .js stuff
- jQuery equal height column layout
- hidden slider panel for menu
- a cool js div switcher
- links
- styling links
- HTML5 and CSS3 stuff
- Getting HTML5 up and running
- CSS3 stuff
- HTML5 CSS3 layout
- the new HTML5 menu tag
- jQuery/HTML5 equal columns
- transparent menu buttons
- tips
- clearing floats
- tooltips
- uncolapsing margin
- using vertical-align with text
- Special Characters
- IE8 empty anchor bug
- page anchors made easy
- tricks
- getting normal text and opacity to work together
- position fixed in IE6
- horizontal lines
- vertically centering stuff
- no wrap
- force a vertical scrollbar
- fluid resizing boxes
- rounded corners with images
- 3 boxes with rounded corners - CSS only, no images
