viernes, 16 de julio de 2010

Sangría en un Bloque entrecomillado con estilo


Código normal:

En CSS:
blockquote {
width:570px;
color:#070707;
font-style:normal;
font-size:15px;
background:#F3F7FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWZ1Zboo-inZc5-iQKXXwtvpBot_5_oOGjD0nGOsAidimHgQxBRtNRcJdGDfkhy0HdVqQL-1DI1_nCXGzbFDJmwsgqsRrW4sdWxs1dtSwlDJhh3q0pDxCSzfECI_Pbac27VDxJXbFLfAO/s1600/blockquote.png) no-repeat 10px 20px;
padding:10px;
border-bottom:solid 1px #c2cabc;
border-right:solid 1px #c2cabc;
}

Llamando al bloque en entrada:
<blockquote>Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.

Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.

Una de las cualidades del texto en cuestión es que tiene una distribución de las letras similar a las del inglés.</blockquote>


Código con Sangría:

En CSS:
blockquote {
width:570px;
color:#070707;
font-style:normal;
font-size:15px;
background:#F3F7FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWZ1Zboo-inZc5-iQKXXwtvpBot_5_oOGjD0nGOsAidimHgQxBRtNRcJdGDfkhy0HdVqQL-1DI1_nCXGzbFDJmwsgqsRrW4sdWxs1dtSwlDJhh3q0pDxCSzfECI_Pbac27VDxJXbFLfAO/s1600/blockquote.png) no-repeat 10px 20px;
padding:10px;
border-bottom:solid 1px #c2cabc;
border-right:solid 1px #c2cabc;
}

blockquote span {
display: block;
float: left;
width: 58px;
height: 58px;
}

Llamando al bloque en entrada:
<blockquote><span></span>Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.

Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.

Una de las cualidades del texto en cuestión es que tiene una distribución de las letras similar a las del inglés.</blockquote>

No hay comentarios:

Publicar un comentario