Cómo crear citas con estilo

Borja me preguntaba por la forma de crear las citas donde aparece el texto que queramos dentro de una caja.

Para que nos entendamos el resultado sería este:

El resultado es este.

Para conseguirlo, simplemente tenemos que crear en nuestro CSS un elemento con los siguientes valores:

blockquote {border-left: 5px solid #555;padding: 0.7em 1em 0.7em 1em;
background: #eee url(http://helektron.com/img/bloque.gif) no-repeat
bottom right;margin-left: 2em;}

Y en el código basta con meter dentro de las etiquetas blockquote y /blockquote (con <> respectivamente) el texto en cuestión.

Lógicamente tendreis que cambiar la ruta de vuestra imagen (yo he empleado en el ejemplo: http://helektron.com/img/bloque.gif) y cambiarla como querais.

Además de poderle cambiar el nombre a blockquote por el que necesiteis.

Noticias relacionadas a esta:

• CSS Vista: Herramienta para ver los cambios de nuestro CSS en Internet Explorer y Firefox simultáneamente
• El peor diseño web
• Cómo crear un enlace con una imagen flotante
• Eliminar el encuadre de los enlaces
• Listado con 500 Fuentes (tipos de estilo de letras) totalmente gratis

Etiquetas: citas, css, design, diseño, estilo, Trucos.

Si te ha gustado este blog puedes seguirlo por Facebook, Twitter y también puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Puedes seguir las noticias por RSS .