English Português

Un efecto muy estético es el de colocar imagenes grandes con comillas cuando hacemos una cita de una frase o a un texto famoso con las etiquetas <blockquote> y </blockquote>.

  1. Crea las comillas en cualquier editor de imagenes.
  2. Bien para hacer este efecto haremos uso de dos clases, una que abra las comillas y otro que lo cierre. Que puede ser como sigue:
    <blockquote>
    <p> (Aquí nuestra frase entre comillas) La energía no se crea ni se destruye, sólo se transforma </p>
    </blockquote>
  3. Ahora definimos esas clases con css entre las etiquetas <head> y </head> o desde una hoja de estilo externa de esta forma:
    blockquote {
    width:400px; /*El ancho de la cita */
    padding-left:30px; /*Esta longitud varia de acuerdo al tamaño de la imagen que uses de la comilla abierta*/
    background: url(camilla-abre.gif) top left no-repeat; /* aquí especificamos donde se encuentra la imagen de nuestra comilla que abre y la ubicamos */
    }
    blockquote p {
    padding-right:30px;
    background: url(camilla-cierra.gif) bottom rihgt no-repeat; /* aquí especificamos donde se encuentra la imagen de nuestra comilla que cierra y la ubicamos */
    }
    

DESCARGA EL EJEMPLO Y LAS IMAGENES DE LAS COMILLAS

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Leonel / Hace 10 años /

      Porque no me funciona la comilla de cierre, lo he intentado, tal y cual lo explicas pero no me funciona 😉

      Responder a Leonel →
    2. Francisco / Hace 10 años /

      Hola Leonel

      Por alguna razón esa imagen suele ocultarse o para ff o para ie, prueba definiendo la anchura en la etiqueta blockquote.

      PD: No tenias recientemente un post explicando esto mismo?

      Saludos! 🙂

      Responder a Francisco →
    3. Piolín / Hace 8 años /

      En la línea background: url(camilla-cierra.gif) bottom rihgt no-repeat;

      pone rihgt en vez de right , por eso no se ve.

      Responder a Piolín →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad