delusionworld blog

cross browser css only shadow

If you are like me you probably have have seen a million ways of implementing shadows but none seems really serious. I mean there are quite fancy ways of archiving it. You can use a lot of pictures and wrap the content in a lot of divs. You can use javascript to generate millions of spans/divs to display a smooth shadow with html elements and css colors. You can use canvas (all browser except IE) and VML (IE) for this. And I guess there are even more crazy ways of archiving this.

AS you probably have guessed all these methods are fare from being perfect and pretty complicated to use compared to a css only solution. I’m really surprised that I haven’t seen this solution anywhere else in all my researches.

So how does it work. It’s simple as hell – it’s just css!!

/* the following shadow works in IE5.5-8, FF2-3, Safari3, Chrome */
.shadow {
	box-shadow: 3px 5px 6px #888;
	-moz-box-shadow: 3px 5px 6px #888;
	-webkit-box-shadow: 3px 5px 6px #888;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888, direction=135, strength=7);
}

Using that you get a nice shadow in all browser you currently need (means IE, FF, Safari, Chrome). The IE shadow probably looks a little different however it still way better than no shadow or any fancy above solution (in my opinion).
Make sure to check out the DEMO.

Here is comparison between the css only shadows in IE and the rest:

cross browser css only fonts

Yet again a quite hard to believe mystery. I always thought that using custom fonts on my webpage is next to impossible. And looking at some quite complex technical solutions like:

• cufon [generates canvas/VML]
• facelift [generates images]
• sifr [generates flash]

I was pretty sure there was no easy solution to this problem. Guess what I just found a “css only” solution.

All you need is a *.eot (IE) and a *.ttf (rest) file of your desired font. You can get a bunch of fonts in these formats at http://www.fontsquirrel.com/. All fonts you can find there are 100% free for commercial use. If you want to use a non free front where you can’t get those 2 required formats you can still use on of the above methods.
After you have those two files you simple need to add this css

/* get fonts from: http://www.fontsquirrel.com/ */

@font-face {
	font-family: 'Bloody Normal';
	/* IE */
	src: url('fonts/BLOODY.eot');
	/* for other Browser you can define multiple formats but usually truetype alone is enough */
	src: local('Bloody Normal'), local('Bloody'),
		url('fonts/BLOODY.woff') format('woff'),
		url('fonts/BLOODY.svg#Bloody') format('svg'),
		url('fonts/BLOODY.TTF') format('truetype');
}

@font-face {
	font-family: 'Droid Sans Regular';
	src: url('fonts/DroidSans.eot');
	src: local('Droid Sans Regular'), url('fonts/DroidSans.ttf') format('truetype');
}

h1 { font-family: 'Bloody Normal'; }

Now you can use the font in your css as with the above H1 or you can use it inline with

<p style="font-family: 'Droid Sans Regular';">

This method works again in all tested browsers (Firefox, Internet Explorer, Safari, Chrome).

Just check out the DEMO.

Conclusion

The here provides solutions for shadows and fonts are extremely easy to use and don’t need any complex technical “workaround”. It’s just pure CSS (with specific CSS for each browser group) and still works in all current browsers you need (Firefox, IE, Safari, Chrome). I’m still really surprised to never have heard from this before. Life would have been so much easier if I knew this a year ago. Funny thing is that these solutions work in browser far older than a year. So this solutions could have been used a long time ago but I have never seen it before.

What do you think about these solutions? why aren’t they being used? do people simple don’t know them or is there any problem I didn’t stumbled upon?