26.1.13

Esquina doblada para entradas de Blogger



Con un sencillo código CSS podemos poner un fondo a las entradas del blog, con el efecto de esquina doblada.

Vamos a Editar HTML:

Diseño Editar HTML Click dentro del editor Ctrl+f

Localizamos la siguiente etiqueta poniéndola dentro del cuadro de búsqueda (Search):

]]></b:skin>

...y antes de la misma pegamos el siguiente código:

.post {
   background: #f6d8ce;
   margin: 2em auto;
   overflow: hidden;
   padding: 1em 1.5em;
   position: relative;
   width: 560px;
}
.post:before {
   content:"";
   position: absolute;
   top: 0;
   right: 0;
   border-width: 0 50px 50px 0;
   border-style: solid;
   border-color: #ffffff #ffffff #ff4000;
   -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);
}

Efecto esquina doblada
Tal y como está el código las entradas se verán como la entrada de la Demo. Las propiedades resaltadas en rojo las debemos modificar para adaptarlas al diseño de nuestro blog:
  • background: #f6d8ce;: Es el color del fondo de las entradas. Cambiamos el código hexadecimal del color por el nuestro.
  • width: 560px;: Es el ancho del fondo de la entrada. Debemos poner un ancho que no exceda al ancho del cuerpo de las entradas.
  • border-width: 0 50px 50px 0;: Corresponde al ancho y al alto de la pestaña o esquina doblada. Podemos modificar las dimensiones (50px 50px), pero conservando la igualdad.
  • border-color: #ffffff #ffffff #ff4000;: Corresponde a:
    • #ffffff #ffffff: Es el color del borde o espacio que deja libre la esquina doblada. Se pone dos veces para lograr el efecto de la "doblez". Este color debe ser igual al del fondo del blog, ya que si se pone otro se verá el espacio que deja la esquina doblada.
    • #ff4000: Es el color de la pestaña o cara visible de la esquina doblada. Se recomienda poner un color del mismo tono de el del fondo de las entradas, pero más oscuro.
Nota: Este efecto no funciona con Internet Explorer


6 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Anónimo #

Hola, ¿Me podría decir la última parte del código, la que está después del border, qué propiedad afecta?
Gracias.

Comentario escrito por Pedro Pablo Pachón : #

Anónimo, Esa parte del código es la que pone la sombra que proyectan los bordes de la esquina doblada.
Saludos.

Comentario escrito por Anónimo #

Hola buen día muchas gracias, usted no tiene ni idea de lo mucho que estoy aprendiendo con su blog.

Comentario escrito por Pedro Pablo Pachón : #

Anónimo ¡Felicidades!

Comentario escrito por vjm : #

Hola Pablo, gracias por tu colaboración!!!! Nos gustaría poner a nuestro blog en el gadget de etiquetas, una línea de separación entre cada etiqueta, nuestra plantilla es picture window, podrías ayudarnos? Gracias

Comentario escrito por Pedro Pablo Pachón : #

VJM, Por un descuido de mi parte demoré en responder; les presento disculpas.
El siguiente es un tutorial para personalizar el gadget de las etiquetas:
http://bloguermast.blogspot.com/2013/03/personalizar-gadget-etiquetas-de-blogger.html

Saludos.

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.