CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 17 ani
Postari: 197
|
|
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:
Figura 3 - Gradiente Bianco-Trasparente
gradiente
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.
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
