Tenía mucho tiempo sin realizar un artículo, pues estuve un poco ocupado todos estos dias, sin embargo accedí en mis tiempos libres para aprobar y responder comentarios, sugerencias y cuestiones pero ya me estoy reincorporando, hoy veremos la forma de aplicar un bonito estilo para Blockquote para citar contenido.
También vamos a descartar las imágenes de símbolos tipográficos, añadiendo una con estilo CSS, veamos un ejemplo a continuación:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
Somebody famous
Y hablando de blog, también podemos incorporar este estilo para Blockquote en Blogger solo bastaría con añadir el siguiente código antes de la etiqueta
También vamos a descartar las imágenes de símbolos tipográficos, añadiendo una con estilo CSS, veamos un ejemplo a continuación:
Empecemos
Para comenzar lo primero que vamos a hacer será crear nuestra blockquote con algo de HTML sencillo antes de añadir estilo, con un código como el siguiente:[<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! <cite>Somebody famous</cite> </blockquote>]Ahora un poco de CSS para proporcionar un estilo básico para el blockquote. Dejando el estilo de navegador por defecto y una combinación de colores ligeros:
[blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 500px; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838; } blockquote:before { display: block; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; }]Pueden adaptar los estilos a su gusto, es cuestión de solo editar el código CSS y adaptarlo a estilo de su web o blog.
Y hablando de blog, también podemos incorporar este estilo para Blockquote en Blogger solo bastaría con añadir el siguiente código antes de la etiqueta
</b:skin> de nuestro blog:
[.post blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 500px; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838; } .post blockquote:before { display: block; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } .post blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } .post blockquote cite:before { content: "\2014 \2009"; }]Fuente: Pure CSS Blockquote Styling
