Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos and Experiments

CSS3 is making life easier and quicker for web designers and coders. Many tasks that used to require images or javascript can now be achieved with CSS. Here I've explained some of the most useful elements and included a selection of demos to show the usefulness and power of CSS3. I'll be adding more demos so keep checking back.

Basics CSS3 Elements

  • :before and :after
    How these two pseudo elements can be useful in styling, 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 to create any 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, with some demos of rotate being used

Text Styling

  • Basic Text Styling
    Use CSS to style text instead of creating images
  • text-shadow
    Add shadows to text to create Photoshop style effects with no need for images

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 Popup
    Show a full sized image when a thumbnail is hovered over.
  • Image Swap
    Swap one image with another when hovered
  • Lightbox
    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.
  • 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