Articles by

Chris Coyier

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

Learning Canvas: Making a Snake Game

In this tutorial we'll learn the basics of the canvas element. How to draw to it, create loops which redraw it allowing animation, and in the end, wind up with a basic playable "Snake" game.
(Updated on )

Sprite Cow

Direct Link

Making a really good CSS sprite image usually isn’t trivial work. There are all kinds of tools to help with it. My favorite of them has been SpriteMe. I describe my typical workflow for using that here. Sprite …

#99: Overview of HTML5 Forms Types, Attributes, and Elements

HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it …

(Updated on )

Toggle Text

Let’s say you have a link to show more options which expands a list of options. It’s says “more options”. It’s easy to toggle those options with .toggle() or .slideToggle(), but the text remains the same. To toggle the …

(Updated on )

Display Image Next To Each Tag

<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL

// Check tagslug.png exists and display it
if ($posttags) {
 foreach($posttags as $tag) {
       $image = "/images/tag-images/$tag->slug.png";

       if (file_exists("images/tag-images/$tag->slug.png")) {
         echo '<a href="' . $home 

Calculate Distance Between Mouse and Element

(function() {
    
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, 
(Updated on )

Hexagon with Shadow

<div class="hexagon"><span></span></div>
.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
}

.hexagon, 
.hexagon:before, 
.hexagon:after {
  background: red;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);   
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  left: 22px;
  width: 57px;
  height: 57px;
  transform: rotate(145deg) skew(22.5deg);
}

(Updated on )

Diagonal Graph Paper Gradient

#example-gradient {
  height: 200px;
  margin: 0 0 20px 0;
  background-color: #eaeaea;
  background-size: 20px 20px;
  background-image:
     -webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 
(Updated on )

Screen Resolution ≠ Browser Window

The only statistic you get in most web analytics software is screen resolution. But there is a pretty good chance you just read this sentence in a browser that isn't open to the full size of your monitor. If you are looking at size analytics for you website, browser size is far more relevant. In this article we figure out how to get that data, and then look at some of the results gathered from css-tricks.com.
(Updated on )

Dropp

Direct Link

My buddies at Sense Labs just released a really cool iPhone app called Dropp. Allows you to leave location-based messages anywhere on Earth that people receive when they visit that location. Leave them privately for your friends, or publicly. Such …