Efecto periódico en tus páginas Web

Escrito por J.F. el Jueves, 9 de Agosto del 2007 a las 14:29

Aquí teneis una muestra de un efecto que utilizan muchos periódicos y revistas. Consiste en dejar la primera letra del texto flotando a la izquierda, y con un tamaño mayor que las demás. Además su código CSS es muy fácil de implementar, tan solo aplicamos una clase a la primera letra. Hemos indicado que el texto flote a la izquierda, con un ancho mayor a lo normal, el tamaño de la fuente también lo hemos aumentado, y hemos situado la separación de línea al 80%. Si te gusta éste efecto, aquí tienes el código CSS utilizado:

TEXTO PLANO

CSS:

1. <style type="text/css">
2. .periodico
3. {
4. float:left;
5. width:0.7em;
6. font-size:400%;
7. font-family:verdana;
8. line-height:80%;
9. }
10. </style>

Una vez obtenido el código CSS, aplicarlo en HTML es muy simple:

TEXTO PLANO

HTML:

1. <p>
2. <span class="periodico">A</span>quí teneis...
3. </p>

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>