Jugando con CSS3
Gracias a las nuevas propiedades que incorpora (o incorporará) la tercera revisión de las hojas de estilo, CSS3 para los amigos, se puede realizar sin necesidad de imágenes una gran cantidad de recursos visuales como iconos, gráficas sencillas, etc.
Esto supone una gran ventaja para los desarrolladores de interfaces, que por medio de estas nuevas reglas CSS pueden generar muchos elementos visuales sin necesidad de usar imágenes, aligerando además el tiempo de carga de las páginas web.
Tomando esas nuevas reglas como punto de partida, ya han aparecido en internet páginas que muestran las posibilidades de CSS3 generando gráficas sencillas.
Un ejemplo de esto es The Shapes of CSS, una página donde se muestra el código para generar elementos visuales sencillos como triángulos, cuadros y óvalos, llegando incluso a generar elementos algo más complejos como un corazón o el signo de infinito.
Lo más divertido es que la gente se está “picando” a la hora de hacer figuras más complejas, llegando a dibujar mediante CSS el icono de carga de Flickr, un perrito caliente, o unas gafas de sol
Yo también me he apuntado a la moda de generar gráfica compleja mediante reglas CSS3, concretamente, una versión descafeinada del logo de Instagram.
Ya que el ejercicio tiene unas cuantas líneas de código, lo he colgado en jsfiddle, un editor online de HTML, CSS y JS.
Aquí podéis ver el resultado final. El único inconveniente es que sólo funciona en Firefox.