Menú desenfoque con CSS3 TransitionsNoticias 

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.
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

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información
 

Entradas relacionadas