papel con un efecto de puntas levantadas con CSS

 

 

Hacer un papel con un efecto de puntas levantadas con CSS

Esto lo vi hace un tiempo en  nimbupani.com, se trata de hacer algunas notitas o mensajes con puro CSS3 y la verdad tienen estética y quedan bien.

Este es un primer ejemplo de lo que se puede lograr

"Es que la muerte está tan segura de vencer que nos da toda una vida de ventaja" - La Renga.

Para obtener estos resultados lo que vamos a hacer es pegar lo siguiente 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(http://3.bp.blogspot.com/_0eC4K-qZ7AM/TUQ4mutGAlI/AAAAAAAAMz4/nZvfKXcAje0/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;
}

Ahora en nuestra entrada o en el gadget HTML/Javascript que queremos que se encuentre este papel, vamos a colocar lo siguiente:



<div class="papel">
ACA IRIA EL CONTENIDO DE LO QUE USTEDES QUIEREN QUE APAREZCA EN EL MENSAJE
</div>


Ahora sólo reemplacen lo que está en rojo por lo que ustedes quieren que contenga el papel y listo.

También pueden poner una frase o una imágen o lo que ustedes quieran.

Lo logran agregando esto:

También pueden poner una frase o una imágen o lo que ustedes quieran. <center><img src="URL DE LA IMAGEN" /> </center> </div>

Bueno, espero que les haya servido, hasta luego!