Increíbles efectos y animaciones con HTML5 y CSS3

Pablo

En Adobe están haciendo bien las cosas, lentamente parecen ir abandonando la idea sobre la vigencia de Flash y comienzan a hacer cosas realmente interesantes utilizando tecnologías como HTML5 y CSS3.

Un buen ejemplo de ello es el sitio web The Expressive Web, en donde se explotan las virtudes y mejoras tanto de las propiedades CSS3, como de las mejoras provistas por HTML5.

Animaciones CSS3 HTML5 de Adobe

En este fantástico y sorprendente sitio de Adobe vamos a encontrar listadas algunas de las propiedades CSS3/HTML5 más importantes, cada una de ellas nos dirigirá a un nuevo ejemplo.

Las propiedades listadas son:

  • Animaciones CSS3
  • Gradientes CSS3
  • Media Queries CSS3
  • Sombras CSS3
  • Transformaciones CSS3
  • Transiciones CSS3
  • Web Fonts CSS3
  • Audio HTML5
  • Canvas HTML5
  • Formularios HTML5
  • Video HTML5
  • Web Storage

Finalmente en el sitio se indican las versiones de navegador necesarias para ejecutar cada ejemplo, a la vez se nos indica el porcentaje de usuarios aproximado que puede visualizar el ejemplo sin ningún tipo de inconvenientes.

Web: The Expressive Web

Pablo

Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

Comentarios

  1. Joe Vega Responder

    Si Google hubiese podido indexar correctamente el contenido de Flash, hoy no existiría ningun html. La verdad que es una lástima Flash es el invento mas grandioso en la historia de internet. Ademas le atribuyen a HTML5 maravillas que en realidad son de Javascript, en el año 98, antes que Flash este en la cresta, habia un estudio web de Barcelona que te volaba la cabeza con los sitios que hacian en Javascript, con casi todo lo que hoy le adjudican al HTML5, el estudio se llamaba algo asi como you2, o 4you, no recuerdo, luego con el auge de Flash dejaron de hacer Javascript para utilizar el por entonces milagro de Macromedia. HTML5 es simplemente un contenedor, todas esas maravillas las hace Javascript, que tranquilamente la pueden montar sobre un HTML normal, con en aquella epoca.

    • Djokovic Responder

      En mi opinión no te quito cierta razón, pero a mi forma de ver estas pisando demasiados charcos en tus apreciaciones. Flash fue un inventazo, no lo niego, solo tiene una pega… “PESA DEMASIADO” según lo que quieras hacer claro esta… En cuanto a lo de Javascript tienes razón, lleva mucho tiempo haciendose con Javascript… pero no le adjudican nada a HTML5 quitandole prestrigio a Javascript, si no que en este estarndar de HTML en combinación con CSS3 se pueden conseguir de manera más simple, efectos tan buenos como te los puede dar Javascript sin tener que recurrir a la llamada de funciones. Simplemente HTML5 y CSS3, se han implementado de tal manera no solo con todas estas funciones que trata si no con mas, harán en un futuro muy cercano que la visión de las webs sean innovadora… un saludo… y esto solo es mi humilde opinión.

      • Pablo Responder

        @Djokovic: Gracias por tu comentario.

        No existe la solución ideal para todo el mundo. Todos los lenguajes/soluciones tienen sus ventajas y desventajas.

        Por ejemplo HTML5 tiene una ventaja enorme en los aspectos relacionados a los websockets. Si quieres implementar eso desde javascript/ajax la complejidad que se añade al sistema es enorme, en cambio tener una solución nativa desde el navegador para reverseajax es simplemente impagable.

        No me parece mal que existan varias opciones para solucionar un problema, estoy de acuerdo contigo, de aqui a un futuro no muy lejano HTML5 y CSS3 van a responder a muchísimos problemas sin la necesidad de agregar más cosas. Eso es el punto positivo de todo esto, probablemente lenguajes como javascript evolucionen aún más para resguardar su lugar. Ya hay varios indicios de eso, por ejemplo node.js!

        Un abrazo

  2. HTML5 Responder

    Muy bueno,

    Están creando una comunidad de desarrolladores de HTML5,

    http://www.foroshtml5.com

    un saludo!

  3. HECTOR Responder

    si sabes usar bien el flash, no pesa mucho. Las imagenes en flash se pueden jalar de alguna carpeta sin necesidad de importarlas, tanbien me da pena que flash ya este a punto de morir , es mas he oido que el mismo adoba ya no tiene un departamento que le de soporte a flahs-para moviles. desde mi punta de vista el flash quedara como la mejor plataforma multimedia. No toda la multimedia se hace en web.

  4. Nahuel Responder

    La magia de flash empujo a HTML5 en gran parte inspiradora, a la hora de imaginar lo que se puede lograr hoy en dia con CSS3 solamente… sobre todo con las funciones que integro. Soñaba el momento en que no tenga que ver paginas que no molesten mi pc o mi navegador, sobre todo por tener una pc bastante floja y una conexion bastante mala.
    Pensar que CSS hoy logra estos puntos altos, de ser un codigo simple y lograr buenisimos resultados y encontrar de todo tipo de informacion disponible, es casi tan buena como saber que saca a una empresa como flash, con todos sus derechos reservados, del mercado! jajaja

  5. Miguel Ruiz Responder

    Gran post!

    ¿Conocéis algún programa tipo Adobe Edge, para hacer animaciones en HTML5?

  6. Antonio dela rosa Responder

    Llevo realizando paginas web en México desde 1996. htm, bmp y gif. ya pase por todos los formatos. Les voy a contar un secreto, pero no lo divulgen….el secreto está en las bases…así de simple, ¿ Ustedes pueden garantizarle a un cliente que su pagina web es 100% visible en cualquier sistema, en cualquier dispositivo y en cualquier explorador? ¿sin que le aparezcan rayas negras ni se descuadren sus contenidos? esa es la clave…suerte

Realizar un comentario