William CraigCEO & Co-Founder
- 8 minute read
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
In this article, I’ve pieced together 30 excellent CSS techniques and design 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.
4. Lightbox Slides
Part of an article entitled “Supercharge your image borders” showcasing how you can use CSS styles to design images look more interesting.
An image effect demo and discussion based on a A List Apart article entitled, “CSS Drop shadows“.
7. CSS Photo Zoom
Uses a single image and adjustment of the
8. CSS gallery layout—smells like a table
Mimics a table layout, but uses lists. The gallery is also fluid width.
9. Sticky Footer
A static footer with very little XHTML required.
10. whatever: hover
An accordion effect using div’s and
:hover; the accordion effect can be vertical or horizontal.
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.
13. Pushbutton Links
links that are styled to look like buttons without using images.
14. Scrollable Table with Fixed Header
The table’s captions stay put, which is excellent for long tables.
When you hover over the image, the container div is shown with more text.
16. A CSS styled table version 2
A beautifully styled, table with semantic mark-up – uses a background image.
17. PNG Overlay
Another way to add flare to images (rounds the corners and adds a border and drop shadow) to make an even more effective image.
18. Showing Hyperlink Cues with CSS
Simple tutorial on adding icons to different types of links.
19. Simple Rounded Corner CSS Boxes
Uses only one image and very few lines of code and mark-up.
20. Sitemap Celebration
Tree-like navigation using nested lists, great for sitemap pages.
21. Easy cross-browser transparency
22. Curved corners 2
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.
26. A CSS-based Form Template
Showcases an accessible web form.
27. CSS Image Text Wrap
Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.
29. Pure CSS Pop-ups
A pop-up technique that works even in IE 5 Mac.
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
WebFX is a full-service marketing agency with 1000+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more