Bloques entrecomillados con :after y :before + ejemplos

1 de abril de 2012 72 comentarios ,
Tiempo atrás vimos cómo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.
Ahora no nos limitaremos tanto, y 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é pondrá? 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:
.post-body blockquote:before {
content: "\201C";
}
.post-body blockquote:after {
content: "\201D";
}

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.
.post-body blockquote:before {
content: open-quote;
}
.post-body blockquote:after {
content: close-quote;
}

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:
.post-body blockquote:before {
content: url(URL de la imagen);
}
.post-body blockquote:after {
content: url(URL de la imagen);
}

Teniendo la base podemos crear diferentes estilos, este sería uno muy sencillo:
.post-body blockquote {
background:#F7F8E0; /* Color de fondo */
padding:10px;
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este le podemos aplicar un fondo gradiente y sombras:
.post-body blockquote {
padding:10px;
border-color: #999; /* Color del borde */
background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
background: -moz-linear-gradient(top, #fff, #E0E0E0);
background: -ms-linear-gradient(top, #fff, #E0E0E0);
background: -o-linear-gradient(top, #fff, #E0E0E0);
box-shadow: 0px 0px 15px #000000; /* Sombra */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}


A este lo haremos más "divertido" poniéndole un color más vivo y girándolo un poco:
.post-body blockquote {
border-radius: 5px; /* Borde redondeado */
box-shadow: 5px 5px 2px #696969; /* Sombra */
-webkit-transform: rotate(-4deg); /* Rotación */
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
background-color: #F4A460; /* Color de fondo */
padding: 10px;
color: #FFFFFF; /* Color del texto */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

Y a este le pondremos una imagen animada como comillas, además de un borde resplandeciente:
.post-body blockquote {
background:#CEECF5;  /* Color de fondo */
padding:10px;
width:85%;
border-radius: 0px 30px; /* Bordes redondeados */
border: 2px solid #fff; /* Borde interior */
-moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
}
.post-body blockquote:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhReeMBD6bhQHL-8n9L2PDSBQ35MsT2YG-mw-2oUWyjMloprJDptH2ceO_b63U8bblLZnCwRWvZub0BQYdGGbkFYsf2d2jxAaGmwyeJ_nkbOrjqAiFE0CeBUn_eKh_kh8BiXd-mO2tLtqM/s52/comilla1.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxsrTxQjsXGMMpQXWVtta2TUyLdYil6A2paJ9IpnrrZGQUPeG-9bnM6YpC984tXXfo-yNAqp-GtuIb8NbkVDGWLpVlT-SKDISWv_ujGAlu4g9XFRTQhATYaAm3OKYE-cn4GYcftuViWY/s39/comilla2.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}

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:
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
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.

Ten en cuenta que algunos de estos estilos sólo se verán en navegadores modernos -ya sabes por cuál lo digo- , pero en el resto se ve perfectamente bien.


72 comentarios en:

" Bloques entrecomillados con :after y :before + ejemplos "

  1. No lo necesito por el momento pero paso a reconocer tu trabajo, que es como siempre muy bueno.Un exelente aporte mas para los bloggers


    Saludos

    ResponderEliminar
    Respuestas
    1. Ciertamente no todos los usan, otros como yo los usamos en casi todas las entradas :)

      Eliminar
  2. ¡Qué bonito, Potro!, esto me viene de maravilla para algunas de mis entradas, claro que hasta ahora no he usado en ellas el entrecomillado (entre otras cosas porque siempre me da muchos problemas en la edición".

    No sé si lo he entendido bien, en este post dices que si pegamos esos códigos, el que elijamos, antes del skin ese, todos los entrecomillados que usemos en las entradas quedarán según el estilo que elijamos, ¿no?
    Voy a intentarlo ahora mismo en una reciente.
    Muchísimas gracias por este aporte, pero también por esas explicaciones anteriores sobre el propio código, así es como pueden ir dejándome de sonar a chino tanta "palabreja" de código que no entiendo, y es como se aprenden las cosas.
    ¡Gracias por tus enseñanzas, Maestro!
    Un beso grandísimo

    ResponderEliminar
    Respuestas
    1. ¡Ya Potro!, mira qué bien ha quedado, ¡¡¡¡¡¡, ¡jajaja!

      http://www.sofiaserra.com/2012/03/citas-recobradas-en-busca-del-tiempo.html

      he tenido que personalizar un poco porque las comillas se me solapaban sobre el texto, pero creo que así queda ya bien, ¿no?...

      ¡qué contenta!, mil gracias por esta alegría mañanera, Potro.
      Otro beso enormísimo.

      Eliminar
    2. Qué bonito le ha quedado colega, y sí, ya teniendo el código cada vez que se use un bloque entrecomillado tendrá el estilo que hayas elegido.
      Gracias por tanto beso, así sí da gusto comenzar el día :)

      Eliminar
  3. oooh puntazo de ciudad blogger! :)

    Gracias muy bueno! ^^

    ResponderEliminar
  4. Woooow!!!! que padre!!!! trataré de aplicarlo muchas gracias Potrito Sensei!!! Mua!!

    ResponderEliminar
  5. como mola!! me encanta el de gradientes, a ver si veo momento para usarlo :P

    ResponderEliminar
  6. Saludos Potro espero te encuentres bien. Revisando mis blog me he dado cuenta que en la parte de Configuración › Entradas y comentarios aparece una característica que dice: Mostrar la verificación de palabras, SI o NO, siempre coloco NO porque las CAPTCHAS siempre me han parecido una pérdida de tiempo, incluso a muchos usuarios los desanima a la hora de comentar. La cuestión es que cada vez que elijo la opción NO y guardo los cambios, cuando me salgo y entro de nuevo aparece activa la opción SI, existe alguna manera de desactivar las CAPTCHAS directamente en el código de la plantilla. Espero puedas ayudarme. GRACIAS.

    ResponderEliminar
    Respuestas
    1. Hola Víctor, la opción de los CAPTCHAS recién la acaban de incluir en la nueva interfaz porque antes no estaban, supongo que por ello aun deben presentar problemas. Lo mejor sería que lo hicieras en la interfaz antigua (aprovechando que aun la tenemos), desde ahí debería salir todo bien.

      Eliminar
  7. Potro, y como tendría que ser el código para ponerlo tal y como tu lo tienes?

    ResponderEliminar
    Respuestas
    1. Revisa mi código fuente, ahí lo verás ;)

      Eliminar
    2. He encontrado esto:
      .post-body blockquote {
      background: #F7F7F7;
      margin: 10px 25px 15px;
      padding: 10px 20px 10px 15px;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
      -o-transition:all .4s linear;
      -moz-transition:all .4s linear;
      -webkit-transition:all .4s linear;
      }
      .post-body blockquote:hover {
      background: #d2d2d2;
      -o-transition:all .4s linear;
      -moz-transition:all .4s linear;
      -webkit-transition:all .4s linear;
      }
      .post-body blockquote p {
      margin: 0;
      padding: 0 0 15px;
      word-wrap: break-word;
      }
      .ultimos-post {
      background:#eee;
      font-style:italic;
      padding:1px;
      }


      Es esto lo que debo poner antes de ]]> para que me salga como a ti?

      Eliminar
    3. No hace falta que te lo responda, si tú mismo lo pruebas sabrás si ese es el código o no.

      Eliminar
    4. Jaja algo reservado "El Potro". Muy buen aporte, es lo que buscaba desde hace tiempo.

      Eliminar
  8. Potro, seguro que no eres consciente del mal que has hecho a la blogosfera explicando cómo poner esas comillas de purpurina rosa animadas :D XD

    ResponderEliminar
    Respuestas
    1. Jajaj estoy de acuerdo con Oloman.
      Esas comillas deben ser destruídas xDD.

      Eliminar
    2. Secundo la propuesta ¿Alguien más?

      Eliminar
    3. Y eso que no has visto la tercera parte, tendrán fondo negro con letras amarillas, todo encerrado con MARQUEE y BLINK, ya verás lo bonito que se va a ver :)

      Eliminar
    4. ¡Nooooooo! Retorno al pasado XD XD XD

      "Era una broma, ¿vale? Si hubiéramos pensado que iba a usarse no la habríamos escrito"
      -- Mark Andreesen, hablando de la etiqueta BLINK de HTML

      Eliminar
    5. Esa cita es cierta, Oloman?
      Anonadado me hallo xDD

      Eliminar
    6. Realmente no lo sé y no me gusta afirmarlo si no lo he podido comprobar. Así que lo dejamos en que es una ocurrencia muy graciosa que circula por la Red, de autoría sin acreditar ;)

      Eliminar
  9. Hola EL POTRO, soy un gran admirador tuyo por el trabajo que haces y la cantidad de cosas que nos has enseñado y que además están chulísimas.

    Bueno, con este comentario te quería pedir un poco de ayuda, que tengo un problemita. La cuestión es que eliminé accidentalmente el gadget donde donde se ponen las PAGINAS (pagina principal, juegos, etc), y ahora lo quiero poner otra vez, pero cuando me voy a "añadir gadget", no me deja ponerlo porque me sale que "ya se ha añadido" y no me deja volverlo a poner.

    Ayúdame porfavor :(
    Desde ya, gracias adelantadas.

    ResponderEliminar
    Respuestas
    1. Aah, te dejo mi blog para que veas que el gadget de las paginas no se me ve.

      http://nicolaydv.blogspot.com/

      Eliminar
    2. Hola de nuevo EL POTRO, creo que ya lo arregle, grácias igualmente.
      Quería mostrar la solución, pero no me deja poner los códigos que utilicé para arreglarlo.

      P.D.: POTRO, eres el mejor.

      Eliminar
    3. Gracias por tu comentario NicolayDV. Mira esta entrada que justamente habla sobre ese problema que tienes:
      http://ciudadblogger.com/2011/11/el-gadget-de-paginas-que-no-aparece.html

      Eliminar
    4. Pues mira que casualidad, el código que sale en la entrada que me enseñaste es el mismo, lo que pasa es que yo lo que hice es crear otro blog en el cual el gadget estuviera bien. Entonces busqué el código html del gadget y lo copié al blog que tenía el problema. (No se si me entiendes)

      Gracias de nuevo. :)

      Eliminar
    5. Pues en sí el problema no está en el gadget, lo que sucede es que ahora se activa y desactiva desde la sección Páginas de la nueva interfaz, así que puede ser que tengas el gadget "físicamente" o no y el gadget no se verá si éste no está habilitado en la configuración.
      Aun así, lo que hayas hecho mientras te funcione, no hay nada qué objetar ;)

      Eliminar
  10. Increibles en verdad cada estilo.

    Esos dibujitos animados me recurdan a aquellas viejas paginas llenas de gifs :)

    ResponderEliminar
    Respuestas
    1. Y casi todas esas páginas eran de Lycos, jaja, qué tiempos aquéllos :)

      Eliminar
  11. Excelente como siempre, seguro me servirá en futuros proyectos :)

    ResponderEliminar
  12. esta vez no tengo ninguna pregunta. Sólo me queda agradecer el aporte y más que nada la explicación del código para tener una mínima idea de que es lo que estamos aplicando. Muy bueno y útil como siempre.

    ResponderEliminar
    Respuestas
    1. Por nada Diego, te agradezco que te tomes el tiempo para comentar. Saludos.

      Eliminar
  13. Hola, buenas noches.

    Está muy bonito este post, más aún para quienes usamos mucho texto y a veces no encontramos la forma de que no se vea tan monótono, ¡Infinitas gracias!

    Que una lluvia de éxitos siga cayendo sobre tu vida.

    Amablemente,
    Lluvia

    ResponderEliminar
    Respuestas
    1. Muchas gracias Lluvia, espero que le encuentres algo de utilidad en la práctica. Saludos :)

      Eliminar
  14. Esta excelente, me encanto este aporte, lo voy a guardar en favoritos para usarlo próximamente ;)!

    Un saludo!!

    ResponderEliminar
  15. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  16. EXCELENTE TODO COMO SIEMPRE POTRO!!!
    Lo tendré encuenta como tantas otras cosas! :D
    Hoy ando buscando algún elemento similar de "http://es.wix.com" como " http://btemplates.com/2012/blogger-template-fashion-trends/demo/ " el reproductor de imágenes, me gusto mucho y me gustaría colocarlo en blogger. No sé si podrás compartir algo similar para todos nosotros, suena atrevido de mi parte pero estaría bueno tener algún elemento asi para blogger! Disculpa por las molestias!
    Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias holaawsh, después reviso ese slider ;)
      Saludos.

      Eliminar
  17. Potro mi pregunta no tiene nada que cer con el articulo que porcierto me a encantado, mi pregunta es: ¿De donde sacas el tiempo para llevar la web adelante? PD: Eres un maquina me encanta la web.

    ResponderEliminar
  18. Potro mi pregunta no tiene nada que cer con el articulo que porcierto me a encantado, mi pregunta es: ¿De donde sacas el tiempo para llevar la web adelante? PD: Eres un maquina me encanta la web.

    ResponderEliminar
    Respuestas
    1. Ni yo mismo lo sé Fco Jesus, ya no distingo cuándo es de noche ni de día, así de rápido se me va el tiempo con el blog :P
      Gracias por tu comentario.

      Eliminar
  19. Hola potro, yo nuevamente con otra consulta. Mira, este es mi blog http://www.danpenguicp.com/ quisiera cambiar la fuente predeterminada en los posts por que siempre tengo que cambiarlos a "Georgia" para que quede parecido a lo que quiero, algo así como la fuente en tus entradas... ¡Gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Hola Danpengui, en esta parte puedes establecer la fuente para esa área:
      #maint .contenido{
      text-align:left;
      font-family:Arial;
      padding-left:1px;
      font-size:14px;
      }

      Eliminar
  20. Te vengo a agradecer por postear esto, me ha quedado genial. ¡Muchas gracias! :D

    ResponderEliminar
    Respuestas
    1. Gracias por tomarte el tiempo de comentar Hirondelle, saludos.

      Eliminar
  21. En realidad no es que la imagen esté en el bloque entrecomillado, lo que ha pasado ahí es que pusieron una imagen a la derecha de la entrada, y como el espacio entre el contenido y el bloque es reducido la imagen se encima.
    Pero no, no es que al bloque se le ponga una imagen encima como ves ahí.

    ResponderEliminar
  22. Mira la categoría de Slideshows, ahí hay algunos sliders, sólo toma en cuenta que el sitio que tú refieres no es un blog.

    ResponderEliminar
  23. Estimado Potro, he usado este html en tantas platillas y me han trabajo hermosamente. mis blogs de Visión de Profetas y ¿Quién es Jesucristo? sin emabrgo ahora estoy experimentando con otra plantilla para otro llamado Cristofobia y no me funcionan las comillas no aparecen para naaa..... ¿Que puedo hacer?.

    Gracias como siempre. Ciudad Blogger lo mejor y más facil

    ResponderEliminar
    Respuestas
    1. Hola Roger, es por la plantilla que usas, prueba cambiar los .post-body por .post o por .entry
      ¡Saludos!

      Eliminar
    2. Excelente y acertado consejo, supuse algo asi pero no sabia como y donde cambiarlo en el html.. probe solo .post eliminando - body y resulto excelente. Gracias potro. Jesùs te ama

      Eliminar
  24. Que tal Potro como puedo hacer para que la comilla del .post-body blockquote:after no se ponga encima del texto?

    ResponderEliminar
    Respuestas
    1. Hola Obed, cambia el padding-top por un valor más alto.

      Eliminar
  25. Hola Potro! como siempre tu trabajo excelente... como podría hacer para poner una imagen en el Fondo del entrecomillado... Es decir yo tengo puesta la opcion de con gift de imagenes y queria poner un fondo con imagen... ¿Puedo hacerlo?

    ResponderEliminar
    Respuestas
    1. Puedes ponerla cambiando esto:
      background:#CEECF5; /* Color de fondo */

      Por esto:
      background: url(URL de la imagen);

      Eliminar
  26. Hola Potro, gracias por tu trabajo, oye... disculpa la ignorancia, pero es que no se como aplicar los bloques en la entrada *___* ... digo ya aplique los estilos pero no se como hacerlos funcionar en las entradas, use el boton "cita" de la redaccion de entradas pero no aparecio.... Gracias :)
    http://laverdad-delevangelio-1.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Ari el, cuando has puesto los estilos has eliminado una llave de cierre } por eso no se han aplicado los cambios:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  27. Nice Potro, mil gracias, quedo precioso... :)

    ResponderEliminar
  28. Hey me quedo excelente me hacía falta :D gracias

    ResponderEliminar
  29. Hola Potro, soy nuevo en esto y he hecho todo lo que dice pero no sale el bloque. He colocado el código antes de ]]> y nada. MI blog es nuevo apenas lo estoy editando y no tenia ningún .post antes de ]]>

    ResponderEliminar
    Respuestas
    1. Hola Alejandro, ¿me puedes mostrar una entrada donde hayas utilizado un bloque entrecomillado?

      Eliminar
  30. He descubierto tu blog hace unos días, y es increíble que se puedan hacer tantas cosas! Me ha servido de mucho para actualizar el mío, que lo tenía muy abandonado...
    Mil gracias por todo esto que pones, además está muy bien explicado.

    Seguiré pasándome :).
    Te sigo.

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti por tu comentario, ¡¡¡bienvenida a Ciudad Blogger!!!

      Eliminar
  31. Hola! llevo ya un buen rato tratando de encontrar como hace una caja contenedora de texto que cuando se pase el cursor sobre ella sobresalte. Algo como lo que aparece en esta página.
    http://www.perdidasentrepaginas.com/2014/06/sorteo-recuerda-que-me-quieres.html
    y aunque esta entrada me ayudo un poco, no es lo que estoy buscando.
    ¡Agradecería tu ayuda!

    ResponderEliminar
    Respuestas
    1. Hola Emma, es algo similar a lo de esta entrada (y es algo similar a lo que yo hago con mis bloques entrecomillados). Primero tienes que darle estilos a tus bloques entrecomillados como desees, y luego aplicas otros estilos con HOVER, es decir, cuando se pase el cursor sobre él, por ejemplo:

      blockquote:hover {
      background-color: #fff;
      border: 1px solid #ACACAC;
      box-shadow: rgba(0,0,0,.2) 0 4px 16px;
      }

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger