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
- 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
- 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
