Lauryn Web Design - Milano, Edimburgo e online

Pseudo classe :first-letter, l'avete mai provata?

Guardate questi due esempi:

Ho fatto due esempi per spiegarvi la pseudo classe :first-letter. Io la trovo molto carina da usare in alcune occasioni. Ricorda molto il vecchio modo di tipografare dei monaci certosini, no? ahah

Ecco il codice usato nel css:

1° esempio usando vertical-align invece del float:

p:first-letter {
color: #fff;
font-size: 30px;
background-color:#ccc;
padding: 4px 8px;
border: 1px solid #666;
margin: 0 4px 0 0;
vertical-align: bottom;
font-family:Georgia, “Times New Roman”, Times, serif;
}

2° esempio usando invece il float:

p:first-letter {
color: #fff;
font-size: 30px;
background-color:#ccc;
padding: 4px 8px;
border: 1px solid #666;
margin: 0 4px 0 0;
float: left;
font-family:Georgia, “Times New Roman”, Times, serif;
}

ovviamente l’html sarà semplicemente:

Testo da inserire

vi rimando alla guida della w3c schools per conoscere tutte le proprietà usabili 😉

Se ti è piaciuto condividilo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *