Latest Updates
19 April 2013
Form Styling - use CSS to style form input fields
CSS3 Demos
Basics
- :before and :after
How to use these two pseudo elements, with a few demos
- border-radius
Add curved corners to elements, or even create a circle from a list item - with no need for images.
- box-shadow
Quickly add drop-shadows to elements, without having to use images
- Gradients
Add gradients to backgrounds with no need for images
- nth-child
An easy way to style individual elements in a different way to the rest of their group
- transform:rotate
Use CSS3 transform to rotate an element
Text Styling
Image Styling
- Caption
use :before & :after to add a caption to an image
- CSS Gallery
large image appears either to the right, left, above or below the thumbnails when a thumbnail is hovered.
- Image Hover Effects
Make images move when they're hovered or in focus.
- Image Popup
Show a full sized image when a thumbnail is hovered over.
- Polaroid Effect
Give plains images a Polaroid effect using CSS3
Buttons & Forms
Links & Navigation
- Navigation Buttons
Create navigation buttons from an unordered list, with no need for images.
- Tooltips
Style tooltips for links and images (and anything else you need them for).
Random Playing
demos that don't fit in the other categories
Free HTML5 Templates
Slate Grey Template
A dark, multiple column fixed width HTML5 & CSS3 template
Simple White Template
A clean, simple looking, multi column, fixed width HTML5 & CSS3 template
Shiny Blue Template
A clean, fixed width, two column HTML5 & CSS3 template.
Purple Texture Template
A two column HTML5 & CSS3 template that uses textured backgrounds and plain white content areas.
Dark Reflection Template
A two column HTML5 & CSS3 template that uses black with shades of grey and transparency to define the sections of the page
Poster Template
A single column CSS3 & HTML5 template, with a paper background and old style fonts in the headings to give an old poster effect.
Block Colour Template
A clean gallery that utilises CSS3 to create a Polaroid effect on plain images. The template uses a pale background and one strong colour for highlighting headings and links.
Bubbles Template
Bubbles is a two column, fixed width HTML5 & CSS3 template, that uses light text on a dark background.
