soy Kseso y esto EsCSS

Espiral logarítmica puro Css. Logarithmic spiral pure Css

Espiral logarítmica puro Css. Logarithmic spiral pure Css

·Por Kseso ✎ 5

Hace un tiempo, un usuario de un foro, @Furoya, dejó caer, como quien no quiere la cosa, que estaba a la espera de ver una espiral realizada en puro Css, buscando entre sus muchos post, veo que ya había realizado una aproximación. Laboriosa pues tenía que calcular cada propiedad de cada arco individualmente.
Y así quedó la cosa.

Pues fruto del duende de las serendipias (encontrar algo mientras buscas otra cosa) hoy, gracias a un pequeño error me surgió el inicio de una espiral.
A partir de él se encendió la lucecita y sólo fue cuestión de pulir la idea y ajustar un par de valores para lograr espirales sólo con Css

Espiral en puro Css

Primero el ejemplo y después el comentario del código. Si te parece bien:

Sencillo y visualmente perfecta.

Espiral css: marcado html

El etiquetado html es símplemente una serie de div anidados. El número de ellos es el número de segmentos que conforman la espiral.

<div class="espiral"> <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div> </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div>

Espiral Css: los estilos

Vamos con la magia. Los estilos son realmente sencillos y muy pocos. Tan sólo dos reglas Css. Al estar los tamaños definidos en la unidad em no se necesita estilizar cada div que forma la espiral. Sin prefijos privativos:

.espiral div, .espiral { position: absolute; right: -1em; top: -1px; width: 1em; height: 1em; font-size: 0.8em; border-top: 1px solid #666690; border-left: 1px solid #666690; border-radius: 100% 0 0 0; transform: rotate(90deg); box-sizing: border-box; } .espiral { font-size: 120px; position: relative; right: 0; }

El tamaño y radio viene dado por el valor de font-size de .espiral complementado por la misma propiedad de .espiral div
Un valor de 1em en los div´s interiores da un círculo. Valores inferiores o superiores cambian el radio de giro (antihoraria u horaria).
Prueba a modificar los valores para ver cómo cambia la apariencia.
La curvatura se consigue aplicando border-radius
El grosor del trazo y color de la espiral se controla mediante border-top y border-left
Y el que no haya descuadres se ajusta con la propiedad top Estas últimas propiedades deben tener los mismos lados como destinatarios y el grosor ser el mismo valor que el de posicionado (top). Lógico.
Lo que ya no menciono es el hecho del porqué giro los div´s

Variaciones en la espiral Css:

Sólo tienes que variar un poco los valores de esas propiedades para divertirte un rato jugando con css.

Sólo tienes que encontrar las diferencias con el anterior

.espiral2 div, .espiral2 { position: absolute; right: -1em; top: -3px; width: 1em; height: 1em; font-size: 1.15em; border-top: 3px solid red; border-left: 3px solid red; border-radius: 100% 0 0 0; transform: rotate(90deg); box-sizing: border-box; } .espiral2 { font-size: 10px; position: relative; right: 0; }

Y ahora mira fíjamente...

y cuando cuente tres serás un pato, y a la pata coja dirás cua cua cua

Más figuras o shapes puro Css

Puedes ver otras figuras en puro css en esta entrada
En esta otra huevos Css
Packman o Comecocos en puro Css
Y basada en la espiral: el hipnosapo

avatar del Editor del blog

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 Don Kseso Kseso