Trasparenza tag: regola opacità CSS
Il design del sito e il suo dialogo con il visitatore possono essere efficacemente eseguiti usando l'effetto della trasparenza. La regola di opacità CSS offre la possibilità di impostare la trasparenza del contenuto del tag da 0 a 1, ovvero, dalla trasparenza completa alla totale opacità.
Come regola generale, la trasparenza è rettangolare. Ma se si utilizza la regola: background-color: transparent e la forma dell'immagine (ad esempio, nel formato * .png), che è diversa da quella rettangolare, è possibile ottenere quasi tutti gli effetti.
Sintassi della regola di trasparenza
Usando la costruzione: opacità: 0.4 - nella descrizione dello stile identificativo o classe rende la trasparenza del tag a cui sono applicati, il 40%. Il valore di trasparenza dello stile è scritto con il numero da 0 a 1. Il bordo inferiore significa piena trasparenza, cioè il tag non sarà visibile, e il bordo superiore è opacità totale, cioè tutto ciò che è sotto il tag non sarà visibile.
Si noti che la regola dell'opacità CSS influisce sia sullo sfondo (colore, immagine) che sulla cornice e sul testo nel tag. Perché progettare, in particolare, finestra di dialogo è consigliabile separare il suo sfondo dal testo su di esso (creando stili diversi per questi elementi) o scegliere colori che sembrano buoni rispetto allo sfondo generale della pagina al livello di trasparenza selezionato.
Visibilità trasparente degli elementi
Anche se la trasparenza è zero, cioè l'elemento è invisibile, è presente nella finestra del browser e può generare eventi.
In questo caso, un tag con un cerchio di farfalle viene posizionato su un'immagine con fragole, e in esso c'è un tag con il testo Click Me! La trasparenza del tag con la farfalla è 0,5, e con il testo - 1, rispettivamente, il testo è completamente opaco.
Se nel tag di testo imposti un gestore di eventi, ad esempio onclick, indipendentemente dal livello di trasparenza di questo tag, un clic sulla sua posizione funzionerà sempre.
Applicazione della regola della trasparenza
La logica di applicare la regola della trasparenza nello sfondo CSS di qualità classica, opacità = 0.3 - 0.5: un messaggio o una finestra di dialogo si apre sopra lo sfondo generale della pagina, coprendolo solo e conduce un dialogo con il visitatore. Questa pratica è già diventata abituale, che un sito senza questa funzionalità non è più considerato moderno.
Nel frattempo, la regola della trasparenza ha altri usi. Prima di tutto è l'animazione: sia attraverso le regole CSS, sia controllata dal codice JavaScript. La prima opzione è preferibile, ad esempio, modificando l'opacità CSS nei frame @keyframes utilizzati nella regola di animazione CSS, è possibile animare in modo rapido ed efficiente il pulsante di menu, il logo aziendale, qualsiasi altro tag all'interno del significato del contenuto del sito.
L'utilizzo di diversi livelli di trasparenza nei tag sovrapposti consente di creare effetti visivi originali. Sfortunatamente, la trasparenza dei dispositivi che non supportano il mouse non consente di rivelare alcune idee visive interessanti, ma se si utilizza la regola dell'opacità CSS ritardata, il movimento delle dita sullo schermo dello smartphone, ad esempio, può anche essere animato in modi imprevisti.