Blur Menu. Para practicar transiciones CSS3

En Tympanus hay varios tutoriales interesantes, pero el que hoy ha llamado mi atención ha sido uno sobre una serie de menús con efecto blur (que más o menos es lo mismo que decir borroso o desenfocado), en los que las transiciones CSS3 tienen un especial protagonismo... sin olvidar las transformaciones.

En esta página tenéis una serie de ejemplos y esta otra, el código para conseguir cada uno de esos menús.

Y como con este tipo de cosas es mejor una imagen que mil palabras, a continuación tres de los allí ofrecidos y el código correspondiente. Hay que tener en cuenta que ambas propiedades funcionan correctamente en Chrome y Safari, que en Firefox no se aprecian las transiciones y que en Explorer no funciona ninguna a menos que tengas la versión 9.

• Blogger
• HTML
• CSS
• JavaScript
• Diseño
• Contacto

Ver/Ocultar código

.bmenu {
padding: 0px;
margin: 0 0 10px 0;
position: relative;
font-family: arial;
}
.bmenu li {
font-size: 40px;
display: block;
}
.bmenu li a {
text-decoration: none;
white-space: nowrap;
color: transparent;
display: block;
text-transform: uppercase;
text-align: center;
text-shadow: 0px 0px 6px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
transition: all 0.6s linear;
}
.bmenu:hover li a {
text-shadow: 0px 0px 15px #fff;
}
.bmenu li a:hover {
text-decoration:none;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}

• Blogger
• HTML
• CSS
• JavaScript
• Diseño
• Contacto

Ver/Ocultar código

.bmenu3 {
padding: 0;
margin: 0 0 10px 0;
position: relative;
font-family:'Times New Roman', Times, serif;
}
.bmenu3 li {
font-size: 50px;
display: block;
}
.bmenu3 li a {
text-decoration:none;
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
color: #581514;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.2);
letter-spacing: 1px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-o-transform: skew(-12deg);
-ms-transform: skew(-12deg);
transform: skew(-12deg);

-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bmenu3:hover li a {
color: transparent;
text-shadow: 0px 0px 10px #fff;
background: rgba(88,22,22,0.2);
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
-ms-transform: skew(0deg);
transform: skew(0deg);
}
.bmenu3 li a:hover {
text-decoration:none;
background: transparent;
text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
color: #581514;
}

• Blogger
• HTML
• CSS
• JavaScript
• Diseño
• Contacto

Ver/Ocultar código

.bmenu2 {
padding: 50px 0px;
margin: 0 auto;
position: relative;
background: rgba(0,0,0,0.7);
width: 400px;
height: 480px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
font-family: 'Courier New', Courier, monospace;
}
.bmenu2:hover {
background: rgba(0,0,0,0.2);
}
.bmenu2 li {
font-size: 40px;
display: block;
line-height: 66px;
}
.bmenu2 li a {
text-decoration:none;
white-space: nowrap;
color: transparent;
display: block;
text-align: center;
text-transform: uppercase;
text-shadow: 0px 0px 3px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.bmenu2:hover li a {
text-shadow: 0px 0px 10px #fff;
}
.bmenu2 li a:hover{
text-decoration:none;
text-shadow: none;
color: #fff;
background: rgba(129,6,29,0.8);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}

La parte HTML sería una lista simple con la clase correspondiente al tipo de menú que queremos utilizar:

<ul class="bmenu3">
<li><a href="URL_ENLACE1">Enlace 1</a></li>
<li><a href="URL_ENLACE2">Enlace 2</a></li>
<li><a href="URL_ENLACE3">Enlace 3</a></li>
<li><a href="URL_ENLACE4">Enlace 4</a></li>
</ul>

Este es un sitio al que llegué gracias a un tweet de Daniel Ulczyk (@DanielUlczyk).

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter