Un efecto muy estético es el de colocar imágenes grandes con comillas cuando hacemos una cita de una frase o a un texto famoso con las etiquetas <blockquote>
y </blockquote>
.
- Crea las comillas en cualquier editor de imágenes.
- Bien para hacer este efecto haremos uso de dos clases, una que abra las comillas y otro que lo cierre. Que puede ser como sigue:
<blockquote> <p> (Aquí nuestra frase entre comillas) La energía no se crea ni se destruye, sólo se transforma </p> </blockquote>
- Ahora definimos esas clases con css entre las etiquetas
<head>
y</head>
o desde una hoja de estilo externa de esta forma:blockquote { width:400px; /*El ancho de la cita */ padding-left:30px; /*Esta longitud varia de acuerdo al tamaño de la imagen que uses de la comilla abierta*/ background: url(camilla-abre.gif) top left no-repeat; /* aquí especificamos donde se encuentra la imagen de nuestra comilla que abre y la ubicamos */ } blockquote p { padding-right:30px; background: url(camilla-cierra.gif) bottom rihgt no-repeat; /* aquí especificamos donde se encuentra la imagen de nuestra comilla que cierra y la ubicamos */ }
Leonel mayo 31, 2007 a las 9:53 pm
Porque no me funciona la comilla de cierre, lo he intentado, tal y cual lo explicas pero no me funciona 😉
ResponderFrancisco junio 1, 2007 a las 6:29 am
Hola Leonel
Por alguna razón esa imagen suele ocultarse o para ff o para ie, prueba definiendo la anchura en la etiqueta blockquote.
PD: No tenias recientemente un post explicando esto mismo?
Saludos! 🙂
ResponderPiolín octubre 5, 2009 a las 5:44 am
En la línea background: url(camilla-cierra.gif) bottom rihgt no-repeat;
pone rihgt en vez de right , por eso no se ve.
Responder