Yesterday evening, I decided to create a nice layout based on typography and the text-shadow property. I took some time to imagine new interesting ways to use this CSS property.

Then, I tried to turn what I imagined into reality. And it worked!

CSS only navigation blur

Many of us know the famous blur CSS menu trick the end result is great, no doubt, but you need to write a lot of code and to use sprites. In two words, that’s “not easy”.

navigation menu

I’ll show you how to do that with less code, and no picture. Here is a demo if you want to see before your code. (Please use an up-to-date, standard compliant, browser: Firefox, Opera or Safari.)

The HTML is just an unordered list, with links inside:

<ul class="blur-menu">
<li><a href="#" title="">Index</a></li>
<li><a href="#" title="">Lyrics</a></li>
<li><a href="#" title="">Dreams</a></li>
<li><a href="#" title="">Feathers</a></li>
<li><a href="#" title="">Beyond</a></li>
<ul>

Now we want the whole list to change when we hover a link (blur). Moreover, we want the link we hover to react differently. Here is what we can do in CSS:

ul.blur-menu {
background: #000;
float: right;
list-style-type: none;
}

ul.blur-menu:hover li {
margin-top: -100px;
padding-bottom: 100px;
text-shadow: 0 100px 3px #fff;
}

ul.blur-menu:hover li:hover {
color: #fff;
text-shadow: 0 0 1px #fff;
margin-top: 0px;
padding-bottom: 0px;
}

ul.blur-menu li {
float: left;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 0 0 10px #000;
}

ul.blur-menu li a {
color: #fff;
text-decoration: none;
}

Nice, isn’t it? Now that you have the basic idea, you can play and have fun with this trick to create simple but eye-catching menus!

Simple but effective gradients

Many websites use some kind of gradient, bokeh effects, or light effects. But, it has lots of limitations: the gradient makes the picture heavier, it’s not dynamic, etc.

gradient

Here is a little trick to make a CSS only gradient. You can modify it easily to create bokeh effect, snowflakes, shiny stars, or whatever you want. (By the way, you can check the demo here.)

In your HTML put:

<div id="style">
<div>I love the shadow property!</a>!
<span class="highlight">▬</span>
</div>

(You can change the special character inside the <span> with anything you like, and so will change the shape of the highlight.)

Now the CSS:

body {
background: #000;
color: #fff;
}

#style {
margin: 0 auto;
width: 920px;
padding: 20px;
text-align: center;
position: relative;
overflow: hidden;
height: 800px;
}

span.highlight {
position: absolute;
font-size: 300px;
line-height:1px;
text-shadow: 0 200px 400px #FFF;
left: 320px;
top: -280px;
}

That’s nice, but we want to make it dynamic, right? So let’s change the HTML and add some links:

<div id="style">
<div>I love <a href="#" title="">Blood</a>, yes <a href="#" title="">Blood</a>!
<span class="highlight">▬</span>
</div>

Now we can make the highlights change when you hover the links. Simply add this to the CSS you just wrote:

a:hover ~ span.highlight {
position: absolute;
font-size: 300px;
line-height:1px;
text-shadow: 0 200px 400px #FF0000;
left: 320px;
top: -280px;
}

Easy but powerful!

Beautiful typography

The last little trick is a mix between text-shadow and opacity in order to create a beautiful typography. I can’t wait to show you the result, so… here it is:

mylemonjuice

I love this effect because it’s very subtle. And it’s easy to create too:

<div id="style">
<h1>My lemon juice please...</h1>
<span class="shadow-heading">My lemon juice please...</span>
</div>

I overdid it a little for the CSS, but I don’t know what kind of reset you use so… I’d better be careful:

body {
background: #70D700;
color: #fff;
}

#style {
margin: 150px auto;
width: 920px;
padding: 0 20px;
text-align: center;
position: relative;
overflow: hidden;
}

h1 {
font-style: normal;
font: 42px/1.5 'Palatino Linotype', Palatino, Baskerville, Georgia, serif;
margin:0;
padding:0;
font-weight: normal;
margin-top: 1.2em;
margin-bottom: 1em;
text-shadow: 0px 1px 20px #FDFF00;
}

span.shadow-heading {
font-style: normal;
font: 42px/1.5 'Palatino Linotype', Palatino, Baskerville, Georgia, serif;
padding-top: 1.2em;
padding-bottom: 1em;
position: absolute;
left: 0;
top: 0;
display: block;
width: 960px;
text-shadow: 1px 1px 2px #0C4F00;
}

What now?

These awesome little tricks should have given you many ideas. So enjoy, and try to create your own effects. I know that the text-shadow property and IE are not friends, but that’s not a reason to ignore how powerful it is!

Tomorrow I’ll release a FREE template using all these tricks. Be sure to stay tuned: follow me on Twitter and grab the RSS.

Do you know any good trick with the text-shadow property? Please, share!