There’s a lot of really cool things that can be done using CSS and I’ve found some of the following resources to be very helpful to inspire ideas and learn new techniques. There’s a lot of good CSS tutorials out there so it’s pretty hard to narrow it down to only the 10 best. So instead of taking this list as the top 10 consider it as a collection of 10 great tutorials. I recommend having a good working knowledge of CSS/HTML before trying any of these on your own site.
continue with the tutorials
1. Hoverbox Image Gallery - This is a very nice roll-over photo gallery that uses nothing but CSS, that’s right, no JavaScript. There is definitely a need for better photo galleries and it’s very simple to add a image gallery like this one. It’s also looks very nice, better than 99% of the image galleries out there. View the example.
2. CSS Bar Graphs - A very simple and great tutorial for creating both vertical and horizontal bar graphs. View the examples.
3. CSS Vertical Menus - Here’s bunch of very nice vertical menus that can be used any way you see fit. These are actually free menus that are available for download, awesome. Learn more.
4. Listamatic - This isn’t just one tutorial, there is actually hundreds of them. All for building lists in CSS. Any kind of list you can image there’s a tutorial for it here. This is a very awesome resource that has helped me a number of times.
5. Floatutorial - Like #4 this is a whole bunch of tutorials rolled into one page. Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. Anything you can imagine using floating elements for is covered here.
6. Rounded Corners - There are tons of ways to make rounded corners with CSS. What I like about this particular tool is that it’s done without the use of images or JavaScript. Why not just use images? So you can cut down and bandwidth and load time. This is a tool, not a tutorial. All you do is enter in the colors you want and the class name and it generates the code for you. Very nice.
7. 40 CSS Layouts - Here’s another one that isn’t a tutorial. It’s a collection of 40 valid CSS based layouts without using hacks or workarounds. Instead of just downloading a layout from here I would recommend looking at the code and figuring it out from there. Sure it’s a little harder but just remember the old saying about teaching a man to fish.
8. CSS Photo Gallery - Here’s another great tutorial for building very beautiful image galleries. This one is a little different though, it’s a multi page image gallery. Like the one above this one is done with pure CSS, no JavaScript. It validates and the author claims it works in IE, I haven’t verified that but I see no reason to believe otherwise.
9. CSS Drop Shadows - This is a great tutorial that will show you how to add a drop shadow effect to your images using CSS.
10. Style Sheet Switcher - Have you ever wondered how some websites offer you different choices so you can select a theme? Wonder no more. Follow this simple tutorial and you can offer your users control over the look of your website. You can break it down into individual preferences for fonts, colors, layout or orientation.
What are some of your favorite CSS tutorials?
CSS, Web Design, Tutorials
