blockquote o citas sencillas con CSS3

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>

REFERENCIAS:webmaster-source.com