Volvamos a ver otro ejemplo de las posibilidades del CSS3. En esta ocasion, como podeis ver, se trata de un libro integramente diseñado con estilos CSS (con su sombra y todo), sin ningun tipo de imagen. La unica imagen que puede llevar es la de la portada, y esa la añades tu. Esto te puede venir bien si tienes un blog o web dedicado a la literatura, o simplemente para realizar cualquier presentacion con la foto que quieras ponerle.Aqui puedes ver 2 ejemplos de libros, a los que les he añadido diferentes imagenes como portada:
Si quieres poner estos libros en tu blog o web, primero tienes que añadir el codigo CSS3 en tu plantilla, antes de </head> y guardar.
<style>
.libro {
width: 276px;
height: 375px;
-moz-transform: scaleX(0.88) scaleY(0.95);
-moz-perspective: 150px;
-moz-perspective-origin: right center;
-webkit-perspective: 150px;
-webkit-perspective-origin: right center;
-webkit-transform-style: preserve-3d;
-webkit-transform: scaleX(0.88) scaleY(0.95);
-o-perspective: 150px;
-o-perspective-origin: right center;
-o-transform-style: preserve-3d;
-o-transform: scaleX(0.88) scaleY(0.95);
-ms-perspective: 150px;
-ms-perspective-origin: right center;
-ms-transform-style: preserve-3d;
-ms-transform: scaleX(0.88) scaleY(0.95);
perspective: 150px;
perspective-origin: right center;
transform-style: preserve-3d;
transform: scaleX(0.88) scaleY(0.95);
}
.libro img {
display: block;
height: 375px;
width: 276px;
position: absolute;
z-index:5;
-moz-transform: rotateY(-4deg) translateZ(0px);
-webkit-transform: rotateY(-4deg) translateZ(0px);
-o-transform: rotateY(-4deg) translateZ(0px);
-ms-transform: rotateY(-4deg) translateZ(0px);
transform: rotateY(-4deg) translateZ(0px);
}
.libro:before, .libro:after {
content: '';
position: absolute;
}
.libro:before {
height: 100%;
width: 40px;
position: absolute;
right: -25px;
top: 0%;
background: #89221B;
z-index: 2;
-moz-transform: rotateY(-4deg) translateZ(0px);
-webkit-transform: rotateY(-4deg) translateZ(0px);
-o-transform: rotateY(-4deg) translateZ(0px);
-ms-transform: rotateY(-4deg) translateZ(0px);
transform: rotateY(-4deg) translateZ(0px);
}
.libro:after {
background: #F5F5F5;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 18px 3px 20px rgba(0, 0, 0, 0.25) inset;
height: 98%;
width: 30px;
right: -19px;
top: 1%;
z-index: 3;
-moz-perspective: 5px;
-moz-transform: rotateY(20deg) translateZ(5px);
-webkit-perspective: 5px;
-webkit-transform: rotateY(20deg) translateZ(5px);
-o-perspective: 5px;
-o-transform: rotateY(20deg) translateZ(5px);
-ms-perspective: 5px;
-ms-transform: rotateY(20deg) translateZ(5px);
perspective: 5px;
transform: rotateY(20deg) translateZ(5px);
}
.libro span {
display: block;
position: absolute;
bottom: -13px;
height: 100px;
right: -110px;
height: 100px;
width: 200px;
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1) 15%);
border-radius: 15px;
box-shadow: 5px 12px 15px 5px rgba(0, 0, 0, 0.1);
-moz-transform: rotate(5deg) skew(-65deg);
-webkit-transform: rotate(5deg) skew(-35deg);
-o-transform: rotate(5deg) skew(-35deg);
-ms-transform: rotate(5deg) skew(-35deg);
transform: rotate(5deg) skew(-35deg);
}
</style>
Ahora, cada vez que quieras mostrar uno de estos libros, añades el siguiente codigo. Sustituyes lo que esta en color rojo por la url de la imagen que desees poner de portada. No te preocupes mucho por el tamaño de la imagen, ya que esta se redimensionara automaticamente a 276px de ancho por 375px de alto.
<div class="libro"><span class="sombra"></span><img alt="" src="URL IMAGEN" /></div>
|
