HTML and CSS Reference
In-Depth Information
sultando parzialmente visibile anche sopra e a sinistra.
Combinando opportunamente le diverse proprietà CSS, possiamo ottenere effetti inte-
ressanti per personalizzare in modo semplice l'aspetto delle nostre pagine senza dover in-
tervenire sul markup esistente, per esempio per creare delle sovrastrutture.
L'esempio 6.10
mostra l'ipotetico sorgente HTML per la presentazione di un articolo, con un
header
con-
tenente il titolo, una nota e un paragrafo di testo (il cui contenuto è stato troncato per bre-
vità).
Esempio 6.10
<article>
<header>
<h1>HTML5 Espresso</h1>
<p>di: Bochicchio, Mostarda</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur [...]</p>
</article>
Applicando le tecniche di controllo dell'impaginazione e di formattazione del testo, par-
tendo dal markup
dell'esempio 6.10
, possiamo facilmente ottenere un layout grafico come
quello mostrato nella
figura 6.8
.
Per ottenere il risultato visualizzato nella
figura 6.8
,
sono state usate molte delle tec-
niche e delle proprietà CSS che abbiamo visto nel corso di questo capitolo: uso di font
personalizzati (per il titolo, mostrato con un carattere che ricorda la scrittura “a mano”),
ombreggiatura del testo e del contenitore, impaginazione del contenuto in colonne, sfondi
con gradiente di sfumatura, bordi arrotondati ecc. Si tratta di un esempio molto semplice,
realizzato con un foglio stile di poche righe, ma comunque in grado di farci apprezzare le
potenzialità di CSS per il controllo dell'aspetto della pagina.
