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.

 

facebook Menu desenfocado con CSS3twitter Menu desenfocado con CSS3google Menu desenfocado con CSS3diggit Menu desenfocado con CSS3pinterest Menu desenfocado con CSS3linkedin Menu desenfocado con CSS3print Menu desenfocado con CSS3email Menu desenfocado con CSS3Si te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

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