CSS: effetto blur (sfocatura) sulle voci dei menu

I nostri fratelli designer conoscono bene l'effetto blur per averlo usato innumerevoli volte in Photoshop. Storicamente questo filtro era stato introdotto per le immagini da Internet Explorer (versione 5 e superiori). Possiamo cercare di imitare questo effetto sulle voci di un menu usando l'ombreggiatura del testo e le transizioni CSS3. Vediamo come.

Abbiamo un semplicissimo menu:

<nav id="menu" role="navigation">
    <ul>
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li><a href="#">Item Four</a></li>
        <li><a href="#">Item Five</a></li>
    </ul>
</nav>

Utilizzeremo la proprietà text-shadow su :hover combinata con le transizioni e con un raggio molto ampio:

#menu {
    margin: 1em;
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color: #000;
    text-decoration: none;
    padding: 10px 25px;
    letter-spacing: 1px;
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
     transition: all 500ms ease-in;
}

#menu li a:hover {
    color: #000;
    text-shadow: 1px 1px 20px #333;
}

Potete visionare l'esempio finale in questa pagina.