Month: August 2010

CSS Counters: counter-increment and Friends

The CSS2.1 spec introduced a new technique allowing developers to combine three CSS properties and a pseudo-element to create auto-incrementing counters – similar to what is displayed in an ordered list. While counters for lists are limited to <ol> or <ul> elements and only with simple incrementation, the new counter method introduced in CSS2.1 allows […]
csshead 0 Comments

CSS3 Playground

A handy online tool for playing around and experimenting with CSS3…
csshead 0 Comments

CSS Media Query for Mobile is Fool’s Gold

Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false promise of a simple solution for designing to multiple screens…
csshead 0 Comments

CSS3 Border-Radius & Rounded Avatars

Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to […]
csshead 0 Comments

Start Experimenting With CSS3 Keyframe Animations

CSS3 animations are the new kid on the block. It’s a big step. Although they haven’t really taken centre stage yet as only the webkit browsers support them. For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from […]
csshead 0 Comments