Un hombre que anda gracias a CSS:
Está claro que con CSS se pueden hacer maravillas, existen un montón de usos útiles y demostraciones que podemos realizar con CSS. Andrew-Hoyer nos presenta una creación suya, un experimento, en el que se puede comprobar cómo se mueve un hombre (que casualmente es él) gracias a CSS3, nada de Javascript.
Aunque existen fallos en la versión 4.2.1 del iOS, es muy curioso verlo funcionar en un dispositivo Android, iPhone, iPod o iPad. Podemos verlo tanto en versión canvas como en imagen. A continuación os explicaré más detalladamente cómo lo ha creado, resulta curioso ver la imaginación de la mente, y lo flexible que puede resultar CSS, con usos inimaginables.
Se ha creado usando animaciones CSS (-webkit-animation), transformaciones CSS (-webkit-transformations) y HTML simple. Se puede ver correctamente sólo con navegadores basados en WebKit (Safari o Chrome), pero, los que no tengan este navegador, pueden ver un vídeo:
La idea de su estructura es aplicar CSS transformations a un elemento que también lo aplica a sus “hijos”. El código HTML es así:
<div class="torso">
<div class="left bicep">
<div class="left forearm"></div>
</div> <!--brazo izquierdo -->
<div class="right bicep">
<div class="right forearm"></div>
</div> <!-- brazo derecho -->
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div> <!-- pierna izquierda -->
<div class="right thigh">
<div class="right shin">
<div class="right foot">
<div class="right toes"></div>
</div>
</div>
</div> <!--pierna derecha -->
</div> <!-- torso -->
Se aplica la propiedad z-index para mostrar el brazo izquierdo al igual que las piernas detrás del torso además de mover las espinillas y los antebrazos detrás de los muslos y los bíceps, respectivamente. Tuvo algunos problemas con esta propiedad y webkit, ya que cuando quería animarlo, se destruía la estructura, así que añadió unas variaciones, que no hizo el código más semántico, pero resolvió todos los problemas anteriores:
<div class='me'>
<div class="torso">
<div class="left leg">
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div>
</div> <!-- pierna izquierda -->
<div class="right leg">
<div class="right thigh">
<div class="right shin">
<div class="right foot">
<div class="right toes"></div>
</div>
</div>
</div>
</div> <!-- pierna derecha -->
<div class="left arm">
<div class="left bicep">
<div class="left forearm"></div>
</div>
</div> <!-- brazo izquierdo -->
<div class="right arm">
<div class="right bicep">
<div class="right forearm"></div>
</div>
</div> <!-- brazo derecho -->
</div> <!-- torso -->
</div> <!-- yo -->
Sólo cambió dos cosas, lo primero fue envolver cada miembro en otro div, que era la solución principal. Después se trasladaron los brazos por encima de las piernas.
Para las animaciones, se hicieron animaciones separadas de la parte izquierda y derecha, usando únicamente los valores 0%, 25%, 50%, 75%, 100%, para evitar cálculos y complicaciones.
Abajo del ejemplo, como podrás comprobar, hay dos enlaces que ocultan y muestras los bordes del elemento. Uno es un enlace “#canvas”, y el otro, “#”. Aprovechando el pseudo-selector, Andy añadió unas cuantas líneas de CSS, quedando un curioso efecto de silueta:
<style type="text/css" media="screen">
#canvas:target div:not(.overlay) {
border: 1px solid black;
}
#canvas:target div.me div{
background: rgba(255, 255, 255, 0.25);
}
</style>
<p style='text-align: center'>
<a href='#canvas'>Show</a> /
<a href="#">Hide</a>
Element Borders.
</p>
El código final sería este:
<style type=”text/css” media=”screen”>
#canvas {
height: 600px;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
#canvas div {
position: absolute;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#canvas:target div:not(.overlay) {
border: 1px solid black;
}
#canvas:target div.me div{
background: rgba(255, 255, 255, 0.25);
}
.me {
top: 50px; left: 350px;
-webkit-animation-name: me;
}
.me, .me div {
background-repeat: no-repeat;
-webkit-animation-duration: 1750ms;
}
.torso {
width: 86px; height: 275px;
background-image: url(me/torso.png);
}
.arm {
left: 12px;
-webkit-transform-origin: 20px 10px;
}
.right.arm {
top: 93px;
-webkit-animation-name: right-bicep;
}
.left.arm {
top: 87px;
-webkit-animation-name: left-bicep;
}
.bicep {
height: 124px; width: 51px;
}
.right.bicep { background-image: url(me/right-bicep.png); }
.left.bicep { background-image: url(me/left-bicep.png); }
.forearm {
top: 108px; left: 14px;
width: 36px; height: 121px;
-webkit-transform-origin: 3px 7px;
}
.right.forearm {
background-image: url(me/right-forearm.png);
-webkit-animation-name: right-forearm;
}
.left.forearm {
background-image: url(me/left-forearm.png);
-webkit-animation-name: left-forearm;
}
.leg {
left: 6px;
-webkit-transform-origin: 30px 20px;
-webkit-animation-name: thigh;
}
.right.leg {
top: 235px;
-webkit-animation-name: right-thigh;
}
.left.leg {
top: 225px;
-webkit-animation-name: left-thigh;
}
.thigh {
width: 70px; height: 145px;
}
.left.thigh { background-image: url(me/left-thigh.png); }
.right.thigh { background-image: url(me/right-thigh.png); }
.shin {
top: 115px;
width: 50px; height: 170px;
background-image: url(me/shin.png);
-webkit-transform-origin: 30px 25px;
}
.right.shin { -webkit-animation-name: right-shin; }
.left.shin { -webkit-animation-name: left-shin; }
.foot {
top: 155px; left: 2px;
width: 67px; height: 34px;
background-image: url(me/foot.png);
-webkit-transform-origin: 0 50%;
}
.right.foot { -webkit-animation-name: right-foot; }
.left.foot { -webkit-animation-name: left-foot; }
.toes {
top: 9px; left: 66px;
width: 28px; height: 25px;
background-image: url(me/toes.png);
-webkit-transform-origin: 0% 100%;
}
.right.toes { -webkit-animation-name: right-toes; }
.left.toes { -webkit-animation-name: left-toes; }
.shadow {
width: 200px; height: 70px;
left: 270px; bottom: 5px;
background-image: url(misc/shadow.png);
-webkit-animation-name: shadow;
}
/* setting proper z-indexes so that limbs show up correctly */
div.right.arm { z-index: 1; }
div.left.arm { z-index: -3; }
div.arm > div.bicep > div.forearm { z-index: -1; }
div.right.leg { z-index: -1; }
div.left.leg { z-index: -2; }
div.leg > div.thigh > div.shin { z-index: -1; }
/* animations */
@-webkit-keyframes me {
0% { -webkit-transform: rotate(5deg) translate( 5px, 0px); }
25% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }
50% { -webkit-transform: rotate(5deg) translate( 5px, 0px); }
75% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }
100% { -webkit-transform: rotate(5deg) translate( 5px, 0px); }
}
@-webkit-keyframes right-bicep {
0% { -webkit-transform: rotate(26deg); }
50% { -webkit-transform: rotate(-20deg); }
100% { -webkit-transform: rotate(26deg); }
}
@-webkit-keyframes left-bicep {
0% { -webkit-transform: rotate(-20deg); }
50% { -webkit-transform: rotate(26deg); }
100% { -webkit-transform: rotate(-20deg); }
}
@-webkit-keyframes right-forearm {
0% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-45deg); }
100% { -webkit-transform: rotate(-10deg); }
}
@-webkit-keyframes left-forearm {
0% { -webkit-transform: rotate(-45deg); }
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-45deg); }
}
@-webkit-keyframes right-thigh {
0% { -webkit-transform: rotate(-45deg); }
50% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(-45deg); }
}
@-webkit-keyframes left-thigh {
0% { -webkit-transform: rotate(10deg); }
50% { -webkit-transform: rotate(-45deg); }
100% { -webkit-transform: rotate(10deg); }
}
@-webkit-keyframes right-shin {
0% { -webkit-transform: rotate(30deg); }
25% { -webkit-transform: rotate(20deg); }
50% { -webkit-transform: rotate(20deg); }
75% { -webkit-transform: rotate(85deg); }
100% { -webkit-transform: rotate(30deg); }
}
@-webkit-keyframes left-shin {
0% { -webkit-transform: rotate(20deg); }
25% { -webkit-transform: rotate(85deg); }
50% { -webkit-transform: rotate(30deg); }
75% { -webkit-transform: rotate(20deg); }
100% { -webkit-transform: rotate(20deg); }
}
@-webkit-keyframes right-foot {
0% { -webkit-transform: rotate(-5deg); }
25% { -webkit-transform: rotate(-7deg); }
50% { -webkit-transform: rotate(-16deg); }
75% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-5deg); }
}
@-webkit-keyframes left-foot {
0% { -webkit-transform: rotate(-16deg); }
25% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-5deg); }
75% { -webkit-transform: rotate(-7deg); }
100% { -webkit-transform: rotate(-16deg); }
}
@-webkit-keyframes right-toes {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-10deg); }
75% { -webkit-transform: rotate(-25deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-webkit-keyframes left-toes {
0% { -webkit-transform: rotate(-10deg); }
25% { -webkit-transform: rotate(-25deg); }
50% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-10deg); }
}
@-webkit-keyframes shadow {
0% { opacity: 1; }
25% { opacity: 0.75; }
50% { opacity: 1; }
75% { opacity: 0.75; }
100% { opacity: 1; }
}
.overlay {
width: 100%; height: 100%;
background: url(misc/gradient-left.png) repeat-y top left,
url(misc/gradient-right.png) repeat-y top right;
}
.sky div {
background-repeat: no-repeat;
-webkit-animation-name: prop-1200;
}
.cloud-1, .cloud-2 {
width: 82px; height: 90px;
background-image: url(clouds/1.png);
-webkit-animation-duration: 120s;
}
.cloud-3, .cloud-4 {
top: 70px;
width: 159px; height: 90px;
background-image: url(clouds/2.png);
-webkit-animation-duration: 80s;
}
.cloud-5, .cloud-6 {
top: 30px;
width: 287px; height: 62px;
background-image: url(clouds/3.png);
-webkit-animation-duration: 140s;
}
.cloud-7, .cloud-8 {
top: 100px;
width: 94px; height: 81px;
background-image: url(clouds/4.png);
-webkit-animation-duration: 90s;
}
.cloud-1 { left: 0px; }
.cloud-2 { left: 1200px; }
.cloud-3 { left: 250px; }
.cloud-4 { left: 1450px; }
.cloud-5 { left: 500px; }
.cloud-6 { left: 1700px; }
.cloud-7 { left: 950px; }
.cloud-8 { left: 2150px; }
.horizon {
top: 350px;
width: 1800px; height: 50px;
background: url(misc/horizon.png) repeat-x;
-webkit-animation-name: prop-600;
-webkit-animation-duration: 40s;
}
.ground div {
background-repeat: no-repeat;
-webkit-animation-name: prop-2000;
}
.sign-all-css {
width: 160px; height: 188px;
top: 325px; left: 1600px;
background-image: url(signs/all-css.png);
-webkit-animation-duration: 35s;
}
.sign-lots-of-divs {
width: 102px; height: 120px;
top: 345px; left: 1150px;
background-image: url(signs/lots-of-divs.png);
-webkit-animation-duration: 56s;
}
.sign-no-js {
width: 65px; height: 77px;
top: 348px; left: 1150px;
background-image: url(signs/no-js.png);
-webkit-animation-duration: 71s;
}
.sign-best {
width: 43px; height: 50px;
top: 350px; left: 1000px;
background-image: url(signs/best.png);
-webkit-animation-duration: 95s;
}
@-webkit-keyframes prop-600 {
0% { -webkit-transform: translateX(0px); }
100% { -webkit-transform: translateX(-600px); }
}
@-webkit-keyframes prop-1200 {
0% { -webkit-transform: translateX(0px); }
100% { -webkit-transform: translateX(-1200px); }
}
@-webkit-keyframes prop-2000 {
0% { -webkit-transform: translateX(0px); }
100% { -webkit-transform: translateX(-2000px); }
}
</style>
<div id=”canvas”>
<div class=”sky”>
<div class=”cloud-1″></div>
<div class=”cloud-2″></div>
<div class=”cloud-3″></div>
<div class=”cloud-4″></div>
<div class=”cloud-5″></div>
<div class=”cloud-6″></div>
<div class=”cloud-7″></div>
<div class=”cloud-8″></div>
</div>
<div class=”horizon”></div>
<div class=”ground”>
<div class=”sign-best”></div>
<div class=”sign-no-js”></div>
<div class=”sign-lots-of-divs”></div>
<div class=”sign-all-css”></div>
</div>
<!– skeleton and shadow –>
<div class=’shadow’></div>
<div class=’me’>
<div class=”torso”>
<div class=”left leg”>
<div class=”left thigh”>
<div class=”left shin”>
<div class=”left foot”>
<div class=”left toes”></div>
</div>
</div>
</div>
</div> <!– left leg –>
<div class=”right leg”>
<div class=”right thigh”>
<div class=”right shin”>
<div class=”right foot”>
<div class=”right toes”></div>
</div>
</div>
</div>
</div> <!– right leg –>
<div class=”left arm”>
<div class=”left bicep”>
<div class=”left forearm”></div>
</div>
</div> <!– left arm –>
<div class=”right arm”>
<div class=”right bicep”>
<div class=”right forearm”></div>
</div>
</div> <!– right arm –>
</div> <!– torso –>
</div> <!– me –>
<div class=”overlay”></div>
</div> <!– canvas –>
<p style=’text-align: center’><a href=’#canvas’>Show</a> / <a href=”#”>Hide</a> Element Borders.</p>
Compartir/Guardar
Artículos relacionados
Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:
