Geekissimo

Come utilizzare lo stile capolettera in blog e siti web

 
Andrea Guida (@naqern)
30 maggio 2008
7 commenti

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).

Potrebbe interessarti anche
Articoli Correlati
Come evitare l’indicizzazione da parte di Google delle immagini contenute nel proprio blog WordPress

Come evitare l’indicizzazione da parte di Google delle immagini contenute nel proprio blog WordPress

Alzi la mano chi, almeno una volta nella sua vita da navigatore nella grande rete, non ha utilizzato l’ottimo servizio di ricerca delle immagini messo a nostra disposizione da Google. […]

I migliori plugin di WordPress per blogger esperti

I migliori plugin di WordPress per blogger esperti

Carissimi amici geek vicini e lontani, se gestite da un po’ di tempo un blog basato su piattaforma WordPress ed intendete pubblicare in esso dei contenuti complessi, come porzioni di […]

Cosa fare prima di aggiornare WordPress

Cosa fare prima di aggiornare WordPress

Croce e delizia di ogni blogger, gli aggiornamenti di WordPress sono sempre un importante passo da compiere per chiunque gestisca un blog basato proprio sulla ormai celeberrima piattaforma open source. […]

10 semplici consigli per ottimizzare il lavoro di blogger

10 semplici consigli per ottimizzare il lavoro di blogger

Chiunque gestisca uno o più blog, sa sicuramente quanto è difficile ottimizzare i tempi e riuscire a scrivere tutto al meglio, ovvero senza distrazioni di sorta. Oggi noi di Geekissimo […]

Blog: 9 consigli utili per conquistare i lettori a prima vista

Blog: 9 consigli utili per conquistare i lettori a prima vista

Oggi noi di Geekissimo vogliamo tornare a dare consigli, che speriamo utili, ai blogger, o meglio, ai futuri blogger. Adesso vedremo infatti insieme ben 9 consigli utili per conquistare i […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento

 

  • #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 {

    }

    30 Mag 2008, 10:27 am Rispondi|Quota
  • #2naqern

    @Michele: già, ma ultimamente anche IE sta cercando di raddrizzarsi circa il rispetto degli standard, quindi speriamo bene 😉

    ciao!

    30 Mag 2008, 10:44 am Rispondi|Quota
  • #3softcodex

    come già scritto nel primo commento, la soluzione dovrebbe essere lo pseudoelemento :first-letter riferito al paragrafo.

    30 Mag 2008, 11:45 am Rispondi|Quota
  • #4Xox94

    Odio IE… anch’io avrei adottato questa soluzione…

    15 Nov 2009, 1:17 pm Rispondi|Quota
  • #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???

    8 Dic 2009, 12:21 pm Rispondi|Quota
    • #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ì.

      8 Dic 2009, 12:33 pm Rispondi|Quota
      • #7RainMan

        Correggo, il file anche su wordpress è style.css

        8 Dic 2009, 12:40 pm Rispondi|Quota