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
#1Michele
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 {
…
}
#2naqern
@Michele: già, ma ultimamente anche IE sta cercando di raddrizzarsi circa il rispetto degli standard, quindi speriamo bene 😉
ciao!
#3softcodex
come già scritto nel primo commento, la soluzione dovrebbe essere lo pseudoelemento :first-letter riferito al paragrafo.
#4Xox94
Odio IE… anch’io avrei adottato questa soluzione…
#5RainMan
Raga, io ho provato. Se uso il codice HTML nel post mi funziona, ma quando lo uso nel foglio di stile non funziona…a cosa potrebbe essere dovuto???
#6RainMan
Trovato l'errore. Bisogna mettere gli spazi prima delle dimensioni in pixel e copiare il codice nel file layout.css in alcuni temi di wordpress. Io uso il "Nature Shine" e ho fatto così.
#7RainMan
Correggo, il file anche su wordpress è style.css