The New Hotness: Using CSS3 Visual Effects

On January 25, 2010, In SEO, Web Design Tips, by ZURB

Previously in this series on CSS3, we talked not only about how to create scalable and compelling buttons but about how to effectively use new CSS3 properties to speed up development and quickly create rich page elements. In this final article of the series, we’ll really get into it and use CSS3 visual effects to push the envelope.

Not everything in this article is practical, or even bug-free, but it’s a fun primer on what’s in the pipeline for Web design. To get the most from these examples, you’ll have to use Safari 4 or Chrome. (Firefox 3.5 can handle most of it, but not everything: WebKit is further along than Gecko in its tentative CSS support.) We’ll show you how to create impressive image galleries, build animated music players and overlay images like a pro. All set? Let’s rock.

<ul class="polaroids">
	<li>
	   <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">
	   	<img src="image-01.jpg" width="250" height="200" alt="Roeland!" />
	   </a>
	</li>
	<li>
	   <a href="http://www.flickr.com/photos/zurbinc/3985295842/" title="Discussion">
	   	<img src="image-02.jpg" width="250" height="200" alt="Discussion" />
	   </a>
	</li>
</ul>

ul.polaroids a:after {
	content: attr(title);
}

/* By default, we tilt all images by -2 degrees */
ul.polaroids a {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
}

/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
	-webkit-transform: none;
	-moz-transform: none;
	position: relative;
	top: -5px;
}

ul.polaroids a:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-webkit-transition: -webkit-transform .15s linear;
	position: relative;
	z-index: 5;
}

style="clear: both;" />

Sliding Vinyl Albums With CSS Gradients

href="http://www.zurb.com/playground/sliding-vinyl"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/hotness-2.jpg" alt="Hotness-2 in The New Hotness: Using CSS3 Visual Effects" />

This example began as a simple experiment with CSS gradients and grew into a pretty detailed investigation not just of gradients but of new background properties and animation. We’ll show you how to create advanced gradients with no images and use layered backgrounds for some cool effects.

Writing the Markup

What we’ve created here is a simple unordered list of albums with slide-out album controls. You could use something like this to present your band’s albums or to showcase a series of podcasts or any other kind of audio (or potentially video) media. Each item in the list is an album, with some fairly simple markup:

<div class="album">
	<a href=""><img src="/playground/sliding-vinyl/muse-the-resistance.jpg" width="500" height="375" alt="Muse: The Resistance" /></a>
	<span class="vinyl">
		<div></div>
	</span>
	<ul class="actions">
		<li class="play-pause"><a href=""></a></li>
		<li class="info"><a href=""></a></li>
	</ul>
	<div>
		<h5>Muse</h5>
		<small>The Resistance</small>
	</div>
	<span class="gloss"></span>
</div>

It might look like a few extraneous elements are in there, but we’ll be using all of them to render our slide-out record and controller buttons.

Creating the Record

href="http://www.zurb.com/playground/sliding-vinyl"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/hotness-4.png" style="float: left; margin: 0px 22px 12px 0;" alt="Hotness-4 in The New Hotness: Using CSS3 Visual Effects" /> The real trick here was the album. We challenged ourselves to create the album without using any images at all (we ended up cheating a bit, but we’ll get to that). When it slides out, the album looks like the figure on the left: standard black vinyl with a slight shine to it and a couple of control buttons.

You’ll notice that the inside edge of the album is a little jagged, and that’s because the album isn’t an image but rather two layered gradients generated by the browser and set as the background of the same object. This required not only a bit of messing around with the new gradient objects in CSS3 but also another CSS3 trick: multiple backgrounds. Check out the CSS for the record:

ul.tunes li div.album span.vinyl div {
	display: block;
	border: solid 1px black;
	width: 112px;
	height: 112px;
	-webkit-border-radius: 59px;
	-moz-border-radius: 59px;
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
	-webkit-transition: all .25s linear;
	background:
		-webkit-gradient(
			linear, left top, left bottom,
			from(transparent),
			color-stop(0.1, transparent),
			color-stop(0.5, rgba(255,255,255,0.25)),
			color-stop(0.9, transparent),
			to(transparent)),
		-webkit-gradient(
			radial, 56 56, 10, 56 56, 112,
			from(transparent),
			color-stop(0.01, transparent),
			color-stop(0.021, rgba(0,0,0,1)),
			color-stop(0.09, rgba(0,0,0,1)),
			color-stop(0.1, rgba(28,28,28,1)),
			to(rgba(28,28,28,1)));
	border-top: 1px solid rgba(255,255,255,.25);
}

