Crazy Xhtml Blog

We have many major browsers like Internet Explorer, Opera, Firefox, Safari and SeaMonkey. I am really tired of using different CSS hacks and code for each of these browsers. So I want to offer you one universal CSS code which will help us to make shadows for text.

This is a simple example of Creating Cross Browser Compatible CSS Text Shadows. We will not use Images, only clear CSS code which work for all browsers.

Let’s create xhtml code:

1
2
3
4

<p>
   <span class="shadow">Cross Browser Compatible CSS Text Shadows</span>
   <span class="text">Cross Browser Compatible CSS Text Shadows</span>
</p>

I do not know if it is good for SEO, but for this method you need to duplicate content where you want add shadows. I think it is good for SEO, because you will not do shadows for ALL content of your website.

Next step: add this CSS code:

1
2
3
4
5
6
7
8
9
10

.text{
	position:relative;
	z-index:10;
}
.shadow{
	color: #cccccc;
	position:absolute;
	z-index:5;
	margin:2px 0 0 2px;
}

I think this is a very simple way to use shadows.

You can download an example here.