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 , , , , , , , , , , , , , , , 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.

2 Comentarios a “Cómo crear citas con estilo”

  1. 1.Mikel Tripulante… Dijo:

    Me agrada el resultado :)

    Muy buena explicación…

  2. 2.d-_-borch Dijo:

    Me has iluminado Vic. Moltas gracias ;)

Deja tu comentario

Notificarme los nuevos comentarios por correo electrónico. Tambien puedes suscribirte sin comentar.