Website owners can never have read too many cool tutorials on CSS and HTML to improve the look of their site, or simply to gather inspiration and technique from. This post contains 15 of our favorite css tutorials that can be used in your own projects, these tutorials will be beneficial to beginners as all give code snippets and explain the process used in detail.
Clean and pure CSS FORM design
this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.
Using CSS and Mootools to simulate Flash horizontal navigation effect
This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.
Two CSS vertical menu with show/hide effects
First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.
Nice animated menu using CSS and Mootools
This tutorial illustrates how to implement a nice animated menu using Mootools and some lines of CSS and HTML code ready to reuse in your project. This is the basic version with a basic design, but you can customize it how you prefer modifying the CSS related source code.
Pastel color menu with dynamic submenu using CSS
This tutorial illustrates how to design a nice pastel color menu with a dynamic submenu which appears when you select a link in the main menu, using CSS and some lines of javascript code.
Beautiful CSS buttons with icon set
This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.
FORM elements design using CSS and list (ul and dl)
This tutorial will show another way to design FORM using list elements. In any case, if you want to use pure CSS code instead of HTML table to design your FORM I think this is a good way to do it.
Nice CSS menu with feed reader icons list
This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons.
CSS Gradient Text Effect
Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.
CSS Speech Bubbles
Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict.Tested in all major browsers.
Creative Use of PNG Transparency in Web Design
With proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.
Styling File Inputs with CSS and the DOM
File inputs are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.
Rediscovering the Button Element
Hyperlink Cues with Favicons
I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic ‘external link’ icon, we showed that site’s favicon?
Digg-like navigation bar using CSS
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.
Popularity: 22% [?]
If you enjoyed this post, make sure you subscribe to our RSS feed!
This post was written by:
Lincoln - who has written 172 posts on Social CMS Buzz.
Owner of Social CMS Buzz and a fan of all things social and design related.
This is amazing stuff for any beginner blogger. I’m saving this in fav tutorials because I need too look at all the information you gave. I especially like the part “Beautiful CSS buttons with icon set”
Thanks for your work.