Articles by

Chris Coyier

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

@chriscoyier · chriscoyier.net

ID the Body Based on URL 

<?php
	$url = explode('/',$_SERVER['REQUEST_URI']);
	$dir = $url[1] ? $url[1] : 'home';
?>

<body id="<?php echo $dir ?>">

This would turn http://domain.tld/blog/home into “blog” (the second level of the URL structure). If at the root, it will return “home”.

Here is …

RGBa Browser Support

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

RGBa is a way to declare a color in CSS that includes alpha transparency support. …

(Updated on )

Flip an Image

You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.

.flip-horizontally {
  transform: scaleX(-1);
}

See how one arrow is used to point both directions here:…

(Updated on )

We Love LOST

Tonight is the next-to-last episode ever of LOST. I’ve been a fan since the start, watching the released seasons several times with different friends over the years. Even powering through the Season 3 slump =). Just for fun, Richard and …

Pointer Events & Disabling Current Page Links

It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the “current” page, …

(Updated on )

Bloginfo Shortcode

The bloginfo() function in WordPress gives you access to lots of useful information about your site. See the complete list. To access all these values from inside Page/Post content itself, we can make a shortcode to return the values. …

#85: Best Practices with Dynamic Content

One of the articles I updated during “May is Maintenance Month” was an article about dynamic content. The idea was a simple website where clicking a link would fade out the existing content and fade in new content that it …

(Updated on )

Circulate

I had the occasion come up recently where I needed to animate something in a circle. It never occurred to me until then that there wasn’t an obvious solution to this already with jQuery. So I figured out a way, …

(Updated on )

Reduced Test Cases

If you are having trouble with something while building a webpage, the most helpful thing you can possibly do is start building a reduced test case. “Trouble” could be anything: the CSS isn’t doing what you think it should, the …

(Updated on )