Estilos para el entrecomillado <Blockquote> con CSS : Mundi Lima

En nuestro anterior post sobre la extensión Greasemonkey para Firefox, quise citar la definición de Wikipedia y se me ocurrió hacerlo con la opción de entrecomillado, en HTML.Por lo que me puse a diseñar un estilo simpático para el blog sobre este atributo. Después de un rato de ver la función de algunas opciones para estilos en CSS logré conseguir el que podréis ver en el post, sin embargo me di cuenta de que no fue fácil por lo que voy a mostraros algunos códigos de ejemplo que realicé y explicaros como podéis adaptarlo a vuestro gusto y como agregarlo al blog.

Por cierto, lo que se encuentre entre corchetes "[]" es un explicación del atributo para que os ayude a entenderlo por si deseais modificarlo, eso en el código no se incluye.

Uno muy llamativo:

<style type="text/css">
blockquote {
width:400px;                     /*[Ancho del cuadro]*/
font: 18px/25px italic Times, serif; /*[Tamaño/espaciado y tipo de letra]*/
padding: 8px;                    /*[Relleno interno en los cuatro lados del cuadro]*/
background-color: #FFCCFF;       /*[Color de fondo]*/
border-top: 4px dotted #333333;  /*[Anchura, estilo y color de los bordes]*/
border-bottom: 4px dotted #333333;
margin: 5px;                     /*[Margen exteriror del cuadro]*/
background-image: url(Imágen abre comillas);
background-position: top left;   /*[Posisción de la imágen]*/
background-repeat: no-repeat;
text-indent: 23px;               /*[Sangría del texto]*/
}
blockquote span {
display: block;
background-image: url(Imágen cierra comillas);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>

El siguiente con un tono más cálido y con los cuatro bordes:

<style type="text/css">
blockquote {
height:100px;                    /*[Altura del cuadro]*/
width:520px;
font: 20px/35px  "Times New Roman", Times, serif;
font-style:italic;
color: #006600;
padding-right:20px;
padding-left: 20px;
padding-top:15px;
padding-bottom:20px;
background-color: #F3F4B5;
border-top: 1px dotted #FF9900;
border-bottom: 1px dotted #FF9900;
border-left: 1px dotted #FF9900;
border-right: 1px dotted #FF9900;
margin: 5px;
background-image: url(Imágen abre comillas);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote span {
display: block;
background-image: url(Imágen cierra comillas);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>

Y otro con un estilo más alternativo:

<style type="text/css">
blockquote {
height:135px;
width:520px;
font: 17px/35px  Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
color: #CCCCCC;
padding-right:80px;
padding-left: 80px;
padding-top:15px;
padding-bottom:20px;
background-color: #000000;
border-top: 10px ridge #CC0000;
border-bottom: 10px ridge #CC0000;
border-left: 10px ridge #CC0000;
border-right: 10px  ridge #CC0000;
margin: 5px;
background-image: url(Imágen abre comillas);
background-position: top left;
background-repeat: no-repeat;
text-indent: 40px;
}
blockquote span {
display: block;
background-image: url(Imágen cierra comillas);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>

No olvideis que a la hora de poner vuestras citas debes hacerlo de la siguiente manera:

<blockquote><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ultricies dictum enim. Cras rhoncus consequat augue. In hac habitasse platea dictumst. Etiam lobortis arcu at felis...</span></blockquote>

Entre las etiquetas “<blockquote> <span>……..</span></blockquote>”.

Para que surtan efecto estos estilos debéis copiarlo en la plantilla de vuestro blog entre las etiquetas <head> y </head>.

Bueno son algunos ejemplos que posiblemente algunos pensareis que no compaginan muy bien los colores, pero bueno, como dije es una ejemplificación. Si queréis ya sebéis como modificar cada valor para ponerlo a vuestro gusto. Espero que les sea de utilidad y si tenéis algun problema no dudeis y comentadlo.

Para terminar os incluyo algunas imágenes de comillas para usarlas en vuestros propios diseños. Para obtener el correspondiente solo teneis que voltearlo verticalmente.

1 Comentario

Prox dijo...: hola me gusta el estilo de citado que usas (EN DONDE MUESTRAS EL CODIGO), quisiera saber si podrias publicar una entrada para poder utilizarlo o si me podrias pasar el codigo esque inicio un nuevo tema con codigo y me gustaria presentarlo de esa forma un saludo y espero tu respuesta...; 30 de julio de 2011, 23:11 Responder a este comentario