While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two overlapping background /videos/images to a single spot of text. When that text grows or shrinks, these overlapping /videos/images and reveal more of themselves creating the illusion it is a single expandable graphic. In this screencast we do a quickly example of how this can work for a button. [url=http://css-tricks.com/video-screencasts/17-sliding-doors-button/]See original article[/url]

Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements. Do you do it by section, like header, content, footer? Or do you do it by types of attributes like typography and layout? Being organized, hierarchical, and using CSS shorthand will go a long way in making you a better CSS coder. [url=http://css-tricks.com/video-screencasts/8-css-formatting/]See Original article[/url]

Firebug is an essential Firefox extension for web designers and developers. You are able to quickly target any element on a page to see the markup, the CSS, the layout, and the DOM in an instant. Not only can you see all of this juicy information, you can edit and see the results directly in the browser window. This makes Firebug the go-to tool for debugging CSS trouble. Also indispensable for Javascript programmers. [url=http://css-tricks.com/video-screencasts/15-introduction-to-firebug/]See original article[/url]

There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as some hybrid sites and other techniques for making use of wider browser windows. True “fixed width” sites will be a thing of the past when the modern browsers of today take hold in greater numbers. Opera 9, Firefox 3, and IE 8 all have “zoom” abilities, which make fixed width sites behave like elastic width sites. At the end of the screencast I show a very simple example of you you can get started with all three types. [url=http://css-tricks.com/video-screencasts/10-fixed-width-fluid-width-elastic-width/]See original article[/url]

Roll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning. [url=http://css-tricks.com/video-screencasts/82-css-image-switcher/]See original article here[/url]