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;
}
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.
<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;
}
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.
<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(#topofpage) 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;
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.
.note-fondo {
   background: url(#topofpage) 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;
}
Karla

Excelente propuesta :D, sería buena idea aplicarlo en los comentarios y citas (blockquotes) del blog.

Que tengas un excelente fin de semana...

Responder
MexaaC

Se ve genial GEM@, me has impresionado mil gracias :D

Responder
María José Moya (Mariajo)

Qué original. Me ha gustado mucho. Cuánto buscas y trabajas para todos nosotros Gemita, muchas gracias.

Un besote,

Responder
Jose Manuel (EL Gruista)

Gracias gema
por todo lo que aprendo aqui
gracias por tu trabajo

Responder
Raúl

Buenas gema, mira, el otro dia viendo el page rank de mi blog vi que era 0
¿Como lo puedo subir? o, si deberia estar en mas de 0 ¿Por que no sube?

Responder
Adrián J. Messina

Espectacular, lo agendare!

Responder
Graciela

Muy bueno Julia!

Me estaba riendo sola, cuando antes leía 'Lorem ipsum dolor...' creía que era parte de algún código.

Preciosa, buen fin de semana :P

Responder
enrique

Y si uno quiere que aparezca siempre así el fondo de la entrada, cómo se puede hacer para no estar poniéndolo cada vez?
Es posible?
Gracias, Gem@.

Responder
Oloman

Sencillo. El CSS3 cada vez me gusta más :D

Responder
Gem@

:: En los comentarios no he probado Karla pero en blockquote lo estuve mirando y queda muy bien, facilita la tarea si es para incluirlo en las entradas :)

:: Gracias a ti por comentar MexaaC :)

:: Hola Mariajo,a veces las cosas no se buscan llegan solas, espero que todo marche bien :)

:: Saludos Jose Manuel, gracias a ti por estar ;)

:: Raúl el PR no lo subimos nosotros sino Google, todo está en sus manos y es cuestión de tiempo, a veces mucho tiempo.
No dejes que sea algo prioritario ;)

:: Me alegra que te guste Adrián :D

:: Ahh no Graciela, ese Lorem ipsum son palabras en Latin sin significado, se usan para eso para no llamar la atención y suelen usarse en demostraciones y ejemplos.
Que tengas un lindo fin de semana :D

:: Enrique pues muy sencillo pero un poco largo de explicar aquí, te parece mejor que haga una entrada?

:: Oloman el CSS3 nos está enamorando a más de uno :)

Responder
enrique

Taría bueno, Gema! Pero tampoco quiero abusar. Gracias por todo. :D

Responder
Gem@

:: No es abuso Enrique mañana estará esa entrada que hoy no me ha dado tiempo ;)

Responder
Seb

Me ha quedado de diez el efecto, muuuuchas gracias :D
Tengo una duda que creo que vos sabrías resolver, si no es mucho pedir, te agradeceria mucho.
Quiero ampliar la separación entre el post y el footer, porque ahora me quedo todo junto :S con tan solo un espacio de separación... desde ya muchas gracias.

Responder
Gem@

:: Tendría que ver ese ejemplo online Seb :S

Responder
Seb

Si quieres fijate en mi blog, es el único que tengo, no se por qué razon me quedó todo tan junto... antes habia mas separación :S gracias desde ya...

Responder
Gem@

:: Has cambiado de plantilla verdad Seb? creo recordar que tenías otro diseño y esta tiene el footer separado de los post.

Responder
Adrià Vilanova

Muchísimas gracias por el post :)

Me ha servido de mucho, pero hay un error en la nota de color azul. El error está en el color de la doblez. El código tendria que ser el siguiente:

.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 #005ED7; /* color esquina */
border-color: #FFFFFF #FFFFFF #005ED7 #005ED7; /* color de borde */
border-style: solid;
border-width: 0 16px 16px 0;
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
}

Igualmente, muchísimas gracias :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:) :'( :( :P :D :$ ;) :-I :X :O |O :S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top