disign.it | Tipografia per web, capolettera crossbrowser | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.162 visualizzazioni

Tipografia per web, capolettera crossbrowser

23/11/2011

Per fare un capolettera i CSS3 permettono l'utilizzo di selettori appositi, ma se vogliamo ottenere lo stesso effetto senza avere nessun problema di compatibilità, possiamo utilizzare una classe ed applicarla alla prima lettera del paragrafo attraverso lo span.

Ecco il codice di esempio del CSS (le parentesi quadre vanno sostituite con le angolari)

 

[style type="text/css"]
#wrapper {
    width: 500px;
    margin: 0 auto;
    background-color: #FFF;
    font-family: Arial; 
    color: #333;
    font-size: 14px;
    overflow: auto;
}

.capolettera {
float: left; 
color: #900; 
font-size: 75px; 
line-height: 60px; 
padding-top: 4px; 
padding-right: 8px; 
padding-left: 3px; 
font-family: Arial; 

}
[/style]

Ed ecco il codice HTML di applicazione (le parentesi quadre vanno sostituite con le angolari)

[div id="wrapper"]
[p]
[span class="capolettera"]L[/span] orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
[/p]
[/div]

← Javascript: funzione sostitutiva htmlentities iPhone e iPad: font di sistema utlizzabili per sviluppo web →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.