Gem@ BLOG

Fuentes para tus diseños

Los detalles de Jose a secas siempre vienen en zip, y vienen así porque son fuentes para descargar e instalarlas en nuestro PC. - Sitio tripwire Magazine

Efecto esquina doblada en los post con CSS

▼

Efecto esquina doblada con CSS

▼

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Nicolas Gallagher nos muestra la forma de crear un efecto esquina doblada con CSS, la forma de crearlo es muy sencilla, en una entrada o gadger de HTML incluimos lo siguiente.

<div class="note"><p>Texto</p></div>

En plantilla edición de HTML añadimos los estilos justo antes de ]]></b:skin> el resto trata de sustituir el color de fondo si se desea para ello está indicado el lugar en el mismo código así como el ancho, el color de la esquina y borde.

.note {
    background: none repeat scroll 0 0 #97C02F; /* color de fondo */
    color: #FFFFFF; /* color de texto */
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note:before {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
    background: none repeat scroll 0 0 #658E15; /* color esquina */
    border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de borde */
    border-style: solid;
    border-width: 0 16px 16px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

<div class="note blue"><p>Texto</p></div>

.note.blue {
    background: none repeat scroll 0 0 #53A3B4; /* color de fondo */
    color: #FFFFFF; /* color de texto */
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note.blue:before {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
    background: none repeat scroll 0 0 #658E15; /* color de fondo */
    border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de esquina */
    border-style: solid;
    border-width: 0 16px 16px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

<div class="note taupe"><p>Texto</p></div>


.note.taupe {
    background: none repeat scroll 0 0 #999868; /* color de fondo */
    color: #FFFFFF; /* color de texto */
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note.taupe:before {
    background: none repeat scroll 0 0 #BDBB8B; /* color de esquina */
    border-color: #FFFFFF #FFFFFF #BDBB8B #BDBB8B; /* color de borde */
    border-style: solid;
    border-width: 0 16px 16px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

Si queremos darle nuestro toque especial podemos añadir en lugar de color de fondo una textura con background: url(url-imagen) repeat scroll 0 0;

En su interior también podemos añadir alguna imagen con <img src="url-de-la-imagen">

La altura se irá adaptando a lo incluido en el contenido y la anchura a la establecida en width.

El tamaño de la esquina también lo podemos aumentar en: border-width: 0 16px 16px 0;

Añadimos sombra al texto con text-shadow: 1px 1px 1px #000;

.note-fondo {
   background: url(url-imagen) repeat scroll 0 0 #3A7F2A;  
    color: #FFFFFF; /* color de texto */
text-shadow: 1px 1px 1px #000;
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px; /* ancho */
}
.note-fondo:before {
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
    background: none repeat scroll 0 0 #ADF96E; /* color esquina */
    border-color: #FFFFFF #FFFFFF #ADF96E #ADF96E; /* color de borde */
    border-style: solid;
    border-width: 0 36px 36px 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

▲