This is something created by me a few days ago while playing with the new CSS3 features like the transform & box-shadow. Nothing fancy, just trying to give depth to the image.

I’m assuming you are viewing this page with a brand new Firefox or Safari (webkit) browser. Otherwise, you won’t be able to see the effect (OK here is a screenshot).

For those who want to use this effect, I’d recommend you to play with this code a little bit. Because it’s a little bit of mess. You’ll need to change the width to your image’s, maybe a few more tweaks.

<style type="text/css">
#shadow1 {
	margin: 40px auto;
	width: 500px;
}
#shadow1 div, #shadow1 div div {
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	width: 480px;
	height: 303px;
	background: #fff;
}
#shadow1 div {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
}
#shadow1 div div {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
#shadow1 div div img {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
	margin: -30px 0 0 -10px;
	border: 4px solid #fff;
}
</style>

<div id="shadow1">
	<div>
		<div>
			<img src="Your Image Here" alt="Coolio" />
		</div>
	</div>
</div>

The code basically applies box-shadows to the two divs which are already rotated a few degrees to the opposite directions. Finally the main image is being rotated back to zero degrees.

If someone would like to improve the code & make it a little bit modular, I’d love to give him/her credit here.

I don’t know if you noticed that there is a new font replacement method called Cufón. Cufón simply does what sIFR does. But Cufón is more exciting because, it doesn’t use any browser plugins. As you know, sIFR needs Adobe Flash plugin to work. Cufón, on the other hand just needs JavaScript to be enabled.

Let’s compare these two powerful font replacement methods.   »