Quando si visita una pagina Web, probabilmente incontrerete una serie di effetti diversi. Molti effetti, come dissolvenza, finiti con una combinazione di tecnologie. Questo non significa che essi sono complicati per produrre, ma usano più di solo codice HTML al fine di completare l'effetto.

HTML

HTML sta per Hyper Text Markup Language. È la lingua del Web. La sua funzione primaria consiste nel creare la struttura della pagina Web. Gli effetti o animazioni incluse nel Web non vengono create con il linguaggio HTML. HTML fornisce il quadro per gli effetti. Detta dove alcuni elementi verranno visualizzati nel browser. Si può costruire un'intera pagina Web in HTML, ma si sarebbe limitato in modo creativo. HTML è utilizzata principalmente per struttura e aggiunta di testo; altre funzionalità viene aggiunto con linguaggi di scripting e software di animazione.

CSS

CSS sta per Cascading Style Sheet. Gli elementi in una pagina Web sono in stile con i CSS. CSS consente un programmatore di dettare uno stile per un determinato elemento, quindi utilizzarlo per tutto un sito Web. Ciò significa che se si voleva tutte le intestazioni di essere audace e blu, è possibile definire questo stile con una riga di codice, e si applicherebbe a tutte le pagine nel sito. Questo elimina la necessità di ricodificare. Con HTML e CSS, è possibile aggiungere un effetto di sfumatura a un'immagine all'interno della pagina Web.

Alfa

Le modifiche di alfa filtro CSS verranno permetterà di modificare l'opacità dell'immagine. L'opacità determina come l'immagine apparirà sullo schermo. Più è bassa l'opacità, la più sbiadita l'immagine viene visualizzata. Creazione di una dissolvenza è il perfetto esempio di interazione tra HTML e CSS. Si utilizzerà HTML per indicare quale immagine si desidera posizionare sullo schermo e CSS a sbiadire l'immagine all'opacità appropriata.

< img width = "150" height = "150" alt = "MyImage" style="opacity:0.4;filter:alpha(opacity=40)" / >

La riga di codice sopra prende un file immagine chiamato "MyImage" e riduce l'opacità al 40 per cento. L'immagine avrà un po' più della metà in una dissolvenza quando il browser viene visualizzato.

Utilizza

L'effetto di dissolvenza può essere utilizzato in vari modi. È possibile utilizzare una sbiadita immagine come sfondo per l'intera pagina Web o posizionare una scatola trasparente su un'immagine per rendere più leggibile il testo. Opacità può essere modificata quando il visitatore del sito Web genera un evento. Ad esempio, è possibile sfumare un'immagine da un'opacità di 40 quando l'utente posiziona il mouse su di esso, quindi riportarlo al 100 una volta che il mouse lascia l'immagine. Questo tipo di effetto è utile quando si desidera indicare che l'utente ha "scelto" una particolare immagine. Un esempio di questo tipo di effetto possa essere trovato qui sotto.

< img style="opacity:1;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"

onmouseout="this.Style.Opacity=1;this.filters.Alpha.Opacity=100" / >