CSS3 es, de largo, la versión de CSS que más opciones nos deja para personalizar y maquetar nuestro sitio web de forma cómoda y sencilla. Los chicos de InspectElement han desarrollado algunos ejemplos que simulan la realidad, como pueden ser Animación de DVD, Polaroids, Giro de imagen y botones presionados, demostrando así el potencial de CSS3. A continuación os explicaré cada uno de los ejemplos, con un enlace de demostración que únicamente podrá ser correctamente visualizado en las versiones más recientes de Safari, Chrome y Firefox.

Polaroids

Las imágenes Polaroids han sido mucho tiempo iconos de fotografía (y siguen siendo) debido a su toque exclusivo, y a la rapidez con que muestra las fotografías. Podríamos realizar este efecto con imágenes, pero con CSS3 queda mucho mejor, más limpio y más novedoso, ¿no os parece? Gracias a la propiedad drop-shadow y las transiciones, podrás crear sombra a la imagen.

Código CSS

* { padding: 0; margin: 0; text-decoration: none; }
body { background: #cacaca; text-align: center; margin-top: 25px; color: #5f5f5f; }
h1 { font-family: Helvetica; margin-bottom: 25px; }
/* Polaroid CSS */
img {
border: 15px solid #fff;
border-bottom: 65px solid #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
img:hover {
-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg) scale(1.05);
-moz-transform: rotate(1deg) scale(1.05);
}

Código HTML

Ejemplo

Botones

Los botones en los sitios web son algo fundamental, y es recomendable aplicar un estilo acorde al sitio web en el que se encuentra. Se pueden hacer botones con mayor o menos complejidad, pero, ¿a que queda bien poder realizar botones originales y divertidos para mostrarlos a los usuarios? Podemos desarrollar botones de gran calidad visual por medio de CSS3, gracias a la propiedad border-radius. El botón en estado activo (al hacer click) usa la técnica de degradado en CSS3 para crear un gradiente que va desde un color oscuro a uno claro, en la parte inferior. También es aplicada la propiedad CSS Transform, que hace que el botón se amplie ligeramente. El borde hacia el interior también utiliza un degradado.

Código CSS

* { padding: 0; margin: 0; text-decoration: none; outline: none; }

body { background: #cacaca; text-align: center; margin-top: 25px; color: #5f5f5f; }

button.one, button.two {

margin: 0 auto;

width: 125px;

height: 50px;

display: block;

color: #f1f1f1;

text-decoration: none;

font-weight: bold;

font-size: 20px;

font-family: Arial, Verdana, sans-serif;

line-height: 1;

}

/* CSS3 Buttons */

button { cursor: pointer; }

button.one {

padding: 0px 15px;

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

background: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.13, #2a2a2a),

color-stop(0.72, #696969)

);

background: -moz-linear-gradient(

center bottom,

#2a2a2a 13%,

#696969 62%

);

background-color: #696969;

-moz-box-shadow: rgba(0, 0, 0, 0.246094) 0px 1px 3px;

-webkit-box-shadow: rgba(0, 0, 0, 0.246094) 0px 1px 3px;

border: 1px solid rgba(0, 0, 0, 0.6);

margin-bottom: 20px;

}

button.one:active {

-webkit-transform: scale(0.97);

-moz-transform: scale(0.97);

background: -webkit-gradient(

 linear,

 left bottom,

 left top,

 color-stop(0.13, #696969),

 color-stop(0.72, #2a2a2a)

);

background: -moz-linear-gradient(

 center bottom,

 #696969 13%,

 #2a2a2a 62%

);

}

button.two {

width: 30px;

height: 30px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

text-indent: -9999px;

position: relative;

top: 6px;

border: 1px solid #696969;

background: #696969 url(power.png) no-repeat 6px 5px;

}

button.two:active {

-webkit-transform: scale(0.97);

-moz-transform: scale(0.97);

background: url(power.png) no-repeat 6px 5px, -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.13, #696969),

color-stop(0.72, #2a2a2a)

);

background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(

center bottom,

#696969 13%,

#2a2a2a 62%

);

}

.border {

margin: 0 auto;

height: 42px;

width: 42px;

display: block;

background-color: #fcfcfc;

-webkit-border-radius: 21px;

-moz-border-radius: 21px;

border-radius: 21px;

background: -webkit-gradient(

 linear,

 left bottom,

 left top,

 color-stop(0.13, #fcfcfc),

 color-stop(0.72, #c0c0c0)

);

background: -moz-linear-gradient(

 center bottom,

 #fcfcfc 13%,

 #c0c0c0 62%

);

-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);

}

.sky { background-color: #e2e2e2; padding: 15px; width: 45px; margin: 0 auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); }

Código HTML

<button class="one">Button</button>

<div class="sky">

<div class="border">

<button class="two">Power</button>

</div>

</div>

Ejemplo

DVD Animation

Con CSS Animations (?) es fácil realizar cosas que antes ni siquiera hubieras imaginado.

a:hover img[alt*="Disc"] { 	-moz-transform: translate(50px,0) rotate(330deg); 	-webkit-transform: translate(50px,0) rotate(330deg); 	transform: translate(50px,0) rotate(330deg); }

El código que realiza la animación es este, al posicionar el ratón encima de la caja, el DVD se gira y se dirige hacia la derecha:

img[alt*="Disc"] { 	-moz-transition: all .5s ease-in-out; 	-webkit-transition: all .5s ease-in-out; 	transition: all .5s ease-in-out; }

Código CSS

* { padding: 0; margin: 0; text-decoration: none; border: none; }

body { background: #cacaca; text-align: center; margin-top: 25px; color: #5f5f5f; }

img[alt*="Case"] { position: relative; z-index: 10; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); }

img[alt*="Disc"] { margin-left: -100px; margin-right: 60px; position: relative; top: -25px; }

/* CSS DVD Animation */

a:hover img[alt*="Disc"] {

 -moz-transform: translate(50px,0) rotate(330deg);

 -webkit-transform: translate(50px,0) rotate(330deg);

 transform: translate(50px,0) rotate(330deg);

}

img[alt*="Disc"] {

 -moz-transition: all .5s ease-in-out;

 -webkit-transition: all .5s ease-in-out;

 transition: all .5s ease-in-out;

}

Código HTML

<a href="#">
<img src="tuportada.jpg" alt="portada del DVD" />
<img src="dvd.png" alt="DVD" />
</a>

Ejemplos

Otros ejemplos los podéis tener en Forabeautifulweb y Zurb .

Book Animation

Este efecto únicamente funcionará en navegadores basados en Webkit, específicamente las últimas versiones de Chrome  y Safari. En él, vemos un libro que al posicionar el cursor encima de él, se gira, mostrándonos información. Está basado en este ejemplo.

Código CSS

* { padding: 0; margin: 0; text-decoration: none; border: none; }

 body { background: #cacaca; text-align: center; margin-top: 25px; color: #5f5f5f; }

 a.back { display: block; margin-top: 30px; color: #000; text-align: center; }

a.back:hover { text-decoration: underline; }

 h1 { font-family: Helvetica; margin-bottom: 25px; }

#flip-container {

position: relative;

margin: 10px auto;

width: 300px;

height: 388px;

z-index: 1;

}

.face.back, .face.front {

position: absolute; top: 0; left: 0; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);

}

.face.front {

z-index: 2;

}

.face.back {

z-index: 1;

}

@media all and (-webkit-transform-3d) {

 /* Se usa @media para determinar si 3D transformations son soportadas */

#flip-container {

-webkit-perspective: 1000;

}

#flip-card {

width: 100%;

height: 100%;

-webkit-transform-style: preserve-3d;

-webkit-transition: -webkit-transform 1s;

}

#flip-container:hover #flip-card {

-webkit-transform: rotateY(-180deg);

}

.face {

position: absolute;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

}

.face.back {

 display: block;

 -webkit-transform: rotateY(180deg);

}

}

Código HTML

<div id="flip-container">

<div id="flip-card">

<div class="front face">

<img src="tu-parte-delantera.jpeg" alt="Parte delantera"/>

</div>

<div class="back face">

<img src="tu-parte-trasera.jpeg" alt="Parte trasera"/>

</div>

</div>

</div>

Ejemplo