Create a studio-style backdrop with CSS3

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

Site­point’s Web Design blog fea­tured an arti­cle this week called Cre­ate A Stu­dio Style Back­drop In Pho­to­shop, which pro­vides instruc­tions for mak­ing a glossy, reflec­tive sur­face effect, sim­i­lar to what you often see in adverts.

As the title makes clear, the tuto¬≠r¬≠i¬≠al is for cre¬≠at¬≠ing the effect in Pho¬≠to¬≠shop ‚ÄĒ but real¬≠ly, the same effect is fair¬≠ly eas¬≠i¬≠ly achiev¬≠able with some bleed¬≠ing-edge CSS. That said, it won‚Äôt work in every brows¬≠er, so cur¬≠rent¬≠ly it‚Äôs just a proof-of-con¬≠cept piece.

You can see the fin­ished work here: Cre­ate a stu­dio-style back­drop with CSS3. You’ll need Fire­fox 3.6, Safari 4, or Chrome to see it as intended.

The first step is to cre­ate the markup for the back­drop; it’s pret­ty sim­ple, you just need two divs:

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

Next, the CSS. Set #studio to the required dimen¬≠sions ‚ÄĒ I‚Äôve used 800x600 pix¬≠els ‚ÄĒ and set #surface to occu¬≠py a third of that height, and absolute¬≠ly posi¬≠tion it to the bot¬≠tom of #studio.

In the Pho­to­shop tuto­r­i­al they use cir­cles and gauss­ian blur to cre­ate the gloss effect, but for our CSS tuto­r­i­al we’ll use gra­di­ents. We must make two (one for each div), using the same colours but with slight­ly dif­fer­ent dimen­sions. And we must use a dif­fer­ent syn­tax for Fire­fox and WebKit, as I wrote about in my arti­cle CSS gra­di­ent syn­tax: com­par­i­son of Mozil­la 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 syn¬≠tax¬≠es dif¬≠fer ‚ÄĒ I‚Äôve done that in-depth already ‚ÄĒ but in essence I‚Äôve set a gra¬≠di¬≠ent from white to black, pass¬≠ing through a shade of green (#011601) between. This gives the green-tint¬≠ed gloss effect. The radius of the gra¬≠di¬≠ent in #surface is small¬≠er, to dis¬≠play a pro¬≠nounced dif¬≠fer¬≠ence between the two.

The next step was to add the prod¬≠uct image ‚ÄĒ I‚Äôve used the same gener¬≠ic media play¬≠er image by Pza¬≠do. What I want¬≠ed to do was use the same image twice and flip it with CSS, but unfor¬≠tu¬≠nate¬≠ly that‚Äôs not pos¬≠si¬≠ble, so I‚Äôve had to make a copy of the orig¬≠i¬≠nal and flip it ver¬≠ti¬≠cal¬≠ly to cre¬≠ate two sep¬≠a¬≠rate images. I‚Äôve added these to the markup Update: I realised that I could use the scale trans¬≠for¬≠ma¬≠tion func¬≠tion to do this, so I just need to repeat the same image twice with a dif¬≠fer¬≠ent id for each:

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

I’ve posi­tioned these absolute­ly, then rotat­ed them using the transform prop­er­ty; I’ve also made #reflection most­ly 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 reflec¬≠tion image by using a neg¬≠a¬≠tive (-1) val¬≠ue for the scale func¬≠tion; I‚Äôve also used translate to repo¬≠si¬≠tion it direct¬≠ly below the main image.

WebKit rotates them nice­ly, but the out­put in Fire­fox is very jagged; hope­ful­ly this will be fixed in a future ver­sion. Update: I was using Fire­fox 3.7a4 on Lin­ux; in Fire­fox 3.6 (on Mac, at least) it rotates smoothly.

Final­ly, I’ve added some pro­mo­tion­al text in The League Of Move­able Type­’s League Goth­ic font, using @font-face.

You can see the final result here: Cre¬≠ate a stu¬≠dio-style back¬≠drop with CSS3; as I men¬≠tioned, you‚Äôll need Fire¬≠fox 3.6, Safari 4, or Chrome to see it as intend¬≠ed. 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 intel­lec­tu­al exer­cise, real­ly. It’s not suit­able for use on a pro­duc­tion site, and will need some pol­ish­ing to be in any way use­ful. But it’s fun to play around with new CSS prop­er­ties, and to start to get an idea of how we can use it to repli­cate effects which used to only be pos­si­ble in graph­ics packages.

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

  1. Nice trick and tutorial :)

  2. I stud¬≠ied the css tuto¬≠r¬≠i¬≠al and I real¬≠ly learned a lot. I think my next home¬≠page will be a lot bet¬≠ter than my first one.

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

  3. Very clever! thanks for sharing :)