Articles by

Chris Coyier

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

Infinite All-CSS Scrolling Slideshow

Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it’s really not that hard. …

(Updated on )

A

How I Think Posting HTML In Comments Should Work

People post a good bit of HTML in the comments of articles on this site. They are trying to demonstrate something, ask for troubleshooting help, show alternate techniques, etc. This is excellent. I want to encourage this as much as …

Add Data Attribute of User Agent

var b = document.documentElement;
b.className = b.className.replace('no-js', 'js');
b.setAttribute("data-useragent",  navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );

Which results in data attributes being added to the html element like:

<html 
	data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 
(Updated on )

Triangular List Bullets

ul {
  margin: 0.75em 0;
  padding: 0 1em;
  list-style: none;
}
li::before { 
  content: "";
  border-color: transparent #111;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.9em;
  position: relative;
}

That’s a …

(Updated on )

A Really Nice Way To Handle Popup Information

Showing additional info ("popup") when hovering over an element is a pretty easy thing to do. But there is a ton of subtle ways to improve that interaction. This articles goes over a really excellent technique for this covered by Doug Neiner at the Front End Design Conference 2011.
(Updated on )

Blogging. You can do better.

Direct Link

That’s my (solo) panel name for SXSW Interactive 2011. I’ll love you forever if you upvote it to increase my chances of getting to do it this year. It was denied city last year. I haven’t talked much about blogging …