Efecto esquina doblada en los post con CSS

  • febrero 15, 2011

En este post os dejaremos un truco muy vistoso con un efecto esquina doblada para tus post y entradas:

estradas post esquina doblada efecto

En plantilla edici??n de HTML podemos encontrar algo as??:

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}


Es el sitio indicado para a??adir una imagen de fondo o color en los post y en este caso el efecto de esquina doblada, tendremos que eliminar lo anterior y en su lugar a??adimos:

.post {
background:#ccc;/* color del post */
color: #333; /* color del texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 580px; /* ancho del post*/
}
.post:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 40px 40px 0;
border-style:solid;
border-color:#fff #fff #333 #000;/* color borde y pesta??a */
background:658E15;
/* sombra pesta??a opcional*/
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}

En vista previa ya podemos ver el resultado, si deseamos usar nuestros propios colores s??lo debemos sustituirlos, para facilitar la tarea en el mismo c??digo est?? indicado el lugar para hacerlo.

Fuente

No Comments Found