Dando estilo a blockquote
Escrito por J.F. el Jueves, 4 de Octubre del 2007 a las 16:58
En una ocasión ya hablamos de ésto, pero viendo un post de Anieto2K me he encontrado nuevas formas de representar las frases celebres y citas mediante CSS:
Aquí tienes el código de éste modelo que me ha gustado bastante:
CSS:
-
blockquote.style5 {
-
font: 12px/18px normal "Courier New", sans-serif;
-
padding-left: 70px;
-
padding-top: 2px;
-
padding-bottom: 2px;
-
background-color: #000;
-
color: white;
-
border-top: 1px solid #ccc;
-
border-bottom: 1px solid #ccc;
-
margin: 5px;
-
background-image: url(images/openquote5.gif);
-
background-position: middle left;
-
background-repeat: no-repeat;
-
text-indent: 23px;
-
}
-
blockquote.style5 div {
-
padding-right: 50px;
-
display: block;
-
background-image: url(images/closequote5.gif);
-
background-repeat: no-repeat;
-
background-position: bottom right;
-
}
Enlace: | Diferentes estilos para citas
Descarga: | Descargar ejemplos
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
1 Comentario
Entradas relacionadas
Comentario de Ana Laura
Realizado el Viernes, 11 de Septiembre del 2009 a las 15:13
Hola! Me ha encantado esta solucion para las citas y he aplicado una de las que traes en los ejemplos en mi blog, pero como soy un poco torpe, no puedo hacer aparecer las comillas de cierre. Estoy usando
texto
simplemente. ¿Debo agregar algo más para que la segunda imagen aparezca? Muchas gracias!!!
Escribir un comentario
