Come utilizzare lo stile capolettera in blog e siti web
Di Andrea Guida (Naqern), in Blog, Grafica, Guide, HTML, Internet, Web 2.0, Web 2.0, Wordpress, Wordpress.
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
3 Commenti
Scritto da Andrea Guida (Naqern)
Calciopro
CineTivu
Dissacration
Finanzalive
Geekissimo
GingerAndTomato
GuadagnoRisparmiando
IoChiamo
IoVideogioco
Medicinalive
Politicalive
Starlettime
TheAppleLounge
UltimoGiro
Ecologiae
Lussuosissimo
MondoReality
IlCinemaniaco
Se Internet Explorer rispettasse gli standard non occorrerebbe sporcare il codice HTML con uno span e una classe ma basterebbe nel CSS utilizzare la specifica del W3C:
p:first-letter {
…
}
@Michele: già , ma ultimamente anche IE sta cercando di raddrizzarsi circa il rispetto degli standard, quindi speriamo bene
ciao!
come già scritto nel primo commento, la soluzione dovrebbe essere lo pseudoelemento :first-letter riferito al paragrafo.