Articles by

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

@chriscoyier · chriscoyier.net

Semantic Animation

Animations are inherently visual. But can we give a similar experience to everyone by getting a bit more semantic?
(Updated on )

Keyframe Animation Syntax

Basic Declaration & Usage

@keyframes name-of-animation {
  0%    { opacity: 0; }
  20%   { opacity: 1; }
  80%   { opacity: 0; }
  100%  { opacity: 1; }
}

.animate-this-element {
  animation: name-of-animation 5s infinite;
}

You can use any number …

(Updated on )

Amazon Silk

Direct Link

Listen to the engineers behind Amazon’s new “Silk” web browser talk about how it uses the cloud to take the load off mobile devices.

Sounds like it does all the asset-requesting for you from the cloud, optimizes it, then sends …

Scalable and Modular Architecture for CSS

Direct Link

Jonathan Snook has released an “evolving guide to CSS architecture for sites small and large.” My favorite is the “Depth of Applicability” section:

Each rule set that we add to our style sheet creates an ever increasing connection between the

…

Button With Line Breaks

Your best bet is a <button> so you can use a <br> inside, like:

<button>
  Some
  <br>
  Text
</button>

If you need it to be an <input>, and thus the text has to be in a value, it …

(Updated on )

Transparent Inside Border 

<div class="inner-border">
    Transparent Inside Border
</div>
.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}
…

Better Linkable Tabs

Linking to specific tabs is often done with hash links. I think doing it with a URL parameter can accomplish the same goal without some of the problems that hash links can cause.
(Updated on )

In Praise of the Forums

Direct Link

Jane Wells of Automattic lays out four reasons why someone may not use forums for a question they have. Then she disputes all four of them while sharing an example of where a forum post get a lot more done …

Sencha Looks at IE 10

Direct Link

Michael Mullany:

…the IE10 HTML5 experience is one of the best we’ve seen on any platform to date.

I’ve heard from a number of folks that IE 10 will be the most advanced browser to date (support the most standards …

Radio Buttons with 2-Way Exclusivity

Let’s say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn’t a terrible way to go about this.…

(Updated on )