Menu desenfocado con CSS3

Crearemos un menú experimental el cual muestra varios enlaces con letras que están desenfocadas y al posar el mouse sobre los enlaces las palabras se enfocan y agrandan para que el usuario las pueda leer. La estructura de este ejemplo es super simple: tenemos una lista desordenada que posee 5 ítems y en cada uno de ellos hay un enlace. Para los textos vamos a estar utilizando la fuente Lato de Google Fonts.

Empezamos modificando el body para definir el fondo y la fuente a utilizar.

Luego seguimos con la lista y los ítems de la misma.

Finalmente modificamos los enlaces. Hacemos que el color de los enlaces sea transparente y le damos una sombra blanca. Con esto hacemos que los textos se vean muy difusos. También achicamos los elementos a la mitad utilizando scale() y definimos la propiedad transition para conseguir el efecto de transición.

Cuando el mouse esté encima de un enlace modificaremos la sombra para que el texto sea nítido, al mismo tiempo que devolvemos el elemento a su tamaño real.

 

Menu desenfocado con CSS3
VOTA EL ARTICULO POR FAVOR

Share on FacebookTweet about this on TwitterShare on Google+Digg thisPin on PinterestShare on LinkedInPrint this pageEmail this to someone VOTA Y COMPARTE

Agregar comentario

*

Suscribete

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.

Tu suscripción a sido realizada con éxito.