Programmazione Web » Css » Simulare l'effetto giornale in una pagina web
Simulare l'effetto giornale in una pagina web
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1251 volte
Abbiamo visto in una lezione precedente com'è possibile cambiare gli attributi della prima lettera di un elemento. Questa volta riprenderemo lo stesso argomento per creare un effetto tipo quello degli articoli di giornale, in cui la dimensione della prima lettera è più grande di quella del resto dell'articolo.
Oltre alla classica proprietà font-size (sappiamo tutti a cosa serve) utilizzeremo il float, la cui particolarità sta nella capacità di far disporre attorno a sè tutti gli elementi che seguono (nel nostro caso il resto del paragrafo).
Vediamo come realizzare questo effetto... incolliamo questo codice tra i tag head:
<style>
body {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p:first-letter {
font: italic;
color:#990000;
font-size:36px;
float: left;
vertical-align:top;
}
</style>
e la porzione di codice seguente in un punto qualsiasi del body:
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
Dichiarando il float come left non abbiamo fatto altro che disporre la prima lettera a sinistra e lasciarla circondare dal testo che segue. Semplice vero?
Aggiungi questo tutorial ai preferiti
