CSS Head

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…

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…

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…

DarkEye is a showcase of more than 6,000 website designs.

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…

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…

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…

For those not familiar, form buttons are notoriously difficult to customize because they render differently across browsers and platforms. A few methods for styling buttons are commonly used to make them appear dimensional, uniform, and consistent across browsers, however each has limitations.

Here’s a solution using image sprites and a single block of CSS. It works in in all major browsers including IE versions 6 through 8…

With a second style sheet and minor changes to a page’s HTML, many online stores can offer an excellent mobile shopping experience without creating a second web page or registering a mobile specific domain…

SlickMap CSS is a free simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences…