Cicadients: metamorfosis del "Cicada Principle" al puro Css 23.6.12
Cicadients: metamorfosis del "Cicada Principle" al puro Css
Hace algo más de un año, Alex Walker publicaba en designfestival el artículo the Cicada Principle (Nota 1 ↓)
A mi me sedujo la idea desde el mismo momento que la conocí:
Por su originalidad y sencillez y por el potencial que encerraba. Toda su fuerza la demostraría posteriormente con multitud de ejemplos.
The Cicada Principle.
Resumiendo: El "Principio de la Cigarra" es una técnica para generar, con pocas y pequeñas imágenes, patrones de fondos (backgrounds) con intervalos de repetición enormes en comparación con las imágenes que lo integran, pues la anchura del paño creado es el producto de multiplicar las anchuras de las imágenes que lo forman. Tamaños que como ves son números primos.
Por ejemplo, si tienes tres imágenes de 3, 5 y 7 px respectivamente, la anchura del paño generado es 3x5x7 = 105px.
Bueno, quizás pienses que no es tanto. Vale. Ahora aumentemos un poco sus tamaños, como las de la imagen de abajo de 29px, 37px y 53px:
Y que las aplicas como fondo del <html>
html {
padding:0;
margin:0;
height: 100%;
background-image: url(29-a.png),url(37-a.png), url(53-a.png);
}
Pues algo tan sencillo y de tan poco peso (menos de 7kb en total) da como resultado un paño de 56.869px de ancho antes de volverse a repetirse el patrón generado tal como ves en la imagen de la derecha.
A ello súmale el trabajo si tuvieses que realizar lo mismo con cualquier editor de imágenes.
Para que lo veas mejor, aquí tienes toda una legión de playmobil lograda con 2 imágenes para los fondos de color, 2 para las piernas, 2 para los torsos y otras 2 para las cabezas. Total 8 imágenes.
Puedes ver algunas de las mejores realizaciones aquí.
Y la galería de los ejemplos aquí.
Cicadients por Eric A. Meyer
La metamorfosis del Principio de la Cigarra Css
¿Cuál podría ser la evolución natural del "Cicada Principle" en el mundo de los estilos Css?
Si has pensado en prescindir de las imágenes .png, ¡premio!. Es lo mismo que ya ha hecho Eric Meyer.
Cicadients sólo es la conjunción del "Cicada principle" y los gradientes css. Esto es, allí donde en la cigarra se declara un .png, el cicadient la sustituye por un gradiente css.
Las ventajas de uno frente al otro son 2: se reduce aún más el peso y las peticiones al servidor.
En el ejemplo del telón de terciopelo lo reduce a 2.81Kb el css, prefijos incluidos, frente a los ~23Kb de las imágenes. Y el resultado no difiere tanto.
Lea Verou
Una realización que Lea Verou tiene en su página utilizando esta técnica:
Nota 1↑: El nombre de esta técnica, "Cicada Principle" o "Principio/regla de la Cigarra", que la explica el autor, se debe al ciclo de vida de estos insectos. Las ninfas emergen de la tierra cada 7, 13 ó 17 años (depende de la especie), todos primos. Como sus depredadores tienen un ciclo vital mucho más corto (2-3 años), no pueden programar su boom natalicio con ellas, pues la coincidencia se realiza en periodos muy prolongados de tiempo.
Además de cantarinas, listas.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Muy interesante el articulo.
ResponderEliminarSé que mi comentario no aporta nada, pero siempre es bueno dar las gracias cuando se aprende algo.