L'idea di aggiungere una cornice ad una pagina web è venuta per prima a
Jon Hicks e a Justin Kropp, che l'hanno utilizzata per il redesign dei
rispettivi siti.
Il concetto è quello di creare un bordo intorno non tanto alla pagina in sé, ma al viewport del browser: in questo modo il risultato finale è
quello di trasformare il browser stesso in una sorta di cornice. A causa
delle scrollbar, però, non è possibile implementare questo effetto attarverso
un semplice
body { border: 10px red; }
ma è necessario ricorrere a markup aggiuntivo, da posizionare in modalità
fissa (fixed).
Il markup
Visto che la cornice esiste su quattro lati, gli elementi di cui avremo
bisgno saranno esattamente quattro div:
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
Questi quattro elementi verranno posizionati ognugno su un lato della
pagina, dimensionati a dovere e riempiti con un colore di sfondo (tanto per
partire con un esempio semplice).
Lo stile
Per prima cosa definiamo la posizione e il colore della cornice:
#top, #right, #bottom, #left {
background: #ff0000;
position: fixed;
}
Dopodiché sistemiamo ogni elemento su un lato:
#top { top: 0; left: 0; right: 0; }
#right { right: 0; top: 0; bottom: 0; }
#bottom { bottom: 0; left: 0; right: 0; }
#left { left: 0; top: 0; bottom: 0; }
Adesso impostiamo la dimensione, che sarà gestita con width per gli
elementi a sinistra e a destra, e con height per quelli in alto e in
basso:
#top, #bottom { height: 20px; }
#left, #right { width: 10px; }
Per finire, dobbiamo imporre alla cornice di rimanere sempre in primo
piano. Per farlo ci serviamo di z-index:
#top, #right, #bottom, #left { z-index: 9999; }
L'esempio base è così concluso, e per amor di
completezza riportiamo una versione compattata del CSS fin qui visto:
#top, #right, #bottom, #left {
background: #ff0000;
position: fixed;
z-index: 9999;
}
#left, #right {
top: 0; bottom: 0;
width: 20px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 20px;
}
#top { top: 0; }
#bottom { bottom: 0; }
Background trasparenti
Adesso che abbiamo la nostra cornice funzionante possiamo
sbizzarrirci. Ad esempio niente ci vieta (compatibilità cross-browser a
parte) di usare delle png trasparenti come immagini di sfondo: basta creare
una png semitrasparente di 1px x 1px e applicarla come sfondo:
#top, #right, #bottom, #left { background: url(bg.png)
repeat; }
In questo modo la cornice risulta in trasparenza sul resto della pagina
(esempio).
C'è il problema, però, che sugli angoli i div si incrociano e la trasparenza
perde di uniformità: per risolvere occorre rimettere mano al CSS e traslare
ogni div nell'opportuna direzione per una lunghezza pari alla dimensione
scelta (nel nostro caso 20px):
#top { right: 20px; }
#right { bottom: 20px; }
#bottom { left: 20px; }
#left { top: 20px; }
Ecco il risultato finale.
Fade-away
Sempre utilizzando lo stesso markup, possiamo anche implementare un
effetto sfumatura alla pagina. Per farlo necessitiamo di una png alta quanto
la dimensione della cornice, con un gradiente che dal colore di sfondo passa
alla trasparenza (salviamola come bg1.png). Come in figura:
Salviamo una copia simmetrica orizzontalmente della stessa png, così da
avere la sfumatura in senso opposto (salviamola come bg2.png). La prima la
applicheremo a #top e la seconda a #bottom. Per questo effetto, #left e
#right non sono necessari:
#top { background: url(bg1.png) repeat-x; }
#bottom { background: url(bg2.png) repeat-x; }
#left, #right { display:none; }
Dimensioniamo la cornice in modo che sia alta quanto la lunghezza del
gradiente nell'immagine di sfondo (se è poco spessa l'effetto sarà minimo, ma
attenzione che una cornice troppo alta potrebbe rendere il vostro sito
inusabile):
#top, #bottom { height: 50px; }
Oppure, di nuovo, per selezionare tutte le parole marcate da
<strong> dentro ai paragrafi:
h2:target + p > strong { background: #000000; color:
#ffffff; }
Et voilà: l'esempio finale all'opera.
Conclusioni
La resa cross-browser di questa tecnica è ottima, tranne che per un unico
neo: Internet Explorer 6. La soluzione migliore, visto che su questa versione
del browser non funziona, è quella di disabilitare la cornice con i commenti
condizionali:
[if lte IE 6]
>#top, #bottom, #left, #right { display: none; }
<![endif]
Per il resto Firefox, Safari, Opera, e IE 7 rendono il tutto più che bene.
Ovviamente queste considerazioni valgono per l'esempio di base: se siete
intenzionati ad utilizzare le png trasparenti dovrete tenere in
considerazione il fatto che queste ultime non sono ben supportate ovunque.
Tutti gli esempi e le immagini usate sono disponibili per il download.
