Oloblogger

Efecto papel con puntas levantadas. CSS3.

Posted: 03 Feb 2011 07:39 AM PST

Muy majo y muy fácil, este efecto que he visto en Nimbupani. Consiste en proyectar una sombra doble por debajo de una capa y girarla un poco para que simule un papel levemente levantado por dos de sus puntas. Utiliza algunas de las nuevas propiedades CSS3, por lo que es sencillo deducir, que el truco no será visible con IE8 e inferiores.

Todo se basa en crear una nueva clase que en este ejemplo vamos a llamar papel. Las propiedades las vamos a insertar como siempre, en la parte CSS de la plantilla. En Blogger, antes de ]]></b:skin>.

.papel {
display:block;
position:relative;
margin:10px;
padding:20px;
font-family:"Courier New";
font-size:120%;
font-weight:bold;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVSpeSLYzymsbyrEdvNOe2hCWXXH1J2wtYCL7tpPkfeoVAjf5homANmoizJFK0ylVU_aLvaHsZ33x3vcQ0uvnf3Y2tsDKerO-dPOqVScbBXoAwrShNn3EjfDq80coL28lMXzv6-QXlC7R/s1600/cuadriculado.jpg);
}
.papel:before, .papel:after {
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
content: "";
}
.papel:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
.papel:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
right: 10px;
}

La primera definición no tiene nada de particular, porque sólo tiene propiedades comunes para cuadros con texto como el tamaño, fuente, margen, etc. En este ejemplo, hemos incluido también una imagen de fondo que simula papel cuadriculado, pero eso también es modificable. Lo único que no se puede alterar es el position:relative; para poder posteriormente ubicar bien las sombras.

Luego utilizamos before y after para colocar precisamente antes y después de la capa principal, sendas sombras que giramos un poco con transform y así darles algo más de realismo. Con bottom la movemos un poco hacia arriba y con el z-index con valor negativo, se termina de conseguir el efecto al llevar la sombra detrás de la capa con el contenido principal.

Para que os hagais una mejor idea de lo que hacen todas esas propiedades, esta imagen es una captura del mismo código pero sin z-index, para apreciar la sombra que ahora queda por encima de la capa principal. La línea roja es una marca dibujada a mano para que podais apreciar lo que quedaría por debajo de ella y lo que sobresaldría por debajo, formando el efecto deseado.

Una vez el código CSS está en nuestra plantilla, sólo tenemos que aplicar la clase papel a los elementos para los que queramos este tipo de sombra.

Cambiando los valores de las propiedades podréis conseguir sombras distintas y si en el estilo quitamos la pseudo clase after y sus propiedades, tendremos sólo una sombra en la esquina de la izquierda. Ocurre a la inversa si quitamos la parte de before:

<div class="papel">
Con un color plano adecuado, podemos conseguir sin imágenes una base para escribir texto a modo de post-it.
</div>

Variaciones a partir de aquí, las que queráis.