bloques entrecomillados

Tiempo atrás vimos cómo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.

Hoy usaremos las pseudoclases :after y :before para que los bloques entrecomillados (blockquotes) tengan comillas, al inicio y al final de la cita. Además usaremos un poco más de CSS para hacerlos más vistosos.

La pseudoclase :before nos ayudará a poner "algo" antes del bloque entrecomillado, mientras que :after lo pondrá después.
¿Y qué podrá? Aquí entra la propiedad content a echarnos la mano, podremos usar comillas o imágenes para darle estilo a nuestro bloque.

El código base para entender de lo que hablamos es este:

001 .post-body blockquote:before {
002 content: "\201C";
003 }
004 .post-body blockquote:after {
005 content: "\201D";
006 }

Ahí indicamos que antes del bloque usaremos la comilla de apertura \201C que traducido al cristiano es esta: “

Y al final del bloque usaremos la comilla de cierre \201D que es esta: ” También podemos usar open-quote y close-quote en su lugar.

001 .post-body blockquote:before {
002 content: open-quote;
003 }
004 .post-body blockquote:after {
005 content: close-quote;
006 }

O bien, una imagen, en la cual la primera sería la imagen de la comilla de apertura y la segunda sería la imagen de la comilla de cierre:

001 .post-body blockquote:before {
002 content: url(URL de la imagen);
003 }
004 .post-body blockquote:after {
005 content: url(URL de la imagen);
006 }

Teniendo la base podemos crear diferentes estilos, este sería uno muy sencillo:

001 .post-body blockquote {
002 background:#F7F8E0; /* Color de fondo */
003 padding:10px;
004 }
005 .post-body blockquote:before {
006 content: "\201C";
007 font-family: Georgia;
008 font-size:40px;
009 font-weight: bold;
010 line-height:0px;
011 vertical-align:middle;
012 }
013 .post-body blockquote:after {
014 content: "\201D";
015 font-family: Georgia;
016 font-size:40px;
017 font-weight: bold;
018 line-height:0px;
019 vertical-align:middle;
020 padding-top:10px;
021 }

A este le podemos aplicar un fondo gradiente y sombras:

001 .post-body blockquote {
002 padding:10px;
003 border-color: #999; /* Color del borde */
004 background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
005 background: -moz-linear-gradient(top, #fff, #E0E0E0);
006 background: -ms-linear-gradient(top, #fff, #E0E0E0);
007 background: -o-linear-gradient(top, #fff, #E0E0E0);
008 box-shadow: 0px 0px 15px #000000; /* Sombra */
009 }
010 .post-body blockquote:before {
011 content: "\201C";
012 font-family: Georgia;
013 font-size:40px;
014 font-weight: bold;
015 line-height:0px;
016 vertical-align:middle;
017 }
018 .post-body blockquote:after {
019 content: "\201D";
020 font-family: Georgia;
021 font-size:40px;
022 font-weight: bold;
023 line-height:0px;
024 vertical-align:middle;
025 padding-top:10px;
026 }

A este lo haremos más "divertido" poniéndole un color más vivo y girándolo un poco:

001  .post-body blockquote {
002  border-radius: 5px; /* Borde redondeado */
003  box-shadow: 5px 5px 2px #696969; /* Sombra */
004  -webkit-transform: rotate(-4deg); /* Rotación */
005  -moz-transform: rotate(-4deg);
006  -o-transform: rotate(-4deg);
007  background-color: #F4A460; /* Color de fondo */
008  padding: 10px;
009  color: #FFFFFF; /* Color del texto */
010  }
011  .post-body blockquote:before {
012  content: "\201C";
013  font-family: Georgia;
014  font-size:40px;
015  font-weight: bold;
016  line-height:0px;
017  vertical-align:middle;
018  }
019  .post-body blockquote:after {
020  content: "\201D";
021  font-family: Georgia;
022  font-size:40px;
023  font-weight: bold;
024  line-height:0px;
025  vertical-align:middle;
026  padding-top:10px;
027  }

Y a este le pondremos una imagen animada como comillas, además de un borde resplandeciente:

001  .post-body blockquote {
002  background:#CEECF5;  /* Color de fondo */
003  padding:10px;
004  width:85%;
005  border-radius: 0px 30px; /* Bordes redondeados */
006  border: 2px solid #fff; /* Borde interior */
007  -moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
008  -webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
009  -goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
010  box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
011  }
012  .post-body blockquote:before {
013  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRHuPiVZHV3cqr04_UTqoMbfhvJLLrrdY84ozhKjbBGelC4Rw7n8shT7LeX0_JzjUM-Bj3DSRmuxccs4bXA8szL_Oi21-XTmLhahr8W35tT7zfoAT7zjbJFRFrY7RYFBeDey-KgSosCc/s52/comilla1.gif);
014  font-size:40px;
015  font-weight: bold;
016  line-height:0px;
017  vertical-align:middle;
018  }
019  .post-body blockquote:after {
020  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOXBuas5qQlyLOzt9dj0uVtMUU43wXspbVef530vhpfWY6cElGsZa3rPzacwnVVGigLEh4MfGmtf6E6yTG3Rawg8y_geDih1Vrb4bKppxm8Zg1H8uMqLyHRk_UcAZl6yBghyphenhyphenA8PnQwf7Q/s39/comilla2.gif);
021  font-size:40px;
022  font-weight: bold;
023  line-height:0px;
024  vertical-align:middle;
025  }

Cualquiera de los códigos anteriores los puedes poner en sustitución de los que ya tengas, o bien, sino los tienes definidos puedes ponerlos antes de ]]></b:skin>


Cualquiera de los ejemplos es completamente personalizable, en color verde están las anotaciones del área a la que corresponde cada estilo. En el caso de las comillas verás esto:

001  font-family: Georgia;
002  font-size:40px;
003  font-weight: bold;
004  line-height:0px;
005  vertical-align:middle;
006  padding-top:10px;

font-family es el tipo de fuente, font-size el tamaño de la comilla, font-weight lo pone en negrita con la declaración bold, line-height es el espacio entre líneas, vertical-align es para alinearlo verticalmente, y padding-top el espacio respecto a la línea de arriba. No funciona en Internet Explorer