Menú desenfoque con CSS3 Transitions
Menú desenfoque con CSS3 Transitions
Hay tantas cosas que podemos hacer con las propiedades y posibilidades adicionales que trae consigo CSS3.
Hoy quiero mostrar cómo experimentar con las sombras del texto y transiciones con el fin de lograr un efecto de desenfoque que vamos a aplicar a un menú en el que asoma sobre los elementos.
La idea principal es difuminar los otros artículos al tiempo que mejora la que se ciernen actualmente.
Tenga en cuenta que esto sólo funcionará correctamente en los navegadores modernos y por desgracia Internet Explorer no pertenecer a esa categoría, ya que no es compatible con las transiciones (y muchas otras propiedades de CSS3 sugeridas que otros apoyan).
Asimismo, no admita texto de sombras, así que he añadido una hoja de estilo adicional para IE que al menos mostrar los elementos del menú.
el marcado
Vamos a crear la estructura HTML de nuestro menú en primer lugar. Vamos a añadir a un recipiente con un ancho fijo. El menú va a ser el siguiente:
< ul class = "bmenu" >
< li > < a href = "#" > About </ a > </ li >
< li > < a href = "#" > Illustrations </ a > </ li >
< li > < a href = "#" > Photography </ a > </ li >
< li > < a href = "#" > Web Diseño </ a > </ li >
< li > < un href = "#" > Proyectos personales </ a > </ li >
< li > < un href = "#" > Contacto </ a > </ li >
</ ul >
Ahora vamos a añadir un poco de estilo!
el CSS
En casi todos nuestros ejemplos tendremos el mismo estilo de la UL y de los elementos de la lista. Sólo se modificará el elemento de enlace. Por lo tanto, el estilo común para la lista desordenada es la siguiente:
.bmenu {
padding : 0px ;
margen : 0 0 10px 0 ;
posición : relativa ;
}
.bmenu li {
font-size : 50px ;
display : bloque ;
}
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros