+ Blockquotes

Ideas originales para que la entrada llame al primer golpe de vista. Podéis ver algunos ejemplos de css-tricks en este Blog de Pruebas

Sólo necesitamos un estilo general para las blockquotes (fuente, fondo, tamaño, imagen, etc...), p.e.:

blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(penquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(openquote5.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;

}

Y un HTML de llamada en la entrada o donde queráis las blockquotes, que, como véis, consta de la llamada de apertura y cierre "blockquote", seguido de la clase y un "span": p.e.

<blockquote class="style3"><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt soluta sequitur autem.</span></blockquote>



<blockquote class="style4"><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt processus soluta sequitur autem demonstraverunt.</span></blockquote>



<blockquote class="style5"><div><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt processus soluta sequitur autem demonstraverunt.</span></div></blockquote>

En el vínculo que os he puesto al principio de la entrada, podéis descargar unas imágenes de ejemplo. Además, tras cada uno de los ejemplos de la página, el autor reseña el CSS que necesitáis para cada uno de ellos.

Bonito y fácil...