beautyfarm - THE BEST DESIGN
DOWNLOAD MY MUSIK,participa la concursuri,soft-uri,cool stuff,NIKON CLUB,Baruri Trendy,ScreenSavers,Accesorii Cool,Masini sexy,Bannere,Games,Aparitii Cinematografice,Tribal Farm...etc distreaza-te!Totul pentru TINE.Cele mai tari subiecte.
|
Lista Forumurilor Pe Tematici
|
beautyfarm - THE BEST DESIGN | Inregistrare | Login
POZE BEAUTYFARM - THE BEST DESIGN
Nu sunteti logat.
|
Nou pe simpatie:
AlessyaDaniela pe Simpatie.ro
 | Femeie
24 ani
Bucuresti
cauta Barbat
25 - 50 ani |
|
CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 16 ani
Postari: 197
|
|
Effetto Gloss con le PNG semitrasparenti
L'idea di base del primo esempio, ripresa dagli articoli citati in apertura, è piuttosto semplice: all'interno dei titoli h2 su cui si vorrà avere l'effetto gloss basta inserire nell'HTML un elemento span vuoto che precede il testo:
<h2><span></span>Il mio testo gloss con i CSS</h2>
Lo span verrà poi disposto sopra al titolo grazie ai posizionamenti assoluti, con una tecnica molto simile alla cover-up span. Lo span, largo il 100% e alto la metà del titolo, verrà quindi posizionato sopra il titolo e grazie a una PNG semitrasparente darà l'effetto voluto.
L'immagine di sfondo usata è una PNG grande 10 per 20 pixel con un gradiente che va dal bianco al trasparente, e consente di ottenere un effetto gloss sul testo di qualsiasi colore, a patto che sia su sfondo bianco. Vediamo le due regole dell'esempio con le dichiarazioni chiave in grassetto:
h2{position: relative;font: bold 250%/1 Tahoma,Arial,sans-serif;
text-transform: uppercase;margin: 1em 0 0;color: #56B11A}
h2>span{position: absolute;top: 0;
width: 100%;height: 55%;
background: url(bk.png) repeat-x}
Da notare che viene usato come selettore della seconda il child selector (h2>span), per nascondere la regola a IE6 e versioni inferiori, dato che le vecchie versioni di IE non hanno supporto per la semitrasparenza delle PNG. L'esempio avrà comunque il testo gloss su IE7 e le ultime versioni di Opera, Firefox e Safari.
Effetto Gloss con l'opacità variabile
C'è una soluzione alternativa al primo esempio appena visto che non richiede l'impiego delle immagini PNG semitrasparenti ma usa la proprietà opacity che è supportata dalle versioni recenti di Firefox, Opera e Safari. Vediamo il secondo esempio e le due regole CSS:
h2{position: relative}
h2>span{position: absolute;width: 100%;
height: 50%;background: #FFF;opacity: 0.6}
Per estendere l'effetto anche ad IE7, basterà usare la soluzione proprietaria equivalente a opacity, che è filter. La dichiarazione specifica per IE verrà aggiunta mediante il commento condizionale, ecco il codice necessario:
<!--[if gte IE 7]>
<style type="text/css">h2>span{filter:alpha(opacity=60)}</style>
<![endif]-->
Il nostro esempio è così ultimato, e potremo decidere se ottenere un'effetto più o meno marcato solo intervenendo con il CSS. A tal proposito, ricordo che la proprietà opacity accetta un valore decimale da 0 a 1, dove 0 rappresenta un elemento totalmente trasparente e 1 dà un elemento totalmente coprente. Per la proprietà filter di IE, i valori vanno specificati in un range da 0 a 100, dove con 100 si avrà un elemento privo di trasparenza, ovvero totalmente coprente.
Ricordo infine che la proprietà opacity appartiene ai CSS 3, e sarà necessario usare questo profilo per passare la prova del validatore.
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
| pus acum 16 ani |
|
