nopeople.com logo

CSS tips and snippets

v.2.0 - 2013

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
CSS only equal height columns
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
Frequently Asked Questions layout
» 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 using positioning
a disjointed rollover using background images
image captions made easy
scrolling boxes, both vertical and horizontal
» menus

basics

divided menus

page indicator menus

tabbed menus

dropdown menus

centering menus

mega 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
CSS3 fieldset/legend
» rounded corners
rounded corners with images
3 boxes with rounded corners - CSS only, no images
» tips and tricks
clearing floats
tooltips
uncolapsing margin
using vertical-align with text
Special Characters
page anchors made easy
getting normal text and opacity to work together
{position: fixed;}
horizontal lines
vertically centering stuff
force a vertical scrollbar
Valid CSS! Valid HTML 5