Un foglio di stile a cascata è un'istruzione di stile che viene utilizzata per aggiungere effetti e proprietà ai contenuti creati e creati utilizzando il codice HTML. Tutti gli elementi formati sono progettati tramite CSS. Entrambi i linguaggi HTML e CSS vengono utilizzati per sviluppare e progettare il front-end del sito Web, una pagina web statica o un sito Web dinamico. In questo articolo, parleremo di una proprietà di CSS in cui i contenuti del corpo HTML sono sbiaditi quando applichiamo qualsiasi condizione su di essi (i.e., una transizione, onload della pagina web.)

Introduzione a HTML e CSS:

Il codice HTML ha elementi diversi, come testo, immagini, video, animazioni, paragrafi e ecc. Poiché altri linguaggi di programmazione hanno query o codici, HTML contiene tag. L'utente deve avere conoscenza dei tag di base di HTML. La sintassi di base dei tag HTML è:

HTML ha due sezioni: porzioni di testa e corpo. D'altra parte, utilizziamo CSS con un tag di apertura e chiusura . Il foglio di stile a cascata (CSS) contiene altri tre tipi di stile: CSS in linea, interni ed esterni. Il CSS in linea è quello che viene dichiarato all'interno del tag HTML scritto nella sezione del corpo. Il secondo è il tag interno che viene dichiarato all'interno della parte della testa del tag HTML. Il terzo è esterno, come mostra che è dichiarato in un altro file al di fuori del tag HTML. Tutta questa panoramica è fornita perché l'utente dovrebbe conoscere i tipi di dichiarazioni CSS. Perché abbiamo usato i primi due tipi di CSS in linea e CSS interni, in questo articolo.

Fade in transizione:

Fade è una proprietà unica di CSS che fa scomparire il contenuto di HTML. Lo scopo di utilizzare la proprietà Fade è quello di richiedere l'attenzione dell'utente o di avvisare alcune informazioni sull'utente. Questo effetto di dissolvenza è diverso dall'effetto lampeggiante, poiché la proprietà lampeggiante fa sì che il contenuto mantenga il processo di nascita. Ma la proprietà di dissolvenza una volta appare dopo lo sbiadimento non viene nuovamente sbiadita a meno che la pagina non venga ricaricata. Principalmente la proprietà di transizione viene utilizzata su caricamento della pagina web. In altre parole, quando viene caricata la pagina web, inizialmente la pagina è vuota.

Proprietà di transizione impostando l'opacità su 1 quando viene caricata la pagina:

Questa è la metodologia in cui il corpo è impostato sull'opacità 0 al livello iniziale. Quindi, la proprietà di transizione viene utilizzata qui per animare la proprietà di transizione quando viene modificata. Utilizzando l'evento Onload, impostiamo la proprietà dell'opacità come 1 quando viene caricata la pagina Web. A causa della transizione, la modifica dell'opacità che applichiamo nel CSS verrà utilizzata per sbiadire la pagina.

Esempio:
Abbiamo usato un semplice esempio per approfondire il funzionamento degli effetti di dissolvenza sulla transizione. Possiamo usare qualsiasi effetto per mostrare il contenuto dello sbiadimento HTML. In questo esempio, abbiamo usato semplici testi sotto forma di intestazione e paragrafi. Ora, facciamo capire il codice HTML e CSS utilizzato per ottenere l'effetto di dissolvenza in transizione.

All'interno della sezione testa, citiamo il titolo della pagina. Quindi, vengono utilizzati i tag di stile. Questa modalità di stile è di stile interno, poiché l'intero codice è definito nel tag principale. All'interno del tag di stile, abbiamo preso di mira l'intero corpo dell'HTML, su cui abbiamo applicato l'effetto opacità di 0. Significa quando la pagina Web viene caricata all'inizio, la pagina Web è vuota nel suo insieme. Nel frattempo, dopo 3 secondi di transizione, il corpo di HTML è visibile. Questa proprietà viene eseguita attraverso il valore di transizione dello stile CSS, l'opacità della transizione è impostata come 3s.

Usando queste proprietà, l'intero contenuto all'interno del corpo (testo o qualsiasi immagine) avrà zero opacità. Ma dopo un tempo specificato, tutti i contenuti saranno visibili.

Codice CSS:

In direzione della sezione del corpo dei tag HTML, abbiamo applicato un effetto di carico. Oppure, l'opacità del corpo è impostata come 1, dopo l'effetto sbiadito.

< body onload = "document.body.style.opacity = '1'">

Dopodiché, il colore dello sfondo del corpo è impostato su nero. Un'intestazione

il nome è dichiarato. Abbiamo aggiunto uno stile in linea nel tag aggiungendo la proprietà bianca del carattere all'intestazione. Quindi, chiudere il tag di intestazione.

Codice corporeo HTML:

Allo stesso modo, un semplice testo con un audace La funzione viene aggiunta e la stessa proprietà del carattere viene aggiunta al testo in grassetto tramite il CSS in linea.

< p style = "color: white" >

Alla fine, l'ultimo contenuto che viene aggiunto al corpo è il paragrafo

avere uno stile in linea. Chiudi tutti i tag e salva il file di testo con un'estensione di ".html 'come il nome del file di testo che abbiamo usato è il campione.html. Lo scopo di questa estensione è di aprire questo file nel blocco note e anche nel browser. Mentre il '.L'estensione txt aprirà tutto il testo quando viene eseguito nel browser. Ma quando apriamo il file nel browser con un'estensione HTML, formerà la pagina Web in base al contenuto di HTML.

Abbiamo allegato una piccola parte del video che mostra l'effetto di transizione di dissolvenza sull'esecuzione del file.

Produzione:
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/css-fade-in-transition.MP400: 0000: 0000: 10 Up/giù tasti freccia per aumentare o diminuire il volume.

Quando la pagina viene caricata all'apertura del file sul browser, lo vedrai all'inizio, il corpo non viene mostrato, ma dopo 3 secondi il contenuto creato nel corpo viene mostrato insieme. Ogni volta che ricariamo la pagina, tutte le parti del corpo vengono aggiornate. Inizialmente, sono sbiaditi ma poi il testo viene visualizzato quando viene superato il periodo menzionato nel CSS. Abbiamo usato il tasto 'f5' per ricaricare di nuovo la pagina.

Possiamo anche cambiare il tempo che abbiamo menzionato secondo il nostro desiderio. Allo stesso modo, tutti gli effetti di dissolvenza possono essere applicati solo a qualsiasi parte specifica del contenuto HTML invece di applicare a tutto il corpo. Con ciò, puoi concentrarti direttamente sulla parte specificata della pagina web.

Conclusione:

L'articolo CSS Fade in Transition è costituito dallo sbiadimento della proprietà di transizione e nella visualizzazione dei dati HTML. Abbiamo introdotto l'uso di base delle lingue HTML e CSS e dei loro tipi. La distribuzione dei tag e lo scopo di entrambe le lingue sono elaborati. Successivamente, abbiamo discusso della proprietà di transizione relativa all'effetto opacità nello stile delle proprietà CC. Una semplice funzione di testo viene utilizzata nella porzione del corpo. L'intero corpo viene applicato con l'effetto di transizione.