Oggi vediamo come utilizzare una funzionalità in css per creare un effetto tipico delle favole che consiste di dare un tocco particolare alla prima lettera del inizio della storia.
Questo effetto verrà dato al primo carattere di ogni paragrafo.
Pagina html
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>First-Letter</title> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <p>C'<br><br>era una volta</p> </body> </html> |
Foglio di Stile
1 2 3 4 5 6 7 8 |
p:first-letter { display:block; /* Ogni paragrafo si comporto come un blocco */ margin:5px 0 0 5px; /* Margini */ float:left; /* Allineamento a destra */ color:#CFB53B; /* Colore */ font-size:70px; /* Grandezza Font */ font-family:Verdana; /* Tipo di font */ } |