Forma espiral con CSS. Un rulo.
Que se podría hacer con lenguaje gráfico o elementos HTML como canvas y JS. Pero el planteo es usar CSS.
Hace unas semanas escuche a mi lado una conversación de dos chicos que intentaban crear algo de lo que ya se habló en este Foro : las listas con formato personalizado.
En este caso, no eran ordenadas, sino las que tienen una misma viñeta o marcador. Pero había que hacer un rulito, no un cuadro, círculo, disco o las que vienen como estándar.
Por supuesto que hoy la única manera es agregarle una imagen al documento. A pesar de que es muy fácil implementar un método en el navegador que use caracteres elegidos por el diseñador para marcar ítems, hoy no está ni siquiera propuesto. Y es cierto que un caracter no está 'generado por el navegador' como los otros marcadores, pero al menos no habría que crear y agregar nuestros propios dibujos, porque siempre una fuente instalada tiene que encontrar.
Igual, en este caso no sé si serviría, porque lo que se pide es "un rulo", que no está en ASCII (y creo que tampoco en Unicode) .
Volviendo a la historia, cuando escuché el planteo
"—Lo que tenemos que hacer es generar una espiral con CSS ..."
tiré la lapicera contra el escritorio y como buen viejo mal'yevao que soy, mandé un
"—¡Pibe, CSS es para dar formatos; no podés agarrar un div y darle "forma de rulo"!. De última, si no podés llamar a un 'png', creá un 'svg', un 'vml' o meté ese 'png' como embed, y posicionalo al principio de cada entrada de lista. ¡Pero no podés dibujar usando estilos!."
No me discutieron. Y la verdad que hicieron mal.
Porque unas horas después volví a pensar en el asunto, y recordé que no sólo existe el ASCII-Art, sino también el CSS-Art. Y que combinando elementos con distinto formato, se puede "dibujar" practicamente cualquier cosa.
Ok. No es útil para marcadores de lista. Pero el punto es que yo defendí una posición indefendible; aunque a estos chicos no le sirva, lo que afirmé no era cierto.
De hecho, me puse a armar un ejemplo para mostrarles a modo de disculpa, y ya que estoy lo posteo aquí.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <title>RULO CSS.</title> <style type="text/css"> #rulo { position: relative; top: 0; left: 50px; border: 2px solid blue; width: 200px; height: 200px;} .arcos{ border: solid 2px black; position: absolute; } #arco0 { width:200px; height: 200px; top:0; left: 0; border-radius: 100px; border-color: transparent transparent transparent black; } #arco1 { width:180px; height: 180px; top:6px; left: 0; border-radius: 90px; border-color: black transparent transparent transparent; } #arco2 { width:160px; height: 160px; top:9px; left: 17px; border-radius: 80px; border-color: transparent black transparent transparent; } #arco3 { width:140px; height: 140px; top:26px; left: 34px; border-radius: 70px; border-color: transparent transparent black transparent; } #arco4 { width:120px; height: 120px; top: 43px; left: 37px; border-radius: 60px; border-color: transparent transparent transparent black; } #arco5 { width:100px; height: 100px; top: 46px; left: 40px; border-radius: 50px; border-color: black transparent transparent transparent; } #arco6 { width:80px; height: 80px; top: 49px; left: 57px; border-radius: 40px; border-color: transparent black transparent transparent; } #arco7 { width:60px; height: 60px; top: 66px; left: 74px; border-radius: 30px; border-color: transparent transparent black transparent; } #arco8 { width:40px; height: 40px; top: 84px; left: 77px; border-radius: 30px; border-color: transparent transparent transparent black; } #arco9 { width:20px; height: 20px; top: 87px; left: 80px; border-radius: 30px; border-color: black transparent transparent transparent; } #arco10 { width:10px; height: 10px; top: 88px; left: 88px; border-radius: 30px; border-color: transparent black transparent transparent; } #arco11 { width:5px; height: 5px; top: 92px; left: 92px; border-radius: 30px; border-color: transparent transparent black transparent; } </style> </head> <body> <h2>Espiral "dibujada" con CSS-Art. (Chrome, Opera, Firefox)</h2> <div id="rulo"> <div class="arcos" id="arco0"></div> <div class="arcos" id="arco1"></div> <div class="arcos" id="arco2"></div> <div class="arcos" id="arco3"></div> <div class="arcos" id="arco4"></div> <div class="arcos" id="arco5"></div> <div class="arcos" id="arco6"></div> <div class="arcos" id="arco7"></div> <div class="arcos" id="arco8"></div> <div class="arcos" id="arco9"></div> <div class="arcos" id="arco10"></div> <div class="arcos" id="arco11"></div> </div> <p>El borde azul marca el tamaño que debería tener el círculo para el arco de mayor radio. </p> </body> </html>
Ni lo prueben en Internet Explorer, que todavía no anda.
Y seguramente se puede meter más de un arco por div, pero para que se entienda como funciona los hice uno a uno sin escript para los cálculos (porque después me andan recordando que éste no es el Foro de Javascript).
Viñetas personalizables.
usando css y viñetas
viñeta en listas de definicion
P.D. : estuve buscando en Unicode más formas enruladas, y las pongo aquí por si a alguien le sirve
ɕ ce con rizo.
ҩҨ ha abkhasiana.
פ pe hebrea.
❛❜ comillas floridas.
ﯠ kirghiz árabe.
ﻫ heh árabe.
font-family: unicode;
