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:

1. Cómo crear un enlace con una imagen flotante
2. Css Buttom Designer: Herramienta on-line para crear tus botones CSS fácilmente
3. 800 Fuentes de estilo
4. ImageTool: Herramienta on-line para crear logos al estilo web 2.0
5. Cómo crear el efecto pegatina en las imágenes utilizando Photoshop

Este noticia ha sido creada el 11 mayo 2007 a las 11:11 en Trucos con las etiquetas cambiar, citas, com, con, crear, css, de, dentro, design, diseño, el, estilo, gif, helektron.com, que, Trucos y si quieres puedes comentarla. Te agradecería mucho que la compartieras con tus amigos:


Si te ha gustado Cómo crear citas con estilo y esta web, puedes seguirla a través de Facebook, Twitter y también puedes recibir las nuevas noticias de la web en tu correo pincha en este enlace para darte de alta. Además también puedes seguir las noticias por RSS.