This article compiles 30 top CSS techniques and design examples, highlighting the versatility and robustness of CSS. The showcased techniques encompass a range of applications such as image galleries, drop shadows, scalable buttons, menus, and more, all achieved through CSS and HTML alone. Clicking on the titles will lead you to the respective documentation/tutorials, while clicking on the accompanying images will direct you to the demo pages where available.
1. Hoverbox Image Gallery – A CSS-based gallery where hovering over an image enlarges it.
2. Advanced CSS Menu – A creative and complex navigation scheme.
3. Sliding Photograph Galleries – An accordion effect where hovering over an image expands it.
4. Lightbox Slides – Part of an article demonstrating how CSS styles can enhance image presentation.
5. Drop shadow on an image – A demo and discussion based on an A List Apart article.
6. Cross Browser Multi-Page Photograph Gallery – Hovering over tabs changes categories and images can be enlarged on hover.
7. CSS Photo Zoom – Utilizes a single image and adjusts the attribute for zooming.
8. CSS gallery layout—smells like a table – Mimics a table layout using lists and has a fluid width.
9. Sticky Footer – A static footer requiring minimal XHTML.
10. whatever: hover – A navigation menu resembling Windows Start menu.
11. CSS-Only Accordion Effect – An accordion effect using divs and can be vertical or horizontal.
12. Scalable CSS Buttons Using PNG and Background Colors – A technique addressing vertical scaling and the use of multiple images.
13. Pushbutton Links – Links styled like buttons without using images.
14. Scrollable Table with Fixed Header – Captions stay put for long tables.
15. Content Overlay with CSS – Shows more text when hovering over an image.
16. A CSS styled table version 2 – A beautifully styled table with semantic markup and a background image.
17. PNG Overlay – Adds flair to images with rounded corners, border, and drop shadow.
18. Showing Hyperlink Cues with CSS – A tutorial on adding icons to different types of links.
19. Simple Rounded Corner CSS Boxes – Uses one image and minimal code for rounded corners.
20. Sitemap Celebration – Tree-like navigation using nested lists, ideal for sitemap pages.
21. Easy cross-browser transparency – Opacity technique without JavaScript, but with non-valid XHTML code.
22. Curved corners 2 – Fluid width and height divs with rounded corners.
23. Creating a graph using percentage background images – List items styled into bar graphs.
24. CSS Bar Graphs: Examples – Three bar graph examples using divs and definition list tags.
25. Animated Rollover Arrow – An arrow smoothly follows the navigation bar without JavaScript or animated gifs.
26. A CSS-based Form Template – Showcases an accessible web form.
27. CSS Image Text Wrap – Uses empty spacer divs to mimic a wrapping effect around the background image.
28. Before your very eyes – a fade-in image – A demo using opacity and a single image for a fade-in effect.
29. Pure CSS Pop-ups – A pop-up technique compatible with IE 5 Mac.
30. CSS Gradient Text Effect – Creates a gradient effect on text using background image overlays, empty span tags, and attributes.
