martes, 15 de febrero de 2011

Efecto esquina doblada en los post con CSS

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

2 comentarios:

Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
Lua dijo...

Gracias por tu información :D

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones