JMiur [E]

La etiqueta blockquote es esa que se suele utilizar para mostrar citas textuales y diferenciarlas del resto de los textos de una página y, a veces, se combina con una segunda etiqueta llamada cite que es una referencia al autor o al origen de dicha cita.

Ambas, tienen propiedades por defecto en cualquier navegador pero hay cientos de formas de personalizarlas agregándoles estilos; esta es una forma muy sencilla de hacerlo, utilizando las ventajas del CSS3.

Vestibulum a lectus libero, congue ultricies metus. Curabitur nisi dolor, tristique vel lacinia vitae, mattis sed risus. Morbi dignissim feugiat nulla vel vulputate. Ut scelerisque semper eros, vitae vestibulum nibh bibendum ac. Proin eget imperdiet nulla. Nulla hendrerit augue non sapien vestibulum id feugiat massa adipiscing? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Vivamus ut nisi ante. Phasellus eget odio vel nulla ullamcorper lobortis quis sed nulla. Fusce varius erat non quam tincidunt blandit. Sed venenatis; purus quis hendrerit iaculis, ipsum ante lobortis est, at suscipit erat mi non ipsum. Nunc dictum congue sapien, laoreet tempus augue pharetra a. Morbi enim risus, placerat eget vulputate ac, venenatis vel mi. In venenatis sodales lectus! Quisque a massa a velit blandit ultrices.
el nombre del autor

<style>
  blockquote.purocss {
    color: #888;
    font-family: Georgia,serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.3;
    margin: 20px auto;
    padding: 0.25em 40px;
    position: relative;
    width: 500px;
  }
  blockquote.purocss:before {
    color: #CCC;
   content: "\201C";
   display: block;
   font-size: 80px;
   left: -5px;
   position: absolute;
   top: -15px;
  }
  blockquote.purocss cite {
    color: #CCC;
    display: block;
    font-size: 18px;
    margin-top: 15px;
    text-align: right;
  }
  blockquote.purocss cite:before {
   content: "\2014 \2009";
  }
</style>

<blockquote class="purocss">
  ....... el texto .......
  <cite>el nombre del autor</cite>
</blockquote>

2 comentarios:

Gem@  

Siempre me han gustado las comillas le dan elegancia a un texto resaltado :-)

JMiur  

Welcome Doña :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR