Elastic is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code. This way you don’t have to remember cryptic class names, just express what you want…
Direct link: Elastic CSS Framework
Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coding life easier, here are over 15 tools and techniques for cross-browser CSS development…
Direct link: 15+ techniques and tools for cross browser CSS coding
Formatting has nothing whatsoever to do with how the CSS functions. But that’s not to say formatting isn’t important. That would be like saying the choice of canvas isn’t important to a painter. It affects how it feels to write CSS, how easy it is to read, how easy it is to navigate, and how easy it is to revisit and reacquaint yourself with previously written CSS…
Direct link: Different Ways To Format CSS
Here is a presentation on the CSS cascade. A simple step-by-step tutorial on the CSS cascade – for web designers and developers who are new to CSS or have struggled with the Cascade…
Direct link: CSS cascade – a simple step-by-step presentation
Currently when you place an image or any ‘replaced content’ inside a block with rounded corners set by -webkit-border-radius, the image pokes through the rounded corners on Safari version 4.01 at the time of writing.
The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by applying overflow:hidden to the container but…
Direct link: How to stop images breaking rounded corners in Safari
A simple, but comprehensive step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Well worth a read…
Direct link: Comprehensive Guide to CSS Line Height
The letterpress effect is one of the 2009 trends and is present in a lot of websites. It simply works because it adds a touch of “tactile” to the overall design and at the same time looks good with gradients, shadows, etc. Let’s see a quick way to add this effect to our sites using only CSS…
Direct link: Create letterpress type using only CSS
A useful article that explains how to get away from using tables for layout. A simple 3 step plan to help cure your bad HTML and CSS habits…
Direct link: CSS Rehab – 3 Step Program To Getting Clean
All (sane) web developers are eagerly awaiting the day Internet Explorer 6 dies. While there are a number of opinions in the community on when we should drop support and how we should encourage users to upgrade, the (sad) fact is that (as of this writing) roughly 25% of the world is still using it. That being said, I am still going to be at a minimum, creating sites that degrade gracefully and function fully for IE6 for some time to come. OK now what were we talking about?
IE6 does not support transparent PNGs correctly. Not only does it not support them, but in most cases it will turn all the transparent and semi-transparent pixels to an ugly blue/gray color that can really muck up a web page. Here’s a solution that doesn’t require hacks…
Direct link: Degradable PNG Transparency for IE6