CSS filter: dropshadow
I filtri CSS: grazie agli aggiornamenti delle versioni dei browser maggiormente diffusi, possiamo divertirci con i fogli di stile garantendo un buon livello di "copertura"; del resto era da parecchio che, sia IE che Firefox, supportavano le maggiori novità introdotte dai CSS 2.0 e le nuove versioni spostano ancora in avanti le possibilità offerte al web-designer... i comportamenti dei vari browser in relazione alle "nuove regole" potete trovarli in questa ottima tabella.
Ma andiamo con ordine, o meglio, introduciamo alcuni filtri di base a livello di design: il primo della serie (nessun valore in particolare, ma uno ne serviva per iniziare questa mini-guida) è il DropShadow; si tratta di un ombra inserita "sotto" il testo (o un immagine).
I parametri a disposizione :
Color - il colore dell' ombra in valore esadecimale.
Offx - lo "scostamento" sull' asse x dell' ombra in pixel; valori positivi spostano l' ombra verso destra mentre al contrario, valori negativi verso destra.
Offy - lo "scostamento" sull' asse y; valori positivi spostano l' ombra verso il basso mentre valori negativi verso l' alto.
Positive - può avere valore true (vero) o false (falso), di default il valore è true e l' ombra è applicata ai pixel opachi (o pieni) mentre false applicherà l' ombra ai pixel trasparenti.
Questo è il codice CSS da inserire nel foglio di stile:
widht:200px;
height:80px;
filter:dropshadow(color=#FF9900,offx=3, offy=3);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 34px;
color: #0066FF;
font-weight: bold;
}
E questo è l' HTML:
Questo il risultato con la classe applicata al testo
DropShadow
|
Permalink |
|
