Menu desenfocado con CSS3

Actualizado el domingo, 19 junio, 2016

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.

<!DOCTYPE html>
<html lang="es">    
<head>
    <meta charset="UTF-8">
    <title>Menu desenfocado</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="styles.css">
</head> 
<body>
    <ul class="menu">
        <li>
            <a href="#">Inicio</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">Servicios</a>
        </li>
        <li>
            <a href="#">Portfolio</a>
        </li>
        <li>
            <a href="#">Contacto</a>
        </li>
    </ul>
</body> 
</html>

Empezamos modificando el body para definir el fondo y la fuente a utilizar.
body {
    font-family: 'Lato', sans-serif;
    background: url('patern.png') repeat;
}

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

ul {
    background-color: black;
    width: 30%;
    margin: 0 auto;
    padding: 0;
    border-radius: 20px;
}
li {
    list-style: none;
    font-weight: 900;
    font-size: 40px;
}

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.

.menu li a {
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: all 0.6s linear;
    transition: all 0.6s linear;
    text-shadow: 0px 0px 20px #fff;
}

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 li a:hover {
    text-shadow: 0px 0px 1px #fff;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

 

Agregar comentario