Cuando HTML5 era más HTML5 que nunca…¡bucles for en CSS3…Saas!

¿Quieres novedades? ¿Te interesa el HTML5?

Cuando escribíamos nuestras hojas de estilos para separar…eso, nuestros estilos: colores, fuentes, anchos, altos, alineaciones….llegaron los @keyframes para además añadir movimiento a nuestro HTML…pero no se quedó ahí la cosa, es entonces cuando apareció el bucle for y las variables para hacerlo más bonito todavía:

HTML->

.scene
  -(2..15).each do |i|
    .assembly
      .strip
      .roller
        -(1..i).each do |j|
          .side
CSS->
$ri: 2em;
$c: cyan;
html, body { height: 100%; }
body {
  overflow: hidden;
  margin: 0;
  perspective: 10em;
  perspective-origin: 50% 0%;
  background: white;
  color: $c;
}
.scene {
  &, * {
    box-sizing: border-box;
    position: absolute;
    top: 50%; left: 50%;
    transform-style: preserve-3d;
  }
  transform: translate(4em, 10em) rotateX(75deg) rotate(-22.5deg)
}
.assembly {
  @for $i from 1 to 15 {
    $ca: 360deg/($i + 1);
    $l: 2*$ri*(if($i != 1, tan($ca/2), 2));
    $rc: $ri/(if($i != 1, cos($ca/2), .5));
    &:nth-child(#{$i}) {
      transform: translate(0, -3.5*$i*$ri);
      animation: slide#{$i} 1s ease-in-out infinite;
      @at-root {
        @keyframes slide#{$i} {
          to { transform: translate($l, -3.5*$i*$ri); }
        }
      }
      .strip { background-size: $l 100%; }
      .roller {
        transform: rotateY($ca/2) translateZ($rc) rotateY(-$ca/2);
        animation: inherit;
        animation-name: roll#{$i};
        @at-root {
          @keyframes roll#{$i} {
            to {
              transform: rotateY(-$ca/2) 
                         translateZ($rc) rotateY(-$ca/2);
            }
          }
        }
      }
      .side {
        margin: –$ri (-$l/2);
        width: $l; height: 2*$ri;
        @for $j from 0 to $i + 1
         {
          &:nth-child(#{$j + 1})
         {
            transform: rotateY($j*$ca) 
                       if($i != 1, translateZ(-$ri), ());
          }
        }
      }
    }
  }
}
.strip {
  margin: –$ri -1px;
  width: 120em; height: 2*$ri;
  border: solid .125em $c;
  background-image:
    linear-gradient(90deg, $c .125em, transparent 0);
  background-position: -1px 0;
}
.side {
  border: solid .125em $c;
  &:before, &:after {
    position: absolute;
    left: 0;
    width: inherit; height: .125em;
    background: $c;
    transform: rotateX(90deg);
    content: ”;
  }
  &:before { top: -1px; }
  &:after { bottom: -1px; }
}

Para verlo en acción:

http://codepen.io/thebabydino/full/lhKjt

¡Que aproveche!

Anuncios

Acerca de mitch

Quiero compartir mis experiencias y mis humildes conocimientos
Esta entrada fue publicada en HTML5, Javascript, Otros, website. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s