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 div
s:
<div id="studio"> <div id="surface"></div> </div>
Next, the CSS. Set #studio
to the required dimensions – I’ve used 800×600 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):
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.
Nice trick and tutorial :)
Radius K [March 23rd, 2010, 16:50]
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]
Very clever! thanks for sharing :)
Cranespud [November 23rd, 2011, 05:46]