Grow your CSS skills. Land your dream job.

The Best of CSS-Tricks Tutorials: Ten Free Downloadable Examples!

Published by Chris Coyier

Welcome to CSS-Tricks! We've been busy trying to bring you tips, techniques, and tutorials about using Cascading Style Sheets. Along the way, we've written up a number of example pages showcasing various techniques. If you are new here, here is a look back at some of those examples:

Apple-Like CSS Menu
applelikecssmenu.jpg

How To Set Up Alternate Style Sheets
alternatestylesheets.jpg

Images in All Four Corners of a Webpage
imagesinfourcorners.jpg

Exploding CSS Menu
explodingcssmenu.jpg

Fade Out Bottom of a Webpage
fadeoutbottom.jpg

Expandable "Note" Box DIV
exapandablenotebox.jpg

Homebase, a Free CSS Template
homebasetemplate.jpg

Hang Tab
hangtabex.jpg

A Background for Embedded YouTube Videos
youtubebackground.jpg

Crazy Menu
crazymenuex.jpg

Comments

  1. Some of those are nice and handy while others are plain silly and pointless but it is a nice list

  2. Permalink to comment#

    Crazy Menu is a variant of the W3C Confetti Menu.

    I also made two variants, just for fun:

    outline variant

    border variant

    Nice work on the downloadables.

  3. Permalink to comment#

    Yes, indeed it is a variant of the confetti menu. Your examples are much nicer =), but they lack that “stretchyness” that was a part of the original.

  4. Permalink to comment#

    Yes, I did not do the overflow for some reason. Letter-spacing on :hover might be a nice trick to expand them. Anyway, good post. I like the note box thingie. Very attractive.

  5. Excellent.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".