Experiencia sobre Bob Esponja hecho con CSS y análisis sobre el futuro de las ilustraciones en la web con CSS3 y HTML5
Desde la llegada de nuevas propiedades CSS3 que nos permiten cambiar la forma de nuestros elementos como border-radius la forma en la que podemos crear sitios web ha cambiado mucho, ahora los sitios web no son solo cuadros y rectángulos sino que ahora podemos crear figuras complejas, desde círculos hasta triángulos. Esto es increible! Estamos en la evolución de CSS, como todos sabemos la idea de CSS es manipular elementos de un sitio web, pero en estos momentos toda esta idea esta cambiando, la tendencia de CSS esta cambiando de poder manipular elementos de un sitio web a poder realizar creaciones completamente geniales.
Esto nos abre a un mundo web nuevo y lleno de diversas posibilidades con las que podemos jugar y obtener resultados muy creativos y divertidos, como poder dibujar con CSS, asi es, poder dibujar caricaturas, ilustraciones y demás con solo CSS.
Bob Esponja hecho con CSS
En un principio todo esto de las posibilidades de poder crear, dibujar con formas se veía muy apartado, pero ahora esta mas cerca que nunca. Así que para adentrarme un poco en la corriente evolutiva de CSS decidí hacer mi propio dibujo y asi poder comprobar las inmensas posibilidades que tenemos para crear con CSS. Decidí hacer la famosa caricatura Americana llamada Bob Esponja.
Puedes ver la caricatura en vivo desde este link: Bob Esponja hecho con CSS
La razón por la que decidí hacer a «Bob Esponja» es porque es muy sencillo de hacer, los elementos aunque en principio pueden parecer complejos no lo son, simplemente tienes que conocer algunos truquitos de css, pero es muy fácil.
Esta caricatura esta completamente hecha con CSS, sin imágenes, sin Javascript, puro CSS. Aunque aun no es común entrar a un sitio web y ver un dibujo hecho con CSS si que poco a poco podemos ver mas trabajos. Hacer cosas asi en CSS tiene muchas ventajas, para empezar no necesitas cargar imágenes y esto hace que el sitio web cargue mucho mas rápido, en segundo lugar puedes controlar el aspecto total que tiene tu ilustración, dibujo, etc. Puedes cambiar absolutamente todo, es CSS, sabemos como funciona, escribimos un nuevo color Hexadecimal y tenemos un nuevo resultado, pondré el ejemplo de mi dibujo para contarte algunas de las cosas que podría hacer.
Podemos desde cambiarle el color de cada elemento del cuerpo de «Bob Esponja» hasta hacer que parpadeen sus ojos, incluso algo mas avanzado a lo cual podría aventurarme seria poder animar nuestra caricatura y hacer que moviera los brazos o incluso que caminara!
En mi dibujo solo hice el torso de Bob Esponja ya que hacer los brazos y pies aunque es posible si que es mas avanzado ya que si recordamos la forma en la que se hacen estas ilustraciones es por medio de formas geométricas acomodadas en cada lugar.
Otro increible ejemplo de ilustraciones realizadas con CSS es el grandioso trabajo realizado por Chris Pattle quien se dio a la tara de replicar los personajes de la serie de televisión llamada «Los Simpsons» todo con solo CSS.
Ver los Sipmsons creados con CSS: http://pattle.github.io/simpsons-in-css/
El futuro de esta técnica
Poder realizar este tipo de cosas con CSS si que es complicado, sobre todo por el tiempo en que se tarda poder hacerlo, el dibujo que te he mostrado arriba en el post me tardo aproximadamente 4 horas, si lo hubiera hecho en Adobe Ilustrator me hubiera tardado quizás 10 minutos como máximo, el futuro no esta en crear estas ilustraciones «a mano» escribiendo todo el código HTML y CSS.
El futuro esta en el software que nos permitirá mediante una interfaz gráfica crear los elementos y poder exportar el código HTML y CSS, esto si que seria muy interesante, ya hemos visto programas como Adobe Edge que nos permiten hacer sitios web mediante una interfaz y exportar a HTML, asi que no es imposible, esto llegara y no solo serán programas para ilustración, podremos animar nuestras ilustraciones muy fácil. Esto seria el remplazo de flash directamente! (Recordemos que con HTML5 y CSS3 este remplazo ya ocurrió, pero me refiero al software como tal).
Anímate!
Seria genial poder ver trabajos hechos por ustedes haciendo caricaturas o ilustraciones con CSS, si has hecho alguna seria genial poder verla, incluso la podemos agregar a este post para que todo mundo vea el trabajo que has realizado! ( No nos olvidamos de dar créditos ).
Pronto el tutorial sobre como realizar este dibujo de Bob Esponja.
Aquí esta el tutorial para los interesados:
https://www.falconmasters.com/web-design/tutorial-como-dibujar-bob-esponja-css3/
[…] ya unos artículos atrás en el articulo llamado Bob Esponja hecho con CSS y el futuro de las ilustraciones, platicaba de mi experiencia realizando el personaje de caricatura Bob Esponja, te platicaba sobre […]
como este!!by Gabriel’DS