CSS-Tricks PSD to HTML

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

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


Theoretically Related Articles:

Discussion Elsewhere


Responses


  1. 1

    Gravatar

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


    Comment by Jermayn Parker — September 17, 2007 @ 9:18 pm

  2. 2

    Gravatar

    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.


    Comment by craig — September 18, 2007 @ 12:30 pm

  3. 3

    Gravatar

    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.


    Comment by chriscoyier — September 18, 2007 @ 12:40 pm

  4. 4

    Gravatar

    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.


    Comment by craig — September 18, 2007 @ 12:50 pm

  5. 5

    Gravatar

    Excellent.


    Comment by kerberoS — October 3, 2007 @ 11:38 am


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

Live Comment Preview


Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.