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: