Blockquotes bien lindos con CSS

Una de las preguntas de estos días es sobre blockquotes lo que conocemos por comillas y que normalmente utilizamos para resaltar texto, se pueden utilizar imágenes o unas simples líneas a modo de bordes el resultado de cualquiera de ellos es muy atractivo.
En su día explicaba una forma muy sencilla de añadir blockquotes, con css también podemos conseguir que aparezcan en nuestro texto y añadirle unos estilos. Esa es la parte divertida.
En nuestra plantilla encontraremos algo así:

.post blockquote {
margin:1em 20px;
}

Podemos añadir unas líneas para conseguir otros efectos:

.post blockquote {
color:#333;
width:350px;
margin-top: 10px;
font-size:100%;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 4px double #5C6625;
font: normal helvetica, sans-serif;
}
.post blockquote {
width:350px;
color: #000;
padding: 8px;
font-size:100%;
margin: 10px 0 10px 0px;
text-align: justify;
border-top: 3px dotted #6B2533;
border-bottom: 3px dotted #6B2533;
background: transparent;
font:normal helvetica, sans-serif;
}
.post blockquote {
color: #666666;
margin-left: 20px;
display: block;
margin-right: 20px;
font-size: 90%;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 140%;
background-color: transparent;
background-image: url(url-imagen-comillas);
background-repeat: no-repeat;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 40px;
}
.post blockquote {
color:#fff;
width:350px;
margin-top: 10px;
font-size:100%;
padding-left: 18px;
padding-right: 18px;
padding-top: 18px;
padding-bottom: 18px;
background-image:url(url-imagen-fondo);
font: normal helvetica, sans-serif;
}
.post blockquote {
color: #0f5718;
font-size: 90%;
display: block;
margin-right: 20px;
line-height: 140%;
margin-left: 20px;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 70px;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: transparent;
background-image: url(url-imagen-comillas);
background-repeat: no-repeat;
}

Más sobre Blockquotes aquí y aquí.

0 comentarios:

Publicar un comentario