CSS3 sin límites: recrean un perro Husky animado

CSS3 sin límites: recrean un perro Husky animado

David Khourshid es un desarrollador web que tiene cierta pasión por el Javascript y las hojas de estilo. Tal es así que hace unas semanas creó y compartió con la comunidad a través de GitHub su última creación: un perro Husky animado desarrollado íntegramente mediante CSS3 y HTML5. Increíble, ¿verdad? El perrete, al que han bautizado Alex, no es precisamente algo sencillo de desarrollar. Te dejamos el código y después comentamos.

Aquí el HTML:

Y a continuación el (amplio) CSS:

Destripando el CSS3 y el HTML

Si empezamos por la hoja de estilos, lo primero que nos llama la atención es lo extensa que resulta. Tal es así que el creador de Alex utilizó SCSS para no volverse loco y mantener una estructura que escalase mucho mejor el gran tamaño del fichero así como ahorrarse muchísimas repeticiones. Aquí os hemos puesto la versión procesada para que la podáis ver en su totalidad, pero las ventajas que suponen tanto SCSS como LESS quedan patentes en este trabajo.

Una vez que dejamos de lado la cantidad de líneas que forman este CSS y entramos en el detalle, vemos que una gran mayoría del código hace referencia a la propiedad  transform, puesto que será la instrucción que da movimiento a cada una de las partes de este simpático Husky y es ahí donde reside la complejidad de este proyecto, en todos esos translate y scale que hay escritos y organizados por partes del cuerpo del can y que ocupan la primera parte de la hoja. Después, son clases “tradicionales” que dan la forma y los colores de este perro: border-radius, backgrounds, top, left, etc.

Pasando al HTML nos encontramos primero una pequeña sorpresa, y es que la gran parte son simples capas anidadas que, gracias al CSS3 y a la gran creatividad de Khourshid, dan la forma a todo el perro. Después tenemos algo que nos sonará quizás un poco menos si no estamos muy al tanto de las animaciones en HTML; el uso de una de las etiquetas más simbólicas del HTML5: el <svg>. Esta etiqueta hace referencia a las siglas (en inglés) de Vectores Gráficos Escalables y su función es la de definir y crear filtros en los elementos gráficos de Alex, pero en este caso el creador lo tiene desactivados mediante el style=”display:none;” que aparece en la etiqueta.

Para ver en acción a Alex, el Husky, solo tenéis que hacer click aquí, donde además podréis toquetear el código para jugar un poco con nuestro amigo.

¡Compártelo!

Comentario (1)

  • Enrique Reply

    Genial

    15 junio, 2016 at 4:32 am

Deja un comentario

Tu dirección de email no será publicada.