30 Exceptional CSS Techniques and Examples


In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more - all using only CSS and HTML.


Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.


1. Hoverbox Image Gallery


A pure css-based gallery; hovering over an image enlarges it.


Hoverbox Image Gallery



2. Advanced CSS Menu


A creative and complex navigation scheme.


Advanced CSS Menu


3. Sliding Photograph Galleries


An accordion effect; hovering over an image expands it.


Stu Nicholls: CSSplay- Sliding Photograph Galleries


4. Lightbox Slides


Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting.


Bite Size Standards - Supercharge your image borders


5. Drop shadow on an image


Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".


Drop shadow on an image


6. Cross Browser Multi-Page Photograph Gallery


Hovering over the tabs changes the category, while hovering over an image enlarges it.


Stu Nicholls: CSSplay - Cross Browser Multi Page Photograph Gallery


7. CSS Photo Zoom


Uses a single image and adjustment of the background-position attribute.


SimpleBits - CSS Photo Zoom


8. CSS gallery layout—smells like a table


Mimics a table layout, but uses lists. The gallery is also fluid width.


Dnevnik eklektika - CSS gallery layout—smells like a table


9. Sticky Footer


A static footer with very little XHTML required.


Sticky Footer


10. whatever: hover


A navigation menu that mimics Window’s Start menu.


Peterned - whatever: hover


11. CSS-Only Accordion Effect


An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.


The CSS-Only Accordion Effect - CSSnewbie


12. Scalable CSS Buttons Using PNG and Background Colors


A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.


Scalable CSS Buttons Using PNG and Background Colors - David’s kitchen


13. Pushbutton Links


links that are styled to look like buttons without using images.


MikeCherim.com - Pushbutton Links


14. Scrollable Table with Fixed Header


The table’s captions stay put which is excellent for long tables.


Scrollable Table with Fixed Header


15. Content Overlay with CSS


When you hover over the image, the container div is shown with more text.


Snook.ca -  Content Overlay with CSS


16. A CSS styled table version 2


A beautifully styled, table with semantic mark-up - uses a background image.


A CSS styled table version 2


17. PNG Overlay


Another way to add flare to images (rounds the corners and adds a border and drop shadow).


PNG Overlay


18. Showing Hyperlink Cues with CSS


Simple tutorial on adding icons to different types of links.


Ask the CSS Guy - Showing Hyperlink Cues with CSS


19. Simple Rounded Corner CSS Boxes


Uses only one image and very few lines of code and mark-up.


MODx Content Management System - Simple Rounded Corner CSS Boxes


20. Sitemap Celebration


Tree-like navigation using nested lists, great for sitemap pages.


Zab Design - Sitemap Celebration


21. Easy cross-browser transparency


Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).


Bite Size Standards - Easy cross-browser transparency


 


22. Curved corners 2


Fluid width and height divs with rounded corners.


HTML Dog - Curved corners 2


23. Creating a graph using percentage background images


List items

  • styled into bar graphs.


    Creating a Graph using Percentage Background


    24. CSS Bar Graphs: Examples


    3 bar graph examples - "Basic CSS Bar Graph", "Complex CSS Bar Graph", and "Vertical CSS Bar Graph" using div’s and definition list tags.


    CSS Bar Graphs: Example


    25. Animated Rollover Arrow


    The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.


    Animated Rollover Arrow


    26. A CSS-based Form Template


    Showcases an accessible web form.


    Nidahas - Forms markup and CSS - Revisite


    27. CSS Image Text Wrap


    Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.


    CSS Image Text Wrap


    28. Before your very eyes - a fade-in image


    A demo using opacity and a single image that gradually fades in to cover the text.


    CSS Play - Before your very eyes - a fade-in image


    29. Pure CSS Pop-ups


    A pop-up technique that works even in IE 5 Mac.



    30. CSS Gradient Text Effect


    Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.