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.

Let’s compare these two powerful font replacement methods.

Cufon

As I said, Cufón is based on JavaScript. It has two individual parts. First, a font generator and second, a rendering engine. This means, if your visitors disable scripts, they will not able to see the font replacement. But, they’ll see all the Cufón based texts without any problem; as normal HTML texts.

Cufón supports all mainstream browsers:

• Internet Explorer 6, 7 and 8
• Mozilla Firefox 1.5+
• Safari 3+
• Opera 9.5+
• Google Chrome

The only problem with its browser support is Safari 2 and Internet Explorer 5.5. But we all know, it is not a big deal. Also Cufón has some minor bugs.

Implementing Cufón is super easy. First you have to download cufon-yui.js. Then you have to convert your font to VML paths by using Cufón’s online generator. And last, you call cufon-yui.js and generated font .js file in your document and call Cufón function (there is a little +1 step that is calling Cufón function in the footer for IE). That’s it.

Styling Cufón is also very easy. You may style Cufón based text by using CSS.

Cufón’s JavaScript’s file size is also exciting. cufon-yui.js is 14Kb. For testing only, I used FF Mt font, free from FontFont. I converted FF Mt to JavaScript via Cufón’s generator and it took only 14Kb. So a very basic setup cost me only 2 JavaScript files: 28Kb. This also means 2 HTTP requests.

However, there is a big usability problem in Cufón. That is, users cannot select and copy the Cufón based texts. That’s a big usability issue but I think creators will do something about it. (Thanks to Hank)

sIFR 3 *

I’ve used sIFR in many projects and it really helped me to make web sites more stylish. It’s like revolutionary.

sIFR also uses JavaScript and plus it stores font files in Adobe Flash. This means you have to have Adobe Flash to create font files. Or there is an online font converter for sIFR called sIFR generator. It helps you to convert .ttf files to .swf files.

Implementing sIFR to a web page is a little bit harder than Cufón. First you need to convert your font to a .swf file. Than you have 3 files to link on your page. These are: sIFR’s CSS file, sIFR’s JavaScript and a config file. The config file is optional, you may want to put config lines to the bottom of every page. And the next step is configuring your sIFR. To style sIFR texts, you can also use CSS. But this time you need to define CSS in the config file.

Let’s check sIFR’s file sizes. Again, I used FF Mt font. It took 10Kb. Compressed sIFR.js took 29Kb. And the CSS file for it took 2Kb. That makes 41Kb. 1.5 times bigger than Cufón. sIFR needs 4 HTTP requests.

* Build r436

Conclusion

Cufón seems to be better. We all know, sIFR is older but it still eats more kilobytes and HTTP requests. Its rendering is also slower then Cufón. sIFR renders texts after the page is loaded. So these factors help Cufón to take the lead.