CSS3 Experiments #2: Polaroids

Learn how to make Polaroid-style images complete with 3D shadows using only CSS.

Posted on March 8, 2011 3 comments

First Things First

As before, we’re using CSS3 here so you’ll need to view the demo in a browser that supports the effects (namely gradients and box-shadow). I recommend the latest versions of Firefox, Safari or Chrome – I’m afraid I’ve not tested beyond these browsers, but as long as yours supports the properties above then there should be no problem.

The Code

Here's the HTML we'll be using for this experiment:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div class="canvas">
		<ul class="box left">
  			<li>
  				<img src="flower.jpg" width="300" height="380" alt="" />
  			</li>
		</ul>
		<ul class="box right">
  			<li>
  				<img src="shells.jpg" width="300" height="380" alt="" />
  			</li>
		</ul>
	</div>
</body>
</html>

You can replace the IMG files with your own images of course. Remember to size them according to the dimensions set-out in the CSS, minus the top, bottom, left and right borders (all 10px each).

Here's the CSS to work the magic:

.canvas {
	position:relative;
	margin:50px auto 0 auto;
	width:540px
}
ul.box {
	top:25px;
	position:absolute;
	margin: 0;
	padding: 0;
	clear: both;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	z-index:1;
}
ul.right {
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	left:240px;
	top:0;
	z-index:2;
}
ul.left:hover {z-index:3;}
ul.box li {
	list-style-type: none;
	margin: 0 30px 30px 0;
	padding: 0;
	width: 320px;
	height: 400px;
	border: 1px solid #efefef;
	position: relative;
	float: left;
	background: #ffffff; /* old browsers */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
ul.box li:after {
	z-index: -1;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	right: 19px;
	bottom: 10px;
	transform: skew(15deg) rotate(6deg);
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); }
ul.box li:before {
	z-index: -2;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	left: 19px;
	bottom: 10px;
	transform: skew(-15deg) rotate(-6deg);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); }
ul.box img {
	border:10px solid #fff;
	width:300px;
	height:380px;
}

View the Demo.

Feel free to experiment with different dimensions for the boxes; remember you'll probably need to adjust the left,right and bottom position values for the shadows (which are created in the li:before and li:after definitions), or else they may not sit properly in your corners.

You can also adjust the shape and intensity of the shadows by tweaking the transform and RGBa opacity values in the same properties.

Used this code in your own project or experiment? We'd love to see what you've done – let us know!

There are 3 awesome comments...

Mark Fraser - March 9, 2011 at 6:24 pm
Was interesting (but not surprising) to view the demo in IE8 and see how it degrades. At least the images are still visible, even if the effects aren’t applied and the positioning is erratic.
Whereas, the previous posts’s 3D gradient and shadow box don’t show at all in IE8. Will be interesting to see what IE9 does…
Dan Luton - March 9, 2011 at 6:42 pm
Will have to check it out in IE<9 to see how things perform, it would indeed be interesting to see.
Of course, any versions of IE other than 9 will have zero support for CSS3 properties, so as you've found, none of these effects will render.
The thing to bear in mind is that the majority of these sort of effects are browser enhancements, thus not critical to the usability of a site, which is why many of them can be used right now. Users of non-supporting browsers will get a degraded version of the design, which will still be fully usable.
Of course, in the real world, there would be extra conditions in there to make sure the layout works to an acceptable level...but good to know that the basics function just from normal degradation.
IE9 should actually render most if not all of the effects just fine, although I don't have a version to hand to try it out with unfortunately...
Replica Watches - September 7, 2013 at 11:44 am
The problem is that in-development stores need testing; to do that properly, you need to push test orders fully through the system, from invoice to completion.

THE DIGITAL BLOG