Create a studio-style backdrop with CSS3

Warning This article was written over six months ago, and may contain outdated information.

Sitepoint’s Web Design blog featured an article this week called Create A Studio Style Backdrop In Photoshop, which provides instructions for making a glossy, reflective surface effect, similar to what you often see in adverts.

As the title makes clear, the tutorial is for creating the effect in Photoshop — but really, the same effect is fairly easily achievable with some bleeding-edge CSS. That said, it won’t work in every browser, so currently it’s just a proof-of-concept piece.

You can see the finished work here: Create a studio-style backdrop with CSS3. You’ll need Firefox 3.6, Safari 4, or Chrome to see it as intended.

The first step is to create the markup for the backdrop; it’s pretty simple, you just need two divs:

<div id="studio">
<div id="surface"></div>
</div>

Next, the CSS. Set #studio to the required dimensions — I’ve used 800x600 pixels — and set #surface to occupy a third of that height, and absolutely position it to the bottom of #studio.

In the Photoshop tutorial they use circles and gaussian blur to create the gloss effect, but for our CSS tutorial we’ll use gradients. We must make two (one for each div), using the same colours but with slightly different dimensions. And we must use a different syntax for Firefox and WebKit, as I wrote about in my article CSS gradient syntax: comparison of Mozilla and WebKit (Part 2):

#studio {
background-image: -moz-radial-gradient(circle farthest-side, white, #011601 80%, black);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 340, from(white), color-stop(95%, #011601), to(black));
}
#surface {
background-image: -moz-radial-gradient(circle farthest-side, white, #011601 60%, black);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 320, from(white), color-stop(80%, #011601), to(black));
}

I won’t go into the details of why the syntaxes differ — I’ve done that in-depth already — but in essence I’ve set a gradient from white to black, passing through a shade of green (#011601) between. This gives the green-tinted gloss effect. The radius of the gradient in #surface is smaller, to display a pronounced difference between the two.

The next step was to add the product image — I’ve used the same generic media player image by Pzado. What I wanted to do was use the same image twice and flip it with CSS, but unfortunately that’s not possible, so I’ve had to make a copy of the original and flip it vertically to create two separate images. I’ve added these to the markup Update: I realised that I could use the scale transformation function to do this, so I just need to repeat the same image twice with a different id for each:

<img src="phone.png" id="product">
<img src="phone.png" id="reflection">

I’ve positioned these absolutely, then rotated them using the transform property; I’ve also made #reflection mostly transparent:

#product {
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
}
#reflection {
opacity: 0.2;
-moz-transform: scale(1,-1) rotate(20deg) translate(-50px,-140px);
-o-transform: scale(1,-1) rotate(20deg) translate(-50px,-140px);
-webkit-transform: scale(1,-1) rotate(20deg) translate(-50px,-140px);
}

Update: So what I’ve done here is flipped the reflection image by using a negative (-1) value for the scale function; I’ve also used translate to reposition it directly below the main image.

WebKit rotates them nicely, but the output in Firefox is very jagged; hopefully this will be fixed in a future version. Update: I was using Firefox 3.7a4 on Linux; in Firefox 3.6 (on Mac, at least) it rotates smoothly.

Finally, I’ve added some promotional text in The League Of Moveable Type’s League Gothic font, using @font-face.

You can see the final result here: Create a studio-style backdrop with CSS3; as I mentioned, you’ll need Firefox 3.6, Safari 4, or Chrome to see it as intended. If you don’t have access to those, take a look at these screen grabs (click to see them full size):

Screenshot taken in Firefox 3.6 Screenshot taken in Google Chrome Screenshot taken in Firefox 3.7a4

So what was the point of this? An intellectual exercise, really. It’s not suitable for use on a production site, and will need some polishing to be in any way useful. But it’s fun to play around with new CSS properties, and to start to get an idea of how we can use it to replicate effects which used to only be possible in graphics packages.

3 comments on
“Create a studio-style backdrop with CSS3”

  1. Nice trick and tutorial :)

  2. I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

    barrierefreies webdesign [April 7th, 2010, 15:09]

  3. Very clever! thanks for sharing :)