Grains of Sand - CSS Demos @ tupence Web Design

CSS Demos

Latest Demos

4 May 2012 - Create drop down navigation with CSS and no need for javascript

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

Label Style Headings
Give headings a Dymo label style effect
Text Styling
Use CSS to style text instead of creating images
text-shadow
Add shadows to text to create Photoshop style effects

Image Sytyling

Caption
use :before & :after to add a caption to an image
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

Button Styling
Use CSS3 to style form buttons

Links & Navigation

Navigation Buttons
Create navigation buttons from an unordered list, with no need for images.

Random Playing
demos that don't fit in the other categories

Folded Corner
Create a fold using :before and :after
Sticky Tape
use :before & :after to create a sticky tape effect

Designed by tupence © 2012

IE6 and earlier may not display as intended, but the site will still work.