Come utilizzare lo stile capolettera in blog e siti web

Come è noto (e non bisogna certo essere dei geek per saperlo), così come nel resto della nostra società, anche nel mondo del web l’occhio vuole la sua parte. Di conseguenza, inserire degli elementi grafici non importantissimi, ma che riescono al dare quel tocco di unicità alla propria creatura on-line è un qualcosa di incredibilmente importante.

Esempio lampante di questi piccoli elementi sono le lettere in stile capolettera, ovvero quei caratteri situati all’inizio di un paragrafo, con uno sfondo colorato ed una dimensione tale da coprire un paio di righe di testo, proprio come ben visibile dall’immagine a corredo di questo post.

Eccovi quindi una breve guida su come utilizzare lo stile capolettera in blog e siti web, nella quale iniziamo a vedere insieme come è fatto il codice html per applicarlo in modo generico:

< p >< span style="padding-left: 2px; font-size: 70px; background: #f8d456; float: left; padding-bottom: 2px; color: #ffffff; line-height: 55px; margin-right: 5px; padding-top: 2px; font-family: times; paddin-right: 2px" >T< /span >esto di prova< /p >


Dove al posto di #f8d456 va messo il codice html relativo al colore di sfondo da utilizzare e, al posto di #ffffff va messo il codice html relativo al colore della lettera. Se si ha intenzione di utilizzare sempre lo stile capolettera nel proprio blog o sito web, e quindi renderlo automatico, è possibile inserire questa porzione di codice nel file style.css di quest’ultimo:

.dropcap {
float:left;
color: #ffffff;
font-size:70px;
line-height:55px;
background: #f8d456;
padding: 2px 2px 2px 0;
margin: 0 5px 5px 0;
font-family: Times, serif, Georgia;
}

A questo punto, basterà inserire quanto segue in ogni post per avere lo stile capolettera in tutto il suo splendore:

< p >
< span class="dropcap" >T< /span >esto di prova.
< /p >

Ed ecco fatto. Se cercavate un modo simpatico e veloce per personalizzare il vostro blog o sito web, con lo stile capolettera avete decisamente trovato una delle maniere più azzeccate per farlo (ricordando di togliere gli spazi presenti nei tag di apertura e chiusura, utilizzati nelle porzioni di codice degli esempi).

Via | Instant Fundas