♡ 24☆ Pullquote. Entradas con estilo.

24 Compartir en Facebook Compartir en Twitter Enviar entrada por correo Imprimir artículo

Usando CSS podemos dar un toque más profesional a nuestro sitio creando pullquotes. Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada. El efecto es similar a los cuadraditos en prensa escrita, que destacan parte de un artículo. Por ejemplo una frase importante a modo de titular, extraída de una entrevista. Me resulta difícil dar una definición más concreta, así que a la derecha queda una imagen de muestra.

Para conseguir este efecto en nuestro blog, en primer lugar hay que definir una clase y colocarla con los atributos necesarios en nuestra plantilla, antes de ]]></b:skin>. Más adelante se ofrece un ejemplo.

Una vez creada la clase y ya redactando la entrada dónde queremos mostrar uno de estos cuadritos, sólo tendremos escribir el texto en el lugar donde queremos que aparezca, pero encerrado dentro de un SPAN con la clase del pullquote. Traducción de todo este rollo:

<span class="pullquote">Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada...</span>

Un pullquote es un elemento que se destaca dentro de una entrada...La clase llevará los atributos que sean necesarios para conseguir el efecto que os guste a vosotros. Imprescindibles son el FLOAT y el WIDTH. Conveniente el PADDING y el MARGIN. Todo lo demás es opcional. A continuación os mostramos un ejemplo con muchos más atributos para que podais quitar o modificar, que siempre es más fácil que añadir... sobre todo si no se sabe qué es lo que se puede añadir.

.pullquote {
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}

El efecto es similar  a los cuadraditos en prensa escrita...La subclase first-letter sirve para hacer la primera letra más grande que el resto del texto, pero como se ha comentado, esto es prescindible.

Si por el contrario, lo que queremos es complicarnos un poco -aparte del estilo definido en la clase- al redactar el post podemos ir añadiendo a ciertas palabras del texto del pullquote, efectos como cursiva, negrita, tamaño, color...

En SmileyCats, teneis unos cuantos ejemplos de pullquotes para que le echeis imaginación. Y ya puestos, de la misma manera pero más sencillo, podeis hacer otra clase para vuestras citas (blockquote).

Actualización 30-11-2008: Antonio nos hace saber que lo que aquí hemos llamado "cuadraditos de prensa escrita", son conocidos en el argot como sumarios. Gracias.

¿Vemos otro post al azar por si le encuentras utilidad?