15+ techniques and tools for cross browser CSS coding

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Different Ways To Format CSS

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How to stop images breaking rounded corners in Safari

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Create letterpress type using only CSS

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Degradable PNG Transparency for IE6

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Pure CSS Timeline

I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline…

VN:F [1.9.22_1171]
Rating: -2 (from 2 votes)