Web X.1

Nuevas tecnologías, nuevas posibilidades y por ello vamos ha realizar un pequeño ejemplo con HTML5 y CSS3 y ver así que cosas podemos llegar a implementar, y que con CSS2 era impensable.

El pequeño ejemplo consistirá en realizar un cubo en 3D con CSS. Las 3 caras del cubo se compondrán en nuestro caso, del logo corporativo, “como nó!!    ;)  , labor de marketing”.

Para empezar, necesitamos 3 imágenes separadas, cada imagen de 100 x 100 píxeles, degradado de claro a oscuro. Después añade dos píxeles de borde, que en un futuro nos servirá como el borde del propio cubo.

Código CSS

Ahora que tenemos nuestras imágenes, vamos a empezar a crear el código CSS.

.cube {

position: absolute;

                top: 100px;

                left: 100px;

}

El contenedor de nuestro cubo se llamará .cube, no necesitamos aplicarle altura y anchura, pero es recomendable aplicarle posición absoluta.

.face {

                position: relative;

                width: 100px;

                height: 100px;

                overflow: hidden;

}

Después necesitamos crear una característica global para cada cara de nuestro cubo. En esta parte si será necesario utilizar el posicionamiento absoluto. Indicaremos una altura y anchura de 100 píxeles, y ocultaremos el overflow para que si las imágenes son más largas, no destruyan el cubo.

.top {

                top: 0;

                left: 89px;

                background: #ffffff;

                -webkit-transform: rotate(-45deg) skew(15deg, 15deg);

                -moz-transform: rotate(-45deg) skew(15deg, 15deg);

}

Ahora posicionaremos la imagen superior del cubo con top y left. Después añadiremos el color de fondo, que no es necesario pero queda mejor. La siguiente parte seguramente sea la más importante, la nueva propiedad CSS3 transform. Muchos navegadores ya soportan esta propiedad, por lo que no tendremos problemas. Necesitamos incluir dos líneas extra para navegadores basados en webkit y para Firefox con el objetivo de que se muestre correctamente. Rotaremos el cubo 45º en el sentido de las agujas del reloj, 15º en posición oblicua para hacerlo coincidir con las otras caras del cubo.

.left {

                top: 77px;

                left: 44px;

                background: #ffffff;

                color: #ffffff;

                -webkit-transform: rotate(15deg) skew(15deg, 15deg);

                -moz-transform: rotate(15deg) skew(15deg, 15deg);

}

Después debemos construir un espejo de la cara izquierda con la derecha, es decir, las mimas propiedades de forma invertida.

.right {

                top: -115px;

                left: 145px;

                background: #ffffff;

                color: #ffffff;

                -webkit-transform: rotate(-15deg) skew(15deg, -15deg);

                -moz-transform: rotate(-15deg) skew(-15deg, -15deg);

}

Código HTML

La parte de HTML es la más sencilla, el formato sería así:

<div class="cube">

<div class="face top">

            <img src=".../WPN-P.png" height="100" width="100">

        </div>

<div class="face left">

            <img src=".../WPN-W.png" height="100" width="100">

        </div>

<div class="face right">

            <img src=".../WPN-N.png" height="100" width="100">

        </div>

</div>

Con HTML estructuraremos las imágenes. El ejemplo final sería así: