CSS-Tricks*

A Web Design Community curated by Chris Coyier

Latest Articles

Comma Separated WebKit Animation Keyframes

3/22/2011
3 Comments

Another little thing I learned from Estelle at the SXSW 2011 CSS3: Beyond The Basics panel was that you can comma separate the keyframe values in a WebKit animation declaration. Let’s say you wanted to create a pulsing effect as an animation. One way to do that would be to have an animation which changes the opacity on 0% and 100% and then set the iteration-count to have it run a couple of times. But you can accomplish the…

Read on! →

Crivestivus

3/19/2011
7 Comments

This has almost nothing to do with web design, but I want to help promote an event going on in Northern Wisconsin put on by some friends of mine: Crivestivus.

They used to hold it just for friends and friends-of-friends, but this year it’s opening up to the public. It’s like a very casual three day camping party. Live music (my old Irish band is getting back together and playing), outdoor games like bocce and cornhole (one year…

Read on! →

currentColor

3/17/2011
17 Comments

CSS variables are always a hot topic when “the future of CSS” is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS variable feel to it, and that’s the currentColor value.

Read on! →

Latest Screencast

#94: Intro to Pseudo Elements

Pseudo elements are visible elements on a web page that aren't "in the DOM" or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo elements are CSS 2, so browser support for them is pretty good!

Links from Video:

Latest Snippets