We’ve omitted some of the positioning and other boring CSS pieces (check out the live demo for the complete markup). We want to focus here on the pieces that are critical to creating the album visually: border-radius and -webkit-gradient.

The simplest part was creating a round object: by setting the border radius to exactly half of the height and width of the object, the browser masks the object to a perfect circle. Watch out, though: unlike in Photoshop, if the border radius is higher than half the object’s height or width, the browser might simply ignore the declaration. That said, rounding the object is the easy part; the tricky part is controlling the gradients.

Two gradients are at work on the object: one creates the album itself (complete with the hole in the middle), and the other casts a light across it. We’ll start with the shine:

ul.tunes li div.album span.vinyl div {
	...
	background:
		-webkit-gradient(
			linear, left top, left bottom,
			from(transparent),
			color-stop(0.1, transparent),
			color-stop(0.5, rgba(255,255,255,0.25)),
			color-stop(0.9, transparent),
			to(transparent)),
			...
}

The shine gradient is a linear gradient from the top-left to bottom-left. We start with transparent so that the gradient fades in, then we shift the gradient to white at the 50% mark (halfway across the album), with 25% opacity. We’re using RGBa colors because they allow us to control both the color and opacity in the same declaration.

The album itself is more complicated, and it suffers a bit from early implementation of the radial gradient.

ul.tunes li div.album span.vinyl div {
	...
	background:
		...,
		-webkit-gradient(
			radial, 56 56, 10, 56 56, 112,
			from(transparent),
			color-stop(0.01, transparent),
			color-stop(0.021, rgba(0,0,0,1)),
			color-stop(0.09, rgba(0,0,0,1)),
			color-stop(0.1, rgba(28,28,28,1)),
			to(rgba(28,28,28,1)));
	...
}

Radial gradients are just as they sound, and just what you’d expect from gradients in Photoshop. They begin at the center of the object and track across the object in concentric circles. In our case, we wanted to start with transparency, then switch to a solid black, and end up with a very dark gray.

Perhaps the most difficult part of the gradient is declaring its size and position: radial, 56 56, 10, 56 56, 112. We have five pieces of data here: type, starting center, starting diameter, ending center and ending diameter. Here’s how they work:

• Radial is, of course, where we define this as a circular gradient rather than straight (linear) gradient.
• We begin at 56 56, which is exactly half the height and width of our 112-pixel-tall object. We want the gradient to end with the same center, so we repeat 56 56.
• The gradient begins with a diameter of 10 pixel.
• The ending center (56 56) ensures that this is a concentric gradient.
• 112 is our final diameter, the same width as the object.

The radial implementation was still a bit rough around the edges, so we played around with these values and the color-stop elements to get the effect we wanted. In the future, a more polished implementation won’t be quite so trial and error.

href="http://www.zurb.com/playground/sliding-vinyl"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/01/hotness-3.png" style="float: left; margin: 0px 22px 12px 0;" alt="Hotness-3 in The New Hotness: Using CSS3 Visual Effects" /> From there, similar to the linear gradient, we created a series of color-stops to go from transparent to black to dark gray. The result of these two backgrounds (separated by a comma—thanks, CSS3) is our shiny record. Again, you’ll notice the center is a bit rough, but we’re sure future implementations of this new element will be cleaner.

The button controls are simply rounded anchors (using border-radius), with a couple of image glyphs (we told you we cheated a bit). The final touch was to add the animation so that the album would roll out of the sleeve on hover.

Adding in the Final Animation

To achieve the rolling effect, we paired up a position shift and a rotation effect so that, as the object moves to the right, it rotates just the right amount to appear as if it’s rolling. Here’s what we did:

ul.tunes li div.album span.vinyl {
	-webkit-transition: all .25s linear;
}

ul.tunes li div.album:hover span.vinyl {
	-webkit-transform: translateX(60px);
}

ul.tunes li div.album:hover span.vinyl div {
	-webkit-transform: rotate(120deg);
}

We’re using two transforms, translateX and rotate, on two objects. We use the translate instead of standard positioning because transforms don’t impact the DOM—from a layout perspective, the object never really moves, and so we don’t have to worry about floats going awry or objects pushing each other around. Transitions also work better on translation transforms than on actual position (left: 20px, etc.) changes.

Gradients have a ways to go, but there are already some cool uses for generated gradients. You can even control them at runtime using transitions or JavaScript, which opens up yet more possibilities.