Skip to main content

Chris Coyier

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

Snippet

English Time to Seconds

Just type in the time you want converted to seconds in english (e.g. "1 hour and 30 minutes") and it will be converted to an integer of seconds (e.g. 5400). Thanks to Baylor Rae.

function time2seconds($time) {

 preg_match_all('/(\d+ [a-z]+)/', $time, $matches);
 
 $matches = $matches[0];

 $formats = array();

 foreach ($matches as $format) {
   preg_match('/(\d+)\s?([a-z]+)/', $format, $f);
   $time = $f[1];
   $type = $f[2];
   $formats[$type] = $time;
 }

 $output = array(
     'years' => 0,
     'months' => 0,
     'days' => 0,
     'hours' => 0,
     
Read article
Article

Show Markup in CSS Comments

Let's say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a comment at the top of your CSS file. For example, a sidebar.css file might look like:… Read article

Article

Design v7

I rolled out a new design this weekend! As usual it's a bit of an aesthetic overhaul (blue!). I'm going to cover the why, the new aspects, and some of the new technology involved. RSS readers, you'll have to make the jump and look around =).

And now, a note about critiquing: I love critiques! If you want to rip this design to shreds, please do so. I have my bachelors in Art and part of that was getting … Read article

Design History

v17

v16

v15

v14

v13

v12

v11

v10

v9.2

v9

v8

v7

v6

v5

v4

v3

v2

v1

There was a v1 version, but unfortunately I'm not able to dig up any actual images of it. It had dark grey diagonal stripes background. The logo did have a star in it, but it wasn't Courier Bold. It was part of a "network" of other help sites, mainly based around Adobe software.… Read article

Link

BetterSource for Safari 5

Article

iPhone “slide to unlock” Text in WebKit/CSS3

There are a couple of WebKit specific properties that make giving text a gradient background possible:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin', if we made a made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, we could make the iPhone/iPad's "slide to unlock" screen with no images at all!

WebKit only demo:

View Read article

Snippet

Multiple Borders

Using pseudo element(s)

You can position a pseudo element such that it's either behind the element, and larger, making a border effect with it's own background, or smaller and inside (but make sure the content gets positioned on top).

The element needing multiple borders should have its own border and relative positioning.

.borders {
  position: relative;
  border: 5px solid #f00;
}

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right … Read article

Snippet

Multiple Backgrounds Syntax

Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this:

#box {
  background: 
    url(icon.png) top left no-repeat, 
    url(texture.jpg), 
    url(top-edge.png) top left repeat-y;
}

They are comma separated values and there can be as many as you want with different URL's, positioning, and repeat values. You can even combine WebKit gradients into the mix:

#box {
	background: 
		url(../images/arrow.png) 15px center no-repeat,
		-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

Old school IE on the Mac … Read article

icon-link icon-logo-star icon-search icon-star