Une feuille de style en cascade est une déclaration de style qui est utilisée pour ajouter des effets et des propriétés au contenu créé et construit à l'aide du code HTML. Tous les éléments formés sont conçus via CSS. Les langues HTML et CSS sont utilisées pour développer et concevoir le front-end du site Web, soit une page Web statique ou un site Web dynamique. Dans cet article, nous parlerons d'une propriété de CSS dans laquelle le contenu du corps HTML est disparu lorsque nous appliquons une condition sur eux (je.e., une transition, sur la page Web.)

Introduction à HTML et CSS:

Le code HTML a différents éléments, comme du texte, des images, des vidéos, des animations, des paragraphes, et etc. Comme d'autres langages de programmation ont une requête ou des codes, HTML contient des balises. L'utilisateur doit avoir des connaissances sur les balises de base de HTML. La syntaxe de base des balises HTML est:

HTML a deux sections: les portions de la tête et du corps. D'un autre côté, nous utilisons CSS avec une balise d'ouverture et de clôture . La feuille de style en cascade (CSS) contient trois autres types de style: CSS en ligne, interne et externe. Le CSS en ligne est celui qui est déclaré à l'intérieur de la balise HTML écrite dans la section Body. Le second est l'étiquette interne qui est déclarée à l'intérieur de la partie tête de la balise HTML. Le troisième est externe, car son nom montre qu'il est déclaré dans un autre fichier à l'extérieur de la balise HTML. Tout cet aperçu est donné car l'utilisateur doit connaître les types de déclarations CSS. Parce que nous avons utilisé les deux premiers types de CSS qui sont en ligne et CSS internes dans cet article.

Fade en transition:

Fade est une propriété unique de CSS qui fait disparaître le contenu de HTML. Le but de l'utilisation de la propriété Fade est de rechercher l'attention de l'utilisateur ou d'informer l'utilisateur avec certaines informations. Cet effet de fondu est différent de l'effet clignotant, car la propriété clignotante fait que le contenu continue sur le processus de cachette. Mais la propriété Fade apparaît une fois après la décoloration n'est pas s'estompée à moins que la page ne soit rechargée. Principalement la propriété de transition est utilisée sur la page Web. En d'autres termes, à mesure que la page Web est chargée, la page est initialement vide.

Propriété de transition en définissant l'opacité sur 1 lorsque la page est chargée:

C'est la méthodologie dans laquelle le corps est réglé sur l'opacité 0 au niveau initial. Ensuite, la propriété de transition est utilisée ici pour animer la propriété de transition lorsqu'elle est modifiée. En utilisant l'événement Onload, nous définissons la propriété d'opacité comme 1 lorsque la page Web est chargée. En raison de la transition, le changement d'opacité que nous appliquons dans le CSS sera utilisé pour décolorer la page.

Exemple:
Nous avons utilisé un exemple simple pour développer le fonctionnement des effets de fondu sur la transition. Nous pouvons utiliser n'importe quel effet pour montrer le contenu de la décoloration HTML. Dans cet exemple, nous avons utilisé des textes simples sous forme de cap et de paragraphes. Maintenant, comprenons le code HTML et CSS qui est utilisé pour accomplir l'effet de fondu dans la transition.

À l'intérieur de la section Head, nous mentionnons le titre de la page. Ensuite, les balises de style sont utilisées. Ce mode de style est de style interne, car le code entier est défini dans la balise de tête. À l'intérieur de la balise de style, nous avons ciblé tout le corps du HTML, sur lequel nous avons appliqué l'effet d'opacité de 0. Cela signifie que lorsque la page Web est chargée au début, la page Web est blanchie dans son ensemble. Pendant ce temps, après 3 secondes de transition, le corps de HTML est visible. Cette propriété se fait grâce à la valeur de transition du style CSS, l'opacité de la transition est définie comme 3S.

En utilisant ces propriétés, l'ensemble du contenu à l'intérieur du corps (texte ou aucune image) n'aura aucune opacité. Mais après une heure spécifiée, tout le contenu sera visible.

Code CSS:

En direction de la section corporelle des étiquettes HTML, nous avons appliqué un effet de charge. Ou, l'opacité du corps est définie comme 1, après l'effet délavé.

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

Après cela, la couleur de fond du corps est définie sur le noir. Un en-tête

Le nom est déclaré. Nous avons ajouté un style en ligne dans la balise en ajoutant la propriété blanche de couleur de police à la tête. Ensuite, fermez la balise d'en-tête.

Code corporel HTML:

De même, un texte simple avec un gras La fonctionnalité est ajoutée et la même propriété de police est ajoutée au texte en gras via le CSS en ligne.

< p style = "color: white" >

En fin de compte, le dernier contenu ajouté au corps est le paragraphe

avoir un style en ligne. Fermez toutes les balises et enregistrez le fichier texte avec une extension de '.html 'comme nom du fichier texte que nous avons utilisé est un exemple.html. Le but de cette extension est d'ouvrir ce fichier dans le bloc-notes et le navigateur également. Tandis que le '.Txt 'Extension ouvrira tout le texte lorsqu'il sera exécuté dans le navigateur. Mais lorsque nous ouvrons le fichier dans le navigateur avec une extension HTML, il formera la page Web en fonction du contenu HTML.

Nous avons joint une petite partie de la vidéo qui affiche l'effet de transition fondu sur l'exécution du fichier.

Sortir:
Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / css-fade-in-transition.MP400: 0000: 0000: 10 Flèches Utiliser / bas pour augmenter ou diminuer le volume.

Lorsque la page est chargée lors de l'ouverture du fichier sur le navigateur, vous verrez qu'au début, le corps n'est pas affiché, mais après 3 secondes, le contenu créé dans le corps est affiché ensemble. Chaque fois que nous rechargeons la page, toutes les parties du corps sont rafraîchies. Initialement, ils sont fanés mais le texte s'affiche alors que la période mentionnée dans le CSS est passé. Nous avons utilisé la clé «F5» pour recharger la page à nouveau.

Nous pouvons également changer le temps que nous avons mentionné selon notre désir. De même, tous les effets de fondu ne peuvent être appliqués qu'à n'importe quelle partie spécifique du contenu HTML au lieu de s'appliquer au corps entier. Avec cela, vous pouvez vous concentrer directement sur la partie spécifiée de la page Web.

Conclusion:

CSS Fade dans l'article de transition se compose de la décoloration de la propriété de transition et de l'affichage des données HTML. Nous avons introduit l'utilisation de base des langues HTML et CSS et leurs types. La distribution des tags et le but des deux langues sont élaborés. Ensuite, nous avons discuté de la propriété de transition liée à l'effet d'opacité dans le style des propriétés CC. Une fonction de texte simple est utilisée dans la partie corps. Le corps entier est appliqué avec l'effet de transition.