Blur Menu. Para practicar transiciones CSS3 | Oloblogger 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...

25 de octubre de 2011

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.













¿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
Copy URL

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

follow us in feedly

16 comentarios :

  1. Están muy bien. Una matización: en Firefox 7.0.1 funcionan correctamente. Saludos.

    ResponderEliminar
  2. Vaya, están muy buenas, probaré alguna para mi menú. Gracias por el código.

    ResponderEliminar
  3. Gracias por el apunte EdCharrúa. Es que llevo tiempo sin usar Firefox porque me iba fatal ¿Va bien esa versión?

    ResponderEliminar
  4. Firefox 7.0.1 se ve todo bien... @oloman solo te recomiendo no instales una version beta que esas te dejan todo mal xD

    Saludos gente!

    ResponderEliminar
  5. A mí nunca me ha dado ningún problema el firefox

    ResponderEliminar
  6. Voy a actualizarlo entonces Ozl, EdCharrúa, porque mi versión actual es una patata.

    ResponderEliminar
  7. Increíbles los efectos de una para el blog, muchas gracias Oloman eres un crack

    ResponderEliminar
  8. Bueno Felipe, en este caso el crack es el editor de Tympanus ;)

    ResponderEliminar
  9. hola Oloman !!

    Llevo 3 semanas leyendo tu Pagina y en verdad me ha servido mucho para avanzar en el mundo del BLOG !!

    Personas como tu, hacen que cada día nosotros hagamos magia en la Internet

    Saludos y que continué el Exito

    ResponderEliminar
    Respuestas
    1. Gracias por hacérmelo saber, Emilio, pero espero que no lo incluyas TODO ;)

      Eliminar
  10. LA VERDAD QUE TU CODIGOS ESTAN BASTATE BIEN OLOMAN MUCHAS GRACIAS POR AYUDAR GENTE COMMO NOSOTROS HAVER SI SACAMOS APROBECHO CO TUS IDEAS Y CON LO QUE NO IMAGINEMOS PERO YO NO TENGO TANTO TIEMPO .SI NO ME DEDICABA TIEMPO ESTUDIAR UN POKO ESOS CODIGOS

    ResponderEliminar
  11. Me presento Don Oloman: me llamo Javi (Alicante) y no hay manera de aplicar tu codigo. He intentado aplicarlo en mi web de practicas y no ha habido manera. ¿Podrías ayudarme, si no es mucha molestia? Muchas gracias.
    Antecedentes:
    1º Mi web de prácticas: parroquia-gracia-alicante.blogspot.com.es/
    2º La prueba la estoy haciendo en la pagina "informacion parroquial" con una pequeña lista.
    3º He aplicado tanto los class .bmenu como .bmenu3 y no hay tu tía.
    4º Todo lo ejecuto en firefox v.26

    Espero que me conteste.
    Atentamente

    ResponderEliminar
  12. Hola. La clase "bmenuX" (según el estilo que utilices) la has de poner dentro de la lista (UL), no dentro de un DIV fuera de ella. Lo que vi es que lo tienes de esta última manera.

    ResponderEliminar
  13. Muchas gracias Oloman, ya lo he arreglado
    UN ABRAZO ENORME (es que estoy que me salgo)

    ResponderEliminar