Tips – Menú desenfocado o con efecto blur

Desde que tenemos la oportunidad de trabajar con css3 la creatividad ha aumentado, las cosas son más vistosas y sin ninguna duda más fácil de utilizar, la creación de efectos, animaciones y otras características se vuelven más habituales para nuestros proyectos.
Hoy vamos a hacer algo mas en CSS3 algo muy sencillo pero que a la vez es muy práctico para utilizar, se trata de un típico menú hecho con HTML pero adornado con css3, vamos a simular el famoso efecto blur o desenfoque gaussiano en photoshop, hoy lo hacemos facilmente con varias líneas de código css y lo aplicamos a nuestro menú en su estado de reposo.

Esto es lo que vamos a conseguir:

Este menú con este efecto puede servir para algo, es sencillo, elegante y a la vez muy práctico. Vamos a empezar.

EL HTML

En el HTML solo vamos a necesitar una lista desordenada <ul> asociada a una clase, con sus respectivos ítems <li> que a la vez son enlaces <a>.

EL CSS

Lo interesante esta en el CSS, es aquí donde hacemos este truco con la magia del CSS3.

Este código es sencillo y fácil de entender, tenemos el código del body que es el contenedor del menú, damos el color de fondo negro y ajustamos la tipografía.

Luego .menu li damos un par de estilo, tamaño de fuente y mostramos cada ítem como block.

Después vamos con los enlaces .menú li a, aquí damos los diferentes estilos que tendrá el menú en su estado normal, damos como color trasparent, no se verá este texto, pero con un desenfoque de 6px y de color blanco, luego aplicamos una transición para que haga efecto al cambiar de estado y se vea un poco vistoso, y lo respaldamos con los diferentes prefijos de los navegadores.

Luego aplicamos los estilos a los enlaces en su estado hover .menu li a:hover, le damos un color al texto, un padding left y bajamos el desenfoque del texto a 1px.

Y por últimos aplicamos los estilos al menu:hover li a es decir cuando el menú detecte el mouse tendrá un desenfoque de 6px que es el mismo que tiene en su estado normal, pero su color será #666.

Y listo, eso es todo…

————–

Nos Vemos en otro tutosytips.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

7 Respuestas

  1. Mohamed dice:

    Hi to all, it’s actually a fastidious for me to pay a visit this web page, it contains important Information.

  2. Mauricio dice:

    Me agrado tu página, felicidades, no me dedico al diseño pero es mi pasatiempo y estaré visitando constantemente, saludos.

  3. Donald dice:

    Great tip, did not know these CSS properties, thanks for sharing

  4. Me gusta mucho el tutorial que nos has brindado, si yo quisiera ese menú con el mismo comportamiento (el movimiento hacia la derecha) pero sin el desenfocado, es decir que la lista se lea claramente, ¿qué cambios hago en el código del tutorial? Muchas gracias.

    • Johanso dice:

      Hola Alexis, Solo tienes que quitar la propiedad text-shadow que es la que da ese efecto de desenfoque. ahh y en menu li a darle un color al texto por que queda por default negro. Saludes

  5. ramiro dice:

    Gracias por el tips, esta cool este efecto.. siguan asi. Aunque en Iexplorer no sirve..