Dans cette vidéo tutorielle, le créateur montre pas à pas comment réaliser un formulaire d'authentification avec un arrière‑plan animé uniquement à l’aide de HTML et CSS. Il commence par structurer la page : une balise <section> occupe 100 vh, porte une image de fond (art.png) et utilise flexbox pour centrer le formulaire. Le formulaire reçoit une largeur fixe de 500 px, un fond noir semi‑transparent (rgba(0,0,0,0.4)), du padding, le box‑sizing border‑box et des coins arrondis. Les trois champs (texte, mot de passe, bouton submit) sont stylisés via le sélecteur input : affichage en bloc, largeur de 300 px, marges et padding, suppression du contour et de la bordure, box‑sizing border‑box et border‑radius. Le bouton submit obtient une couleur de fond verte (#0e0), du texte en gras et un curseur pointer. Ensuite, il ajoute une animation CSS au conteneur <section> en définissant animation‑name, duration (5 s), iteration‑count (infinite) et timing‑function (linear). Les @keyframes « back » font varier la propriété filter : hue‑rotate de 0° à 360°, créant un effet de changement cyclique des couleurs de l’image de fond. Le résultat est un formulaire centré, élégant, avec un arrière‑plan dont les teintes évoluent en continu.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle astuce. Aujourd'hui, nous allons voir comment créer un formulaire d'authentification dont l'arrière-plan est animé à l'aide du CSS. Bien entendu, cet effet ne s'applique pas qu'aux formulaires mais à toutes les pages qui disposent d'une image d'arrière-plan. Notre page HTML est présentée ainsi. Dans la balise body, nous avons intégré une balise section qui contient le formulaire. Celui-ci contient une zone de texte, une zone de mot de passe et un bouton Submit. Bien entendu, nous avons lié à cette page une feuille de style CSS dans le contenu et le suivant. Alors on va commencer par styler la balise section. On va d'abord lui appliquer une hauteur qui vaut 100vh, c'est-à-dire 100 viewport height. Une unité relative qui dépend de la surface de visualisation du contenu. Dans ce cas, 100vh signifie la hauteur complète du navigateur, ou plutôt de l'espace visible du navigateur. Ensuite, on va appliquer l'image d'arrière-plan du nom de art.png. Regardons déjà ce que ça va donner. Donc l'image est intégrée de cette manière. On va régler un petit peu la disposition de l'image avec background-size cover pour couvrir tout l'espace disponible. Comme ça, on exploite le maximum de l'image au moment de l'affichage. Et puisque la balise section est un container, on va lui appliquer un style flex. Comme ça, on va centrer tous les éléments qui vont être incorporés dedans. Vu que le formulaire est intégré directement dans la balise section, alors il sera centré sur le plan horizontal et vertical. Comme ceci. Maintenant on va appliquer un style au formulaire lui-même pour qu'il soit visible au sein de la page. On va par exemple lui appliquer une largeur de, on va dire, 500 pixels, une couleur d'arrière-plan. Je vais choisir la propriété RGBA afin d'appliquer de la transparence. On va dire par exemple qu'on va appliquer la couleur noire. Avec une petite transparence, disons 0,4. Regardons maintenant, ça donne ceci. On appliquera une marge interne. Voilà, ça fait 60 pixels de tous les côtés. Mais vous avez remarqué que la largeur du formulaire a augmenté en raison de la marge interne que l'on a appliquée. Donc on va interdire cet effet, c'est-à-dire on va toujours se limiter à 500 pixels même si une marge interne est appliquée. On mettra donc box-sizing avec la valeur border-box. Ce style applique juste la largeur et la hauteur que l'on a déclaré en CSS et ignore carrément les marges internes et les bordures. On peut aussi arrondir un petit peu notre formulaire. Par exemple 20px. Regardons maintenant ce que ça va donner. Bon, ça ressemble à ça. Maintenant on va styler les inputs, c'est-à-dire les 3 champs que l'on a intégrés: la zone de texte, la zone de mot de passe et aussi le bouton submit. On mettra juste input comme sélecteur principal. Bon, je vais d'abord les transformer en bloc. Comme ça ils seront déclarés chacun dans une ligne à part, comme ceci. Voilà. J'appliquerai aussi une marge, 10 pixels sur le plan vertical, c'est-à-dire la marge haute et la marge basse, et auto à droite et à gauche. Comme ça on va centrer les éléments au milieu du container, comme ceci. Une largeur de 300 pixels de tous ces champs. Une marge interne par exemple on va dire 6 pixels sur le plan vertical et 10 pixels sur le plan horizontal. Donc ça donne ceci. On va enlever le outline et la bordure aussi. Là encore, on va appliquer le box-sizing avec la valeur border-box afin de limiter la largeur à 300 pixels même si on applique une marge interne. Ça donne cela. On peut aussi arrondir un petit peu les éléments. On mettra donc border-radius. On mettra juste une petite valeur, par exemple 6 pixels. Regardons ce que ça va donner. Visiblement, c'est pas mal. Maintenant, on va styler le input type submit. On va lui appliquer une couleur d'arrière-plan afin de le démarquer par rapport aux autres inputs. On va choisir par exemple #0e0, ça donnera du vert. C'est bien. On mettra le texte contenu en gras. Puis on changera la forme du curseur au cas où celui-ci est survolé. Voilà. Ça donne ceci. Bon, on peut dire que c'est bon. Ce qu'on va faire maintenant, c'est appliquer l'animation. On va l'appliquer bien évidemment sur le container qui est la balise section. On va venir ici, on mettra animation name, on l'appellera par exemple back pour des backgrounds. Animation duration, la durée de l'animation totale, on va dire 5 secondes. Animation iteration count, pour dire le nombre de fois une animation va se répéter, on mettra infinite. Pour dire que c'est une animation qui va durer dans le temps à l'infini. Et enfin animation-timing-function pour spécifier la cadence de l'animation. On mettra par exemple linear. Donc comme ça, l'animation va avoir la même cadence du début à la fin sur toute la durée. Donc là, c'est ce qui concerne le paramétrage de l'animation. Maintenant, on va passer aux images clés, c'est-à-dire les styles clés qui vont changer. On va déclarer en bas par exemple avec la fameuse règle@ que nous avons déjà vu dans la séance consacrée aux animations CSS. Keyframes back parce que c'est le nom que l'on a donné à l'animation. Ici on va appliquer 2 styles clés, ça veut dire la position 0% et à la position 100%. Ici qu'est-ce qu'on veut changer? Bon, ça dépend de ce que vous voulez. Si par exemple je veux agir sur les couleurs, c'est-à-dire que je veux changer le cercle des couleurs de l'image de l'arrière-plan avec Alors je mettrai la propriété filter que l'on a déjà traitée avant avec la fonction hue-rotate. Cette fonction va agir sur le cercle des couleurs. On mettra par exemple 0 degré pour dire qu'au début, ça veut dire au premier instant de l'animation, aucun changement n'a été appliqué. Ce sont les couleurs par défaut qui sont reprises. Et à l'instant 100%, le même style Mais là je mettrai la valeur 360°. En réalité, 360° c'est équivalent à 0 parce que finalement c'est un cercle. Alors c'est comme si on va toujours tourner en rond avec les couleurs qui vont changer de manière périodique. Regardons maintenant ce que ça va donner. Voilà, on constate bien que les couleurs changent. Bon, on a comme l'impression que l'objet est animé, c'est-à-dire les petits triangles qui constituent l'arrière-plan, c'est comme s'ils se déplacent ou bien se propagent. Mais en réalité sont immobiles, il n'y a que leur couleur qui change et ça donne cet effet. Alors j'espère que vous avez apprécié cette astuce. Merci pour votre attention et à la vidéo prochaine.
