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

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

Comentarios: 5

  1. Oscar_hidro28/6/12

    Pues fruto del duende de las serendipias aqui me encuentro, encontrando tu blog, haciéndome visitante asiduo de tus publicaciones. Sigue así y mucho éxito en el futuro

    ResponderEliminar
  2. Whoa, crazy. I came up with the exact same technique just two days ago. Do you know of anyone else using it?

    http://codepen.io/scottkellum/pen/recursive-css/

    ResponderEliminar
  3. Hola Devo:
    No. No sabía de nadie más.
    Espero poder ver tu enlace más tarde, porque en chrome no carga la página ahora.
    Gracias por tu comentario

    *********************

    No. I didnt know of anyone else.
    I hope to see your link later, because chrome doesnt load the page now.
    Thanks for your comment´.

    ResponderEliminar
  4. furoya28/7/12

    Creo que debí pasar antes, pero como decía mi amigo Tito Livio "Mejor tarde, que nunca".

    Gracias por acordarte. Lo que menos me imaginé es que pudiera hacerse un loop CSS para crear espirales.

    ResponderEliminar
  5. Anónimo2/12/12

    cua cua cua


    Increíble.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap