Canvas Pixel Data and the CSS3 Solar System

Nov 8, 2010
Episode 43
This week, Jim shows you how to get colors from a canvas. Then, Nick deconstructs the CSS3 Solar System.
Spotlight

Thanks to those who make Doctype possible!

Picking Colors Using Canvas

In this segment, we show you how to use the canvas's getImageData method to read out color values of pixels on the canvas

View the Demo

Download the code.

This code will only work in browsers with canvas support.

Due to security reasons, if you draw an image or video frame from another domain (cross-domain) onto a canvas, the canvas will be marked write-only, and you will no longer be able to read the imageData from the canvas

Doctype Deconstruct: CSS3 Solar System

If haven’t seen the CSS3 Solar System, it’s basically a not-to-scale model of the solar system done entirely in CSS3.

Markup

Each planet, and it’s orbit, looks like this. The list item represents the planet’s orbit, which we’ll see in just a second. And the span represents the actual planet.

<li class=”mercury”>
  <a href=”#mercury”>
    <span>Mercury</span>
  </a>
</li>
The Planets

To get the round shape of the orbit, they’re using the CSS3 border-radius property. If you push border radius to certain extremes, you can actually make the corners of a box so round, that the element looks like a circle.

border-radius: 52px;

To make the box rotate, CSS3 transforms are being used in combination with CSS3 animations. Here are the animation keyframes for webkit based browsers. The transforms here, are what make the orbits rotate. The keyframes here, named orbit, describe how the element should rotate from one point to the next, in this case making a complete 360 degree rotation.

@-webkit-keyframes orbit {
  from { -webkit-transform:rotate(0deg) }
  to { -webkit-transform:rotate(360deg) }
}

The orbit keyframes are then assigned to the list item and the list item is also instructed to animate infinitely, so that the list item, and its child span tag which represents the planet, just spins around and around again.

ul.solarsystem li {
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -webkit-animation-name:orbit;
}
The Sun

Just like the orbits, the sun has a CSS3 border-radius applied to it to make it round. Then, there’s a subtle change in color and shade across the surface of the sun to make it appear more round. Additionally, there’s an even more subtle glow around the outside. To give the sun the subtle change in color and give it some roundness, CSS3 gradients are being used like this:

background: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.22, #C90), to(#FFDB70));

Then, to make the sun glow, a box shadow is being used. Remember, box shadows don’t have to be used to make shadows. You can set them to a brighter color to make page elements look like they’re glowing. The X and Y offsets are set to 0 pixels so that the shadow is centered. Then , the blur radius is set to 50 pixels to make the lighting appear to be very soft.

-webkit-box-shadow: #C90 0px 0px 50px;

More than just showing you how the CSS3 Solar System is put together, hopefully this Doctype Deconstruct showed you how the amazing features of CSS3 can be combined together in creative ways.