tupence - CSS Demos
Categories
CSS Basics
- Border Colors
Give borders a gradient with CSS - border-radius
Curved borders with no images - Box Shadow
Give elements a drop-shadow - Gradients
Apply a gradient to a background - nth-child Selector
Style odd, even or different numbered elements using the nth-child formula. - Text Shadow
Apply a shadow to text - Text Styling
Using only CSS
Text Styling
- Highlighted Text Colour
change the colour with CSS - Label Effect Headings
Get a Dymo label effect - Text Shadow
Apply shadows to text - Text Styling
Basic CSS text styling - Speech Bubbles
with only CSS
Images
- Image Polaroid Effect
Turn plain images into Polaroids - Image Swap
Use CSS to swap one with another on mouse hover - Image enlarge on mouse over
Show a larger image popup of a thumbnail on mouse over
Links & Anchors
- Tooltips for links
Give links a nice tooltip on hover (like this one) - Hiding skip navigation links
Allow people browsing without a mouse to skip straight over navigation and go to the content.
Navigation
- Button Styling
Creat navigation buttons with no images - Form Button Styling
Style form buttons with no images, just CSS - Slide Out Navigation Links
links slide out when hovered
Experimental
- Curled Banner
Use CSS to create a curled banner
Demos A to Z
- Border Colors
- Box Shadow
- Border Radius
- Curled Banner
- Form Button Styling
- Gradients
- Highlighted Text Colour
- Image enlarge on mouse over
- Image Polaroid Effect
- Image Swap
- Label Effect Headings
- Navigation - Buttons
- Navigation - Slide out
- nth-child
- Rounded Borders with border-radius
- Speech Bubbles
- Text Shadow
- Text Styling
- Tooltips for links
