categorie articoli » tutorial
CSS: alpha filter
Stampa
l' articolo
Introduzione
Con questo primo articolo/tutorial voglio descrivere alcuni filtri CSS, parametri che permettono alcune funzioni particolari ed inoltre, offrono la possibilità di interagire con i principali linguaggi di scripting. Fino a non molto tempo fà, operare con questi filtri era "rischioso"; in pratica il supporto dei browser verso questo codice extra non era minimamente garantito. Adesso, con l' uscita delle nuove versioni di IE e di Firefox possiamo essere certi che a breve termine avremo una (quasi)completa "copertura"...
Questa premessa era necessaria anche per ribadire un concetto spesso poco considerati dal web design: fruibilità e compatibilità. Ma andiamo a descrivere il primo filtro che analizzeremo...
Descriveremo come inserire immagini con diversi valori di trasparenza e come utilizzare la trasparenza per gestire gli stati del mouse in un link:
Immagini in trasparenza
Queste quattro immagini rappresentano 4 livelli di trasparenza (0.25, 0.50, 0.75 e 1.0). Basterà salvalre quattro nuove classi nel foglio di stile e richiamarle nel nostro HTML... qui sotto le classi da inserire nel CSS:
Poi basterà inserire le classe nel file HTML in questo modo:
Immagine/link trasparente
In questo caso, utilizziamo il filtro alpha per modificare il pulsante al passaggio del mouse. Anche qui serviranno due classi per stabilire i valori di trasparenza dell' immagine.
Abbiamo realizzato entrambe le possibilità: link normale trasparente e piena opacità al passaggio del mouse e viceversa. Il codice dell' esempio riguarda il primo caso (il link di sinistra) ma basterà invertire i valori per ottenere l' effetto opposto...
Ecco il codice CSS:
E questo è il codice HTML:
Per ora è tutto, se volete ulteriori spunti vi invito a visitare il mio blog dove troverete questi ed altri utili hacks CSS, tutorial e risorse per webmaster in genere...
