CSS3 Demos and Experiments
Basics CSS3 Elements
- :before and :after
How these two pseudo elements can be useful in styling, with a few demos
Add curved corners to elements, or even create a circle from a list item - with no need for images.
Quickly add drop-shadows to elements, without having to use images
Add gradients to backgrounds with no need to create any images
An easy way to style individual elements in a different way to the rest of their group
Use CSS3 transform to rotate an element, with some demos of rotate being used
- Basic Text Styling
Use CSS to style text instead of creating images
Add shadows to text to create Photoshop style effects with no need for images
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 Popup
Show a full sized image when a thumbnail is hovered over.
- Image Swap
Swap one image with another when hovered
CSS only Lightbox effect
- 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.
Style tooltips for links and images (and anything else you need them for).
demos that don't fit in the other categories
- Folded Corner
Create a fold using :before and :after
- Frequently Asked Question Styling
Create slide down faqs
- Label Style Headings
Give headings a Dymo label style effect
- Speech & Thought Bubbles
Use only CSS to create speech and thought bubbles with no need for images
- Sticky Tape
use :before & :after to create a sticky tape effect