cssvault - inspiring creativity

Firebug is the definitive Swiss army knife of any web developer. This screen cast by CSS Tricks serves as an introduction to using Firebug. Check it out!

CSS Globe has come up with a list of Do’s and Dont’s of CSS. This series’ part 1 covers the Do’s and Dont’s of CSS Selection, summed up as:

Summary

Do

• When choosing use class names, use class names that describe content’s meaning or purpose, not it’s appearance.
• Use few class names and use them on various elements.
• Use type selectors to (re)set default styling. If you wish, use proper reset techniques (mentioned above).
• Use multiple class names on single element to optimize your css.
• Use combined selectors and precisely target your element

Don’t

• Don’t use descriptive class names like "red", "blueDot" etc.
• Don’t use complicated class names or id’s like "sideIntroSecondaryContentTop". Use descendant selectors instead.
• Don’t use universal selector for resetting entire document.
• Don’t use browser dependent selectors.
• Don’t add unnecessary class names.

Check out the full article.

Probably one of the toughest hills to climb for every CSS beginner is positioning, and this article introduces positioning in 10 very easy to understand slides, with an accompanying screen shot of each technique. Check it out at http://www.barelyfitz.com/screencast/html-training/css/positioning/

I’ve seen at least three submissions over here at CSS Vault of sites that use the “Step Carousel” effect. I did not even know what it was called until I saw this article, which outlines the steps needed to accomplish the effect using the jQuery library.

The result looks very nice and the animation is very smooth. The only issue is that this tutorial takes so many steps and makes use of inline JavaScript, though I suppose they can easily be converted to DOM-based JQuery statements, separating the presentation layer from the backend.

Stumbled into this article which presents alternative Mootools code for styling scrollbars.

Personally though I prefer jScrollPane, but that’s because I’m a JQuery user.

Comprehensive tutorial that covers just about everything you need to know about floated CSS elements.

I have been contemplating on writing a similar tutorial, but web designer wall beat me to it. It’s a very well written article, so be sure to check it out. You can also check out the demo here.

If you’ve ever wondered how a thing of beauty like the Crazy Egg signup page is done, check out Ask The CSS Guy’s tutorial and go crazy with CSS and Javascript effects!

Image mouse-overs and menus are two of the most important and basic techniques that any CSS developer needs to master. This nice little article on CSS-based navigation is a must read for any CSS beginner.

CSS Globe links to an article from a Russian blog listing 15 uncommon CSS properties with links to detailed articles.

Link