Créez plus de 30 projets Web avec HTML, CSS et JavaScript

1. Introduction: Bienvenue dans ce tout nouveau cours, où vous apprendrez à créer des projets et des modèles Web modernes et esthétiques. Si vous souhaitez développer et personnaliser votre portfolio, devenir un développeur expérimenté et être embauché, ce cours est fait pour vous. Nous allons créer ensemble plus de 30 projets Web différents et créatifs avec trois technologies de base, HTML, CSS et JavaScript. Si vous avez des connaissances de base sur ces technologies. Et nous avons toujours du mal à créer vos propres projets Web. Ou si vous souhaitez améliorer près votre développeur et vos concepteurs, vous êtes au bon endroit. Nous avons créé ce cours afin de donner aux étudiants la meilleure expérience possible dans trois technologies de base et de leur permettre créer les meilleurs projets modernes et créatifs. Nous allons créer plus de 30 projets Web différents. Et ils seront pleins d' effets modernes, agréables et beaux et décideront. Nous commencerons par des projets relativement simples et nous passerons également par des projets avancés. Nous pouvons vous garantir que vous maîtriserez le développement web frontal. Après avoir terminé ce cours. Grâce à ce cours, vous pouvez trouver l'inspiration qui vous aidera à améliorer vos projets et à personnaliser votre portfolio. Maîtriser uniquement ces technologies de base du développement web et du tronc Vous pouvez créer des thèmes géniaux et modernes et simplement vous faire embaucher. De plus, vous aurez suffisamment de connaissances pour passer à autre chose et apprendre d'autres technologies, telles que frameworks de sous-problèmes et les bibliothèques, qui sont aujourd'hui très populaires et très demandées Le cours sera intéressant et utile. Je vous recommande donc d'essayer de tirer le meilleur parti de ce cours sans simplement copier-coller le code Si j'étais à votre place, je rêverais certainement d'un tel cours. Alors rejoignez-nous 2. Bienvenue en cours: Bonjour et bienvenue au cours. J'espère que ce sera votre bon cours et que vous apprécierez les projets que nous allons construire tout au long de ce cours. Comme vous le savez déjà, nous allons créer plus de 30 projets différents, modernes et créatifs. Ces projets seront construits sur la base de trois technologies de base que sont seront construits sur la base de trois technologies de base le développement Web frontal, le HTML, le CSS et le JavaScript Je voudrais mentionner une chose. Comme je l'ai dit, les projets seront créés sur la base du HTML, du CSS et du JavaScript. Vous devez donc avoir une compréhension de base de ces technologies afin suivre les cours et de ne pas vous y perdre. Les projets seront pleins de différentes techniques et astuces modernes. Vous pourrez apprendre à créer jolis effets et animations, vous pourrez ensuite utiliser comme source d'inspiration pour développer et personnaliser votre propre portfolio. Comme je l'ai mentionné, nous allons construire plus de 30 projets. Ce sont des modèles indépendants, vous n'avez donc pas à les parcourir dans l'ordre. Vous pouvez créer tous les projets de votre choix à partir de la liste. Cela dépend entièrement de vous. Certains projets sont simples, mais vous rencontrerez également des projets avancés. Nous avons donc inclus tous les niveaux dont le développeur a besoin. Tout au long du cours, nous créerons des projets tels que des navigations, des diaporamas, des cases à cocher personnalisées, des cartes 3D et d'autres projets intéressants et créatifs Je suis donc sûr qu'ils vous plairont. Je pense que vous allez acquérir une expérience et une expérience considérables en matière de développement Web frontal dans lequel le HTML, CSS et le JavaScript sont indispensables Très bien, alors passons à autre chose et commençons. 3. Configuration: Bonjour et bienvenue au cours. Nous sommes heureux que vous soyez ici et nous espérons que vous apprécierez le cours avant d' approfondir et de commencer à créer nos projets. Tout d'abord, nous devons préparer notre environnement de travail. Je suis sûr que la plupart d'entre vous sont déjà prêts à écrire le code. Si c'est le cas, n'hésitez pas à ignorer cette vidéo et à vous lancer immédiatement dans les projets. Mais si ce n'est pas le cas, ce n'est pas le problème. Allons-y et configurons quelques outils. Tout au long de ce cours, nous aurons besoin de deux outils principaux , à savoir un navigateur Web moderne et un éditeur de texte. En tant que navigateur Web, je vais utiliser principalement Google Chrome. Et dans certains cas, nous aurons également besoin de l'aide de Mozilla Firefox. Je suis sûr que vous savez déjà comment installer ce navigateur Web, et je pense que vous les possédez déjà tous. Quoi qu'il en soit, voyons comment les télécharger. Pour accéder à Google Chrome, nous devons accéder à cette URL ici et télécharger le navigateur Web. Le processus d'installation est assez simple, je ne vais donc pas le parcourir. En ce qui concerne Mozilla Firefox, vous devez utiliser cette URL et télécharger le navigateur Web à partir d'ici. Les deux liens seront joints à cette conférence. Très bien, passons à autre chose et parlons de l'éditeur de texte. Nous allons utiliser Visual Studio Code car c'est actuellement l'un des meilleurs éditeurs de texte au monde. Bien sûr, vous pouvez vous sentir libre et utiliser votre éditeur de texte préféré. C'est à vous de décider, mais je recommande d'utiliser le code VS. Pour télécharger le code VS, vous devez visiter ce site Web et obtenir l'éditeur de texte pour Windows, Mac ou Linux. Ce lien sera également joint à cette conférence. Le processus d' installation Visual Studio Code est également très simple, donc je suis sûr que cela ne posera aucun problème. Très bien, donc une fois que vous aurez installé les deux outils, vous serez prêt à partir Passons donc directement aux projets 4. Projet 1 - Formes 3D: Très bien, il est donc temps de créer un nouveau projet. Dans ce projet, nous allons créer des formulaires de connexion et d'inscription en 3D. Et le projet va être créé sur la base de HTML, CSS et JavaScript. Dans cette vidéo, je vais passer en revue le projet et le décrire. Comme vous pouvez le voir, nous avons ici un formulaire de connexion affiché par défaut avec une image de fond en plein écran Dans le coin supérieur gauche du formulaire, nous avons le Batson, qui affiche le texte. S'inscrire. Si je clique dessus. Ensuite, le formulaire pivotera dans un environnement 3D. Et le formulaire d'inscription s' affichera. Si je clique sur le bouton Se connecter, nous récupérerons le formulaire de connexion ici Vous pouvez donc changer de formulaire à l'aide de ces boutons dans l'espace 3D. OK, c'est tout pour ce projet. J'espère que ce sera intéressant et que vous l'apprécierez. Alors commençons. Très bien, nous sommes donc prêts à commencer à construire le projet. J'ai créé un nouveau dossier sur le bureau appelé 3D Forms, dans lequel j'ai un autre dossier appelé images. Elle inclut l'image d'arrière-plan. Allons-y et ouvrons ce dossier dans VS Code , puis créons nos fichiers de travail pour HTML, CSS et JavaScript. Je vais appeler les fichiers index.html, puis style.css et script.js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Pour cela, je vais utiliser des amides. Nous devons placer un point d' exclamation puis appuyer sur Tab ou répondre Nous avons donc ici les balises HTML de base. Tout d'abord, changeons le titre. Je vais l'appeler des formes 3D. Ensuite, je vais lier les fichiers CSS et JavaScript. Ouvrons la balise link et spécifions ici dans les atriums d'abord l'attribut de la partie du fichier En ce qui concerne le fichier JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, nous devons spécifier le nom du fichier dans l'attribut source. Très bien, enfin, je vais exécuter le projet sur le navigateur en utilisant l' un des packages de code VS appelé Live Server Cela nous permet de gérer la vie du projet et d'effectuer les mises à jour et les modifications sans actualiser la page. À chaque fois. Avant de commencer à écrire le code, je vais placer l'éditeur et le navigateur côte à côte Très bien, allons-y et commençons à créer le balisage HTML Je vais ouvrir une balise div, qui sera le conteneur Ensuite, nous avons besoin d'une autre balise div. Il embellira les deux formulaires. Je vais donc l'attribuer au wrapper de formulaires de classe. Cet élément sera composé de deux éléments différents. Je veux dire deux éléments formés différents. Le premier sera le formulaire de signature. Ouvrons donc la balise de formulaire avec le formulaire de connexion à la classe. Ainsi, chaque élément du formulaire inclura un bouton, titre et les entrées. Ouvrons la balise de lien qui va devenir le bouton. Vous permet d'attribuer à la classe Signup, BTN. J'ai utilisé ici, inscrivez-vous car cette personne nous aidera à accéder au formulaire d'inscription Très bien. Ensuite, nous devons partir. Ouvrons la balise d'en-tête H2 avec le contenu connecté. Ensuite, je vais insérer vos éléments de saisie. Ouvrons la balise div, qui sera l'enveloppe, conçue pour manger l'enveloppe d'entrée de classe Donc, dans l'ensemble, nous aurons trois éléments de saisie différents pour l'e-mail, mot de passe et le bouton d'envoi. Ouvrons la balise de saisie avec un type de texte et, avec des attributs d'espace réservé, votre e-mail Ensuite, je vais dupliquer cette ligne de code. Ces champs de saisie seront destinés au mot de passe. Changeons donc l'attribut type, définissons-en un mot de passe et changeons également la valeur de l'attribut d'espace réservé Nous avons besoin à nouveau du mot de passe. Le prochain élément de saisie sera pour le bouton d'envoi. Le type va donc être soumis. Nous n'avons pas besoin ici d'attributs d' espace réservé. Au lieu de cela, nous avons besoin de valeur. Connectez-vous. Encore une fois, c'est tout à propos des premiers éléments du formulaire. Allons-y, dupliquons l'intégralité du formulaire , puis apportons quelques modifications. Nous avons besoin ici du nom de la classe, du formulaire d'inscription pour que le bouton soit utilisé pour signer Modifiez également le contenu du titre. Nous devons nous inscrire. Dans le cas du formulaire d'inscription, nous aurons cinq entrées différentes La première sera pour le nom. Nous avons donc besoin de votre nom ici. Et nous aurons également une entrée pour la confirmation du mot de passe. Changeons ici l' espace réservé pour confirmer le mot de passe de l'Institut confirmer le mot de passe de Enfin, changeons la valeur du bouton Soumettre. Utilisez-le ici, inscrivez-vous. Très bien, asseyons-nous à propos du balisage HTML. Il est maintenant temps de personnaliser le projet Ouvrez le fichier CSS et, tout d'abord, créez des paramètres par défaut et réinitialisez les styles Je vais sélectionner tous les albums à l'aide d'un astérisque. Tout d'abord, je vais me débarrasser de la marge et du rembourrage par défaut Allons-y et mettons les deux propriétés à zéro. Ensuite, je vais créer une borderbox de la taille d'une boîte. De plus, je vais me débarrasser du formulaire sous-jacent par défaut, à savoir les éléments de lien. Mettons du texte, pas de décoration. Puis modifiez la famille de polices. Je vais utiliser votre téléphone appelé Arial Font Group Sensory. Tout au long de ce projet, nous allons utiliser la RAM comme unité de mesure. heure actuelle, 1 g est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Je vais convertir 1 g en dix pixels. Et pour cela, nous devons diminuer la taille de police des éléments HTML. Portons-le à 62,5 %. Très bien, les éléments sont donc devenus plus petits. Ensuite, je vais m' occuper du conteneur. Sélectionnons-le et définissons sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Par conséquent, nous avons besoin ici de 100 pH. Je vais définir l'image comme arrière-plan en plein écran. Avant cela, je vais utiliser la fonction de dégradé linéaire car je veux rendre l' image d'arrière-plan un peu plus sombre. Utilisons ici la valeur RGBA 3177 et l'opacité 0,7. Quant à la deuxième valeur RGBA, elle sera la couleur noire avec une opacité de 0,7 Ensuite, je vais spécifier l'URL de l'image. Nous avons le dossier appelé images dans lequel nous stockons l'image appelée p2 dot PNG La position va être centrée. Et nous avons également besoin de savoir répéter. Enfin, je vais définir la taille de l' arrière-plan pour couvrir. Très bien, nous avons donc ici l'image d' arrière-plan en plein écran et en fait c'est tout pour le conteneur Nous devons maintenant commencer à personnaliser les formulaires. Je pense qu'il serait préférable de masquer l'un des formulaires pendant un certain temps et de ne styliser qu'un seul formulaire Allons-y et masquons le deuxième formulaire d'inscription. Sélectionnez ensuite Forms wrapper. Je vais l'envoyer à l' emballage sur la page. Réglons donc sa position sur absolue. Ensuite, nous devons définir les propriétés du haut et de la gauche. Faisons en sorte qu'ils soient tous les deux à 50 %. Ensuite, afin de centrer parfaitement les éléments sur la page, nous devons utiliser transform translate. Nous devons déplacer les éléments de -50 % dans les deux sens. Je suis sur les axes x et y. On considère donc qu'un formulaire est placé au centre de la page. Ensuite, je vais personnaliser le formulaire lui-même. Nous allons donc sélectionner le wrapper Forms, suivi du formulaire contenant le nom de la balise Tout d'abord, comme défini dans les hauteurs, je vais régler la largeur à 50 points. La hauteur sera de 35 RAM. Et changez également la couleur d'arrière-plan. Je vais utiliser ici la valeur RGBA 4114108. Et puis l'opacité de 0,9 à 5. Très bien, ensuite, je vais aligner les éléments à l'intérieur du formulaire à l' aide de flexbox Nous devons faire preuve de flexibilité. Ensuite, nous devons changer de direction car nous devons placer les éléments verticalement. Nous devons donc fléchir la direction pour être une colonne. Ensuite, afin de créer de l'espace autour des éléments dont nous avons besoin, justifiez l'espace autour du contenu. Et également pour centrer les éléments horizontalement, alignez les éléments au centre. Enfin, créons un petit effet d'ombre. Je vais créer une ombre sur les quatre côtés. Je vais donc utiliser les valeurs suivantes. Nous avons besoin de 0,1 RAM trois fois plus que le collier C, C, C. Et je vais également utiliser ici une valeur appelée encart Cela nous permet de créer de l' ombre à l'intérieur des éléments. Ensuite, nous avons besoin de -0,1 gramme deux fois. Ensuite, 0.1 s'exécute avec la même couleur CCC et avec la même valeur dans set Très bien, disons en ce qui concerne les éléments de formulaire pour l'instant, ensuite, je vais commencer par les éléments individuels Commençons par le bouton d'inscription. Je vais la sélectionner en utilisant le formulaire des noms de balises et a. Définissons cette position comme absolue. Ensuite, définissez les propriétés supérieure et gauche, toutes deux sur ram. Je peux voir que le bouton est correctement positionné. Allons-y et stylisons-le. Tout d'abord, je vais changer la couleur de fond. Mettons-le en blanc Je vais également mettre le texte gras ou utiliser une épaisseur de police avec une valeur de 600. Transformons ensuite le texte en majuscules. Je vais aussi changer la couleur. Utilisons la valeur RGBA 4114108. Créez donc un espace entre les lettres. Faites en sorte de courir. Juste après, je vais créer de l'espace à l'intérieur du bouton à l'aide d'un rembourrage Réglons le rembourrage à 0,5 rem haut plutôt qu' à un rem sur le côté droit, à 0,5 rem en bas et à trois rem sur le côté gauche Enfin, nous devons modifier la forme du bouton en utilisant border-radius Il faudra quatre valeurs différentes. Car le rayon dans le coin supérieur gauche sera de 100 %. Ensuite, nous aurons 0,5 rem dans le coin supérieur droit. Le coin inférieur droit sera de 0,5 RAM, car probablement le coin inférieur gauche sera de 100 %. OK, c'est tout pour le bouton. Passons à autre chose et personnalisons le titre. Sélectionnez le formulaire H2. Tout d'abord, définissons la taille de la police, faisons fonctionner la version 2.3. Mettez le texte en majuscules. Créez également un espace entre les lettres, faites-les pointer vers la RAM, puis changez la couleur, rendez-la blanche. Le titre est donc personnalisé et nous devons maintenant nous occuper des entrées. Allons-y et sélectionnons le wrapper d'entrée. Nous devons placer les entrées verticalement les unes sur les autres. Donc, pour utiliser la colonne de flexion d'affichage et de direction de flexion. Ensuite, je vais sélectionner l'entrée elle-même. Définissons la largeur et la hauteur. Je vais régler avec 225 RAM. Pour ce qui est de la hauteur, il y aura trois rampes. Ensuite, je vais créer de l'espace à l'intérieur et à l'extérieur des entrées. Utilisons un rembourrage avec les valeurs 0,5 rem en haut et en bas et un rem sur les côtés gauche et droit Quant à la marge, elle sera de 0,5 rem en haut et en bas et zéro sur les côtés gauche et droit. Ensuite, changeons la couleur d'arrière-plan. Je vais le rendre transparent. Également. Créons une bordure avec les valeurs 0,1 ronde, pleine, de couleur blanche. Et arrondissez également les entrées à l'aide de border-radius avec la valeur 5. Exécutez toutes les entrées ou elles semblent bonnes, mais nous devons leur ajouter quelques styles supplémentaires Changeons la couleur. Faites-le blanc. Créez également un espace entre les lettres, pointez vers une mémoire vive, puis supprimez les valeurs par défaut. Aperçu. Réglez-le sur aucun. Très bien, c'est donc tout à propos des entrées. Ensuite, je vais changer la couleur de l'espace réservé. Nous devons sélectionner le premier rappeur, suivi de l'entrée et de l'espace réservé aux pseudo-éléments Réglons la couleur sur le blanc et modifions également l'épaisseur de la police. Faites-en 300. Très bien, enfin, je vais personnaliser le bouton de soumission. Sélectionnons l'entrée avec un attribut de type. Dans un premier temps, changeons la couleur de fond, rendons-la blanche. Ensuite, la couleur sera la valeur RGBA 4114108. Augmentons le poids de la police. Rendez la détection plus audacieuse. Réglez la police sur 900. Transformez également le texte en majuscules. M a finalement changé le type du pointeur le plus grossier. C'est bon, c'est ça. En ce qui concerne le formulaire de connexion, il est personnalisé Nous devons maintenant afficher le formulaire d'inscription et faire en sorte que les deux formulaires fonctionnent Passons donc au fichier index.html et affichons-le de nouveau sous la deuxième forme. Pour ce qui est du premier formulaire, je vais le cacher pendant un moment. La seule chose que nous devons faire à propos du formulaire d'inscription est donc de personnaliser le bouton de connexion Nous devons le déplacer vers le coin supérieur droit du formulaire. Et nous devons également modifier la forme du Bateson. La direction doit être du côté droit. À l'heure actuelle, nous avons des styles communs pour les deux boutons. Je vais donc sélectionner les deux boutons séparément et définir leurs styles individuels. Tout d'abord, je vais sélectionner Sign Up UTM , puis récupérons la propriété de gauche parmi les styles courants Je vais également prendre en compte le rembourrage et le rayon de la bordure. Ensuite, je vais dupliquer ce code. Changeons le nom de classe dont nous avons besoin ici, sign-in, btn. Nous devons également changer, nous sommes tombés dans le droit chemin. Ensuite, nous avons besoin d'un rembourrage différent. Ce sera 0,5 run 3,5 rem et une RAM. Et nous avons également besoin d'un rayon de frontière différent. Les valeurs vont être les suivantes. 0,5 rime. Puis 100 % deux fois. Et encore 0,5 rampe. Très bien, les deux formulaires sont donc personnalisés. Allons-y et affichons les deux. On peut donc voir que nous avons ici les deux formulaires. La position du bouton n' est pas correcte pour le moment. C'est parce qu'il est positionné en fonction de l'enveloppe du formulaire et que nous devons positionner en fonction de l'élément de formulaire Pour ce faire, nous devons attribuer à l'élément de formulaire la position absolue. l'heure actuelle, les formulaires ne sont donc plus centrés sur la page. Allons-y et réglons ça. Tout d'abord, je vais me débarrasser de Transform Translate à partir d'ici. Ensuite, nous devons ajuster les positions en haut et à gauche. La position supérieure sera égale à 50 % moins la moitié de la hauteur du formulaire. Quant à la position de gauche, elle sera de 50 % moins la moitié de la largeur du formulaire. Nous avons donc besoin des calculs suivants. Utilisons la fonction de calcul. La première position sera de 50 % -17,5 courses, car la hauteur est égale à 35 courses Quant à la dernière position, elle sera de 50 % à 25 RAM car la largeur du formulaire est de 50 lignes. Très bien, comme vous pouvez le voir, les éléments du formulaire sont centrés Nous avons maintenant deux formes de position dans l'espace 3D. Je veux dire, je vais faire pivoter cette inscription car, comme je l'ai dit, nous devons positionner des éléments dans l'espace 3D afin de créer un environnement 3D Nous devons utiliser l'une de ces propriétés CSS appelée prospective. Et je vais l'attribuer au conteneur en tant que valeur. Attribuons 200 rampes. Les éléments de forme sont les petits-enfants du contenant. Et pour appliquer un environnement 3D aux déformes, nous devons utiliser une autre propriété appelée style de transformation avec la valeur preserve 3D, et nous devons l'attribuer aux éléments parents des formulaires, un wrapper de formulaires Très bien, il est maintenant temps de faire pivoter le formulaire d'inscription. Je vais le sélectionner séparément. Ensuite, utilisez Transform avec la fonction rotation y. Et comme valeur, je vais vous donner 270 degrés. OK, donc pour le moment, le formulaire d'inscription n'est pas visible car le formulaire d' inscription est Et pour mieux comprendre pourquoi elle n'est pas visible, je peux modifier la valeur, régler à 250 degrés. Nous pouvons maintenant voir que le formulaire est pivoté. Vous pensez peut-être que nous ne pourrions utiliser ici que 90 degrés. Mais dans ce cas, le contenu du formulaire serait pivoté dans la direction opposée C'est pourquoi nous utilisons 270 degrés. Très bien, nous devons ensuite déplacer le formulaire d'inscription vers la gauche et également directement dans l'espace 3D Pour déplacer les éléments vers la gauche, je vais utiliser la fonction Translate Z avec une valeur de 25 RAM. Et maintenant, nous devons déplacer les éléments selon l'axe X avec la valeur -25 ramp Enfin, revenons ici à 270 degrés. La seule chose que nous avions à faire avant de programmer les boutons était de faire pivoter l' ensemble des formulaires, probablement pour les rappeurs C'est donc ce qui lui est assigné. Transformez la rotation en y avec la valeur moins dix degrés. C'est bon, c'est ça. Nous devons maintenant commencer à écrire du JavaScript. Nous devons associer des écouteurs d'événements en un clic pour utiliser les deux boutons Mais tout d'abord, je vais sélectionner les deux boutons. Créons une nouvelle variable. Je vais l'appeler sign up btn, puis sélectionner l'élément à l' aide de la méthode QuerySelector Spécifiez ici le nom de la classe, inscrivez-vous btn. Ensuite, je vais dupliquer cette ligne de code. Changeons le nom de la variable. Il va signer BTN. En ce qui concerne le nom de la classe, nous devons nous connecter entre eux. Juste après, attachons des auditeurs d'événements aux deux. Commençons par la méthode d'inscription btn add event listener avec un événement Et la fonction de rappel, qui sera exécutée une fois que nous aurons cliqué sur le bouton S'inscrire Dupliquons ce code et changeons le signe du butane en signe Très bien, une fois que nous avons cliqué dessus, mais comme nous devons faire pivoter le wrapper des polices, pour ce faire, je vais ajouter une nouvelle classe Ensuite, nous allons sélectionner le wrapper Forms avec cette classe nouvellement créée en CSS Et nous allons définir la rotation de l'élément. Tout d'abord, je vais empêcher les actions par défaut des boutons de couture. Si nous ne le faisons pas, la page défilera vers le haut si nous avons du contenu supplémentaire. Nous devons donc transmettre les objets de votre événement dans les deux cas. Et puis nous avons besoin de e dot prevent default. Très bien, comme nous l'avons dit, nous devons ajouter une nouvelle classe à Deforms Tout d'abord, sélectionnons ces éléments, créons une nouvelle variable, appelons-la Forms wrapper Sélectionnez ensuite les éléments à l' aide de la méthode QuerySelector. Nous avons besoin ici du wrapper de formulaires ClassName. Ajoutons ensuite une nouvelle classe à ces éléments. Nous avons besoin d'un wrapper de formulaires, suivi de la propriété appelée class list, qui inclut toutes les classes que possède l'élément Ensuite, nous avons besoin d'une méthode appelée add. Et nous devons spécifier ici le nom de la classe. Disons le changement. Très bien, passons au fichier CSS et sélectionnons Foams Wrapper avec Donc, une fois que nous avons cliqué sur le bouton, nous avons dû faire pivoter l'emballage des formulaires Je vais donc vous transmettre la transformation Rotate y avec une valeur de 100 degrés. Donc, si nous cliquons sur le bouton, le formulaire pivotera. Mais comme vous pouvez le constater, elle a changé de position. Nous devons donc définir la position de décalage. Utilisons à nouveau la fonction appelée. Dans ce cas, nous avons besoin de 50 % plus la moitié de la largeur de la rampe de 25 %. Maintenant, tout semble aller bien. Nous devons rendre l' effet plus fluide. Pour cela, nous devons utiliser transition avec les valeurs transformées 0,5 s, qui est la durée. Et puis à nouveau à gauche avec 0,5 s. Maintenant, si je clique, le formulaire tournera en douceur. À l'heure actuelle, seul le bouton d' inscription fonctionne. Alors allons-y et prenons également soin du deuxième bouton. Dans le cas du second bouton, il suffit de supprimer le changement de classe du wrapper de formulaires Alors allons-y et récupérons cette ligne de code. Collez-le ici, et modifiez-le, ajoutez-le pour le supprimer. Alors maintenant, tout était parfait et en fait, avec ce projet, nous en avons terminé. Si vous pensez que les formulaires sont plus petits ou très grands, vous pouvez simplement augmenter la taille de police des éléments HTML. Changons-le et faisons-le, disons 72,5 %. Alors maintenant je pense que c'est mieux. Et en fait, nous avons terminé. Nous avons terminé de travailler sur ce projet. J'espère que c'était intéressant et utile. Passons donc au projet suivant. 5. Projet 2 - Maison: Très bien, il est temps de créer nos prochains projets. Dans cette vidéo, nous allons construire cette maison avec HTML, CSS et JavaScript. Allons-y et décrivons les projets. Nous avons ici une maison avec deux fenêtres différentes. De plus, il y a un toit bleu et une porte. Si je clique sur la porte, elle s'ouvrira. Et aussi, si je passe la souris sur la fenêtre en haut de la porte, elle s'ouvrira également Voilà pour ce projet, allons-y et commençons à le construire. J'ai créé un nouveau dossier sur le bureau appelé maison. Allons-y, ouvrons-le dans VS Code et créons nos fichiers de travail pour HTML, CSS et JavaScript. Je vais les appeler index.html, style.css et scripts point js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Pour cela, utilisons une image. Nous devons placer un point d' exclamation urinaire , puis appuyer sur Tab ou Entrée Alors on y va. Tout d'abord, je vais changer le titre. Insérez votre maison. Liez ensuite les fichiers CSS et JavaScript. Je vais ouvrir la balise de lien. Et puis précisons ici le nom du fichier. En ce qui concerne les tâches que ce fichier contient, je vais ouvrir la balise de script juste au-dessus de la balise body de fermeture. Et puis dans l'attribut source, je vais spécifier le nom du fichier, script.js. Très bien, donc tous les fichiers sont liés. Allons-y et exécutons le projet dans le navigateur. Je vais utiliser Live Server. Ensuite, plaçons l' éditeur et le navigateur. Comme ça. Nous sommes prêts à commencer à construire un projet. Dans un premier temps, je vais créer le balisage HTML. Allons-y et ouvrons une balise div avec un conteneur de classe. Ensuite, je vais ouvrir une autre balise div qui encapsulera le contenu Attribuons-lui la maison ClassName. La maison sera donc composée de deux parties différentes. Nous aurons un toit, fenêtres au-dessus de la pièce et aussi la porte. Allons-y et créons ces pièces. Je vais commencer par le toit. Ouvrons le div tag avec le toit principal de la classe. Ensuite, je vais créer quatre fenêtres différentes. Ouvrons la balise div. Il comportera deux classes différentes. La première sera Window. Ce sera le nom de classe courant. Et puis nous avons également besoin de la fenêtre en haut à gauche. Dupliquons cette ligne de code trois fois. La deuxième fenêtre sera donc en haut à droite. Ensuite, nous aurons la fenêtre en bas à gauche. Et la dernière sera la fenêtre en bas à droite. Très bien, c'est tout pour Windows. Ensuite, je vais créer la pièce dans laquelle le tag VB est ouvert avec la classe La pièce sera donc composée de trois parties différentes. Nous aurons un toit de la pièce plutôt que la fenêtre et aussi la porte. Ouvrons un div tag avec le toit d'une salle de classe. Ensuite, je vais créer une fenêtre. Ouvrons une autre balise div avec une fenêtre de classe supérieure. Cette fenêtre comportera deux parties différentes, la partie gauche et la partie droite. Ouvrons donc la balise div avec une fenêtre de classe en haut à gauche. Ensuite, je vais dupliquer cette ligne de code et changer le nom de classe dont nous avons besoin ici, dans la fenêtre supérieure, non ? OK, enfin, créons une porte. Je vais ouvrir le div tag, qui sera l'emballage, appelons-le cadre de la porte Ensuite, à l'intérieur de cet élément div, je vais ouvrir une autre balise div avec la porte de classe Enfin, nous avons besoin d'une poignée de porte. C'est donc ouvert, étiquettez avec la poignée de porte de la classe. C'est bon, c'est ça. En ce qui concerne le balisage HTML, allons-y et commençons à écrire le CSS Tout d'abord, je vais définir certains styles courants et les réinitialiser. Sélectionnons tous les éléments à l'aide d'un astérisque. Je vais me débarrasser des paramètres par défaut, de la marge et du rembourrage. Mettons donc les deux propriétés à zéro. Et je vais aussi définir la taille d'une boîte à bordures. Donc, tout au long de ce projet, je vais utiliser la RAM comme unité de mesure. l'heure actuelle, un rem est égal à 16 pixels car la taille de police de l'élément HTML est égale à 16 pixels. Je veux convertir une RAM en dix pixels Et pour cela, nous devons diminuer la taille de police de l'élément HTML. Et nous devons le porter à 62,5 %. Très bien, allons-y et prenons soin du conteneur. Je vais l'étendre à toute la page. Sélectionnons-la donc et définissons cette largeur. Je vais y arriver à 100 %. Quant à la hauteur, elle représentera 100 % de la fenêtre d'affichage. Nous devons donc le régler sur 100 vh, puis changer la couleur de fond Je vais utiliser ici la valeur RGB 103150. Et puis un, encore une fois tous les trois. Hein ? Après cela, sélectionnons la maison. Je vais rendre cet élément visible. Définissons donc sa largeur et sa hauteur. Je vais régler sa largeur à 110 RAM. Quant à la hauteur, elle sera de sept pour la RAM. Et changez également la couleur d'arrière-plan. Utilisons U, E F, E, F, E F. Nous avons donc ici la maison. Je vais le placer au centre de la page. Et pour cela, utilisons une grille CSS. Nous devons régler l'affichage sur la grille. Ensuite, pour placer l'élément au centre, nous devons utiliser le centre de valeur pour placer les éléments. Très bien, comme vous pouvez le voir, l'élément est placé au centre en ce moment. C'est tout pour la maison Ensuite, je vais m' occuper du toit principal. Allons-y donc et sélectionnons ces éléments. Tout d'abord, définissons sa largeur et sa hauteur. Je vais régler la largeur à 110 %. C'est assez élevé, ce sera suffisant pour la RAM. Puis changez la couleur de fond. Utilisons à nouveau la valeur RGB. Une fois que vous avez passé votre 867145. D'accord ? Le toit est donc réalisable, mais on voit qu'il faut prendre soin de sa position. Pour cela, je vais lui attribuer une position absolue, que pour la positionner en fonction de la Maison, qui est l'élément parent, je vais attribuer à la maison, une position relative. Ensuite, définissons les propriétés du haut et de la gauche. Je vais régler deux moins dix RAM. Quant à la position de gauche, elle sera de moins cinq pour cent. On considère donc que le toit est bien positionné, mais pour le moment, il n'a pas l' air très beau. Nous devons le faire pivoter dans un environnement 3D. Nous devons donc créer un espace 3D. Et pour cela, nous devons utiliser l'une de ces propriétés CSS appelée prospective. Réglons-le à 200 RAM. Et c'est tout. Faisons pivoter le toit selon l'axe X. Utilisez Transform avec la fonction Rotate X. Je vais faire pivoter l' élément de 20 degrés. D'accord ? Alors maintenant, on considère que le toit est bien plus beau. La seule chose que je vais faire est de rendre ses coins légèrement arrondis. Et je vais aussi y ajouter un petit effet d'ombre. Utilisons donc le rayon de la bordure. Il faudra quatre valeurs. Le coin supérieur gauche sera une RAM alors que le coin supérieur droit sera également un rem En ce qui concerne les coins inférieur droit et inférieur gauche. Je vais leur faire une rampe de 0,5. Et utilisez également Box Shadow avec des valeurs de 0,5 gramme par rapport à un rem. Rem. Et la couleur aussi. Très bien, le toit principal est prêt et nous devons maintenant nous occuper des fenêtres Comme vous le savez, les quatre fenêtres auront des styles communs. Je vais donc les sélectionner en utilisant la fenêtre ClassName commune Dans un premier temps, définissons la largeur et la hauteur. Je vais régler la largeur à 12 RAM. La hauteur sera de 15 RAM. Pour ce qui est de la couleur de fond, je vais utiliser un AAA. Ensuite, je vais ajouter une bordure à Windows. Attribuons deux valeurs à la RAM pour que la bordure soit solide. La couleur. Utilisons 333. Après cela, nous devons prendre soin de la position des fenêtres. Réglons la position sur absolue. Ensuite, nous devons définir les positions de chaque fenêtre séparément. Allons-y et commençons par le haut de cette fenêtre. Sélectionnons-le. Je vais me mettre en position à 20 pour le percuter. Quant à la position de gauche, ce sera dix RAM Ensuite, je vais vous faire sortir de la fenêtre en haut à droite. Dupliquons donc ce code. Changez le nom de la classe dont nous avons besoin ici, la fenêtre en haut à droite, et changez également la position de gauche en droite. Vient ensuite une fenêtre en bas à gauche. Dupliquons à nouveau dans le code. Le nom de la classe sera en bas à gauche de la fenêtre alors que les deux positions seront 43 RAM. Nous avons besoin ici de la position gauche avec la même valeur. Et enfin, nous avons la fenêtre en bas à droite. Dupliquons ce code. Changez le nom de classe dont nous avons besoin ici. Et modifiez également la position du décalage. Utilisons le droit. OK, donc les quatre fenêtres sont positionnées et la prochaine chose que nous devons faire est de prendre soin de la forme des fenêtres en haut à gauche et en haut à droite. Si nous examinons le projet fini, vous verrez que les côtés supérieurs de ces deux fenêtres l'entourent. Allons-y et faisons-le en utilisant border-radius. Nous avons besoin du même rayon de bordure pour les deux fenêtres. Le coin supérieur gauche sera à 50 %. Ensuite, nous avons besoin de la même valeur pour le coin supérieur droit que pour les coins inférieur gauche et inférieur droit, elles seront égales à zéro. Nous avons donc les fenêtres arrondies. Ensuite, je vais créer ces cadres. Et je vais le faire en utilisant les pseudo-éléments avant et après. Tout d'abord, créons les lignes horizontales. Sélectionnons les pseudo-éléments précédents. Définissez le contenu, rendez-le vide. Ensuite, définissons la largeur et la hauteur. La largeur va être de 100 %. Pour ce qui est de la hauteur, je vais me concentrer sur la RAM. Et changez également la couleur de fond, faites-en un 333. Pour le moment, les lignes ne sont donc pas visibles car nous devons définir cette position. Réglons donc la position sur absolue. Ensuite, je vais définir les propriétés du haut et de la gauche. La première position sera de cinq RAM. Quant à la position de gauche, mettons-la à zéro. OK, comme vous pouvez le voir, nous avons ici les lignes horizontales. Allons-y et créons les lignes verticales. Je vais le faire en utilisant les pseudo-éléments after. Copions ce code et modifions-le avant en, après. La largeur sera égale à zéro pour la RAM. En ce qui concerne la hauteur, je vais la faire à cent pour cent, puis la position sera nulle. Changeons la position de gauche. Je vais le porter à 50 %. En fait, nous devons placer les lignes verticales au centre de la fenêtre. Nous devons donc utiliser ici la transformation, traduire x avec la valeur -50 % Bien, comme vous pouvez le voir, les quatre fenêtres sont personnalisées et nous devons maintenant passer à autre chose et prendre soin de la pièce Allons-y, sélectionnons ces éléments et définissons sa largeur et sa hauteur. Je vais régler la largeur à quatre pour le bélier. Quant à la hauteur, elle sera de 8 %. Et puis changez la couleur d'arrière-plan, rendez-la blanche. La pièce va être placée au centre de la maison. Faisons donc attention à sa position. Réglons la position sur absolue. Ensuite, nous avons besoin que la position gauche soit de 50 %. Ensuite, définissons la position à zéro. De plus, pour placer l'élément au centre lors de la transformation, traduisez X avec la valeur -50 %. OK, donc c'est tout pour la chambre pour le moment. Ensuite, je vais m' occuper d'un toit. Allons-y et sélectionnons le toit de la pièce. Tout d'abord, je vais définir sa largeur et sa hauteur. La largeur va être de 110 %. Ensuite, la hauteur sera de 20 RAM. Et je vais aussi changer la couleur de fond. Utilisons ici la valeur RGB 867145. Comme vous pouvez le voir, le toit est visible, mais nous devons le personnaliser car il n'est pas beau pour le moment. Tout d'abord, prenons soin de sa position. Je vais définir la position comme absolue, puis je vais définir les positions supérieure et gauche. La propriété supérieure sera moins dix rimes. Quant à la position de gauche, elle devrait être de moins cinq pour cent. Ensuite, nous devons également créer l'environnement 3D de ce toit. Je veux dire, un environnement 3D que nous avons créé pour le toit principal de la maison. Pour eux, nous devons utiliser une propriété appelée perspective. Réglons-le à 100 RAM. Ensuite, je vais faire pivoter le toit. Nous devons le faire pivoter de 40 degrés selon l'axe X. D'accord. Le toit est donc pivoté mais il n'est pas tout à fait visible. Pour résoudre ce problème, je vais utiliser Box Shadow. Attribuons des points de valeurs 2D à 0,5 rem, 1,5 rem, et comme couleur, je vais utiliser le noir. OK, Enfin, arrondissons les coins du toit en utilisant le rayon de bordure Je vais définir le rayon de la bordure dans le coin supérieur gauche sur 0,5 RAM, alors que le coin supérieur droit devrait également être de 0,5 point prime. En ce qui concerne les coins inférieur droit et inférieur gauche. Réglons-les, tous les deux à 2,3 rampes. Très bien, enfin, nous en avons fini avec le toit. Ensuite, je vais m'occuper de la fenêtre supérieure de la pièce. Allons-y et sélectionnons-le. Tout d'abord, définissons la largeur, hauteur et la couleur d'arrière-plan. Je vais régler la largeur sur 16 RAM plutôt que la hauteur sur 17. Exécuter en tant que couleur d'arrière-plan. Réglons-le sur RGB 112, puis 22.22. Nous avons donc ici la fenêtre, elle n'est pas placée correctement pour le moment. Faisons donc attention à sa position. Réglons la position sur absolue. Ensuite, définissez les propriétés supérieures et rodées. La première position sera de 15 RAM. En ce qui concerne la position du laboratoire, je vais la fixer à 50 %. Et puis pour placer parfaitement la fenêtre au centre, utilisons Transform, Translate X avec la valeur -50% OK, ensuite, nous devons le contourner par le haut. Et je vais aussi y ajouter une bordure. Réglons donc le radius de bordure à 50 %. Encore une fois, si 50 % est supérieur à zéro, encore une fois zéro. C'est ce que représente la frontière. Faisons en sorte qu'il soit solide à 0,5 RAM. Et comme couleur, utilisons 555. Très bien, il faut ensuite personnaliser certaines parties de ces fenêtres Nous avons tous déjà créé deux éléments div pour cela. Nous allons donc sélectionner la fenêtre supérieure gauche. Dans un premier temps. Réglons la largeur et la hauteur. La largeur sera de 49,5 %, puis la hauteur sera de 100 % En ce qui concerne la couleur d'arrière-plan, je vais utiliser la valeur RGBA La couleur va être blanche. Je veux dire, nous devons le faire 5053 fois. Ensuite, diminuons l'opacité, mettons-la à 0,4. Après cela, définissons la position. Réglons la position sur absolue et définissons les propriétés supérieure et gauche, toutes deux nulles. Très bien, comme vous pouvez le voir, nous devons modifier la forme de ces éléments Nous devons l'arrondir en haut à gauche. Utilisons donc la bordure, rayon en haut à gauche et définissons-le sur 50 runs. Enfin, ajoutons une bordure à ces éléments. Fixons une bordure solide de 2,5 grammes. Et comme couleur, utilisons 555. Très bien, c'est à propos du côté gauche. Ensuite, je vais créer la même chose sur le côté droit. Pour cela, dupliquons simplement ce code et changeons la gauche en droits partout. OK, donc les deux parties sont créées comme les autres fenêtres. Nous avons également besoin de lignes horizontales ici. Je vais les créer à nouveau en utilisant les pseudo-éléments précédents. Allons-y et sélectionnons la fenêtre supérieure gauche, suivie du pseudo-élément avant. Tout d'abord, définissons le contenu. Il va être vide. Ensuite, je vais définir la largeur et la hauteur. Réglons la largeur à 100 % Ensuite, je vais régler la valeur maximale de 2,5 rem et également changer la couleur d'arrière-plan. Faites-en 555. Que pour rendre l'élément visible, je vais définir la position. Réglons la position sur absolue. Ensuite, définissez la propriété principale. Ce sera 35 %. En ce qui concerne la position de décalage, je vais la mettre à zéro. Très bien, donc c'est à propos du côté gauche. Je vais également créer la même ligne sur le côté droit. Copions ce code. Collez-le ici, changez le nom de la classe que nous devons écrire. Et puis changez la position dont nous avons besoin, non ? Et aussi. C'est donc ça. La fenêtre entière est personnalisée et la seule chose que nous avons à faire est créer un effet de survol Ainsi, une fois que nous survolons les éléments, la fenêtre doit s'ouvrir, nous devons ajouter un effet de survol de la fenêtre et la faire pivoter des deux côtés Allons-y et commençons par le côté gauche. Je vais sélectionner la fenêtre supérieure avec le pointeur de la souris. Et puis sélectionnons la fenêtre supérieure gauche. Nous devons donc faire pivoter l'élément selon l'axe Y. Nous devons donc transformer la rotation en y. Et comme valeur, je vais utiliser ici -50 degrés. Également pour rendre l' effet plus lisse. Utilisons la transition avec la transformation 1 s. D'accord ? Supposons donc que l' élément tourne, mais ce n'est pas ce que nous voulons ici. Il doit pivoter du côté gauche. heure actuelle, elle pivote à partir du centre car l'origine de la transformation est centrée par défaut Nous devons la modifier et la déplacer vers la gauche. Je vais donc utiliser les propriétés appelées origine de la transformation. Et je vais le mettre sur la gauche. Comme vous pouvez le voir, il tourne correctement, mais nous devons ajouter encore une chose. Nous devons le faire pivoter dans un environnement 3D. Et pour cela, utilisons à nouveau la perspective. Nous devons l'attribuer à la fenêtre elle-même. Dans ce cas, je vais régler la perspective sur une rampe de 150. On voit maintenant que nous avons un meilleur résultat. Allons-y et faisons de même pour le côté droit. Je vais copier ce code. Changez ensuite de gauche à droite. De plus, nous devons nous débarrasser du signe moins à partir d'ici. Ensuite, nous devons changer l' origine de la transformation. Dans ce cas, nous devons transformer l'origine pour qu'elle soit correcte. Enfin, utilisons la transition avec transform 1 s. Comme vous pouvez le voir, tout fonctionne parfaitement et avec la fenêtre, nous avons terminé. La seule chose que nous devons faire dans ce projet est de créer la porte. Tout d'abord, nous devons créer le cadre. Sélectionnons-le et définissons la largeur et la hauteur. La largeur sera de 14 marques. Quant à la hauteur, réglons-la à 18 RAM. Et changez également la couleur d'arrière-plan. Faites-en pour quatre. Ensuite, nous devons modifier sa position. Il doit être placé au centre de la pièce. Réglons donc la position sur absolue. Ensuite, j'ai défini la propriété Watson, elle sera nulle. Ensuite, nous avons besoin d'une position de décalage. Il devrait être de 50 %. Et pour les centrer parfaitement, nous devons utiliser transform translate x avec une valeur de -50 % Ensuite, je vais ajouter au cadre une bordure à laquelle sont assignées les valeurs 0,6 arrondie, unie et la couleur deux à deux. Et enfin, éliminons la bordure en bas. Réglons le bas de la bordure sur aucun. Très bien, c'est tout pour le cadre de la porte. Ensuite, je vais m' occuper de la porte elle-même. Nous allons donc sélectionner ces éléments. Définissez la largeur et la hauteur. Je vais les régler tous les deux à 100 % et également changer la couleur d'arrière-plan. Utilisons ici la valeur RGB 856824. OK, donc on considère que nous avons la porte. La prochaine chose que nous devons faire est de créer une poignée de porte. Allons-y donc et sélectionnons ces éléments. Définissons la largeur et la hauteur que je vais définir avec 23 RAM alors que la hauteur sera de 0,7 rampe. Et changez également la couleur d'arrière-plan. Dans ce cas, je vais utiliser le 999. Nous avons donc ici la poignée de la porte et nous devons maintenant changer sa position. Réglons la position sur absolue. Ensuite, je vais le déplacer vers le bas. Mettons donc la propriété supérieure à 45 % pour que la position de gauche corresponde à un tour. On considère donc qu'une poignée de porte est correctement positionnée. Et la seule chose à faire était de modifier légèrement sa forme. Je vais l' arrondir sur le côté gauche. Utilisons donc border-radius avec les valeurs 100 %, 0,5 autour de 0,5 brun, puis cent pour cent. Et ainsi de suite, c'est ça. À propos de la porte. Tout est prêt pour créer l'effet. Je voulais ouvrir cette porte. Une fois que nous aurons cliqué sur la porte. Pour cela, je vais utiliser un peu de JavaScript. Passons au fichier script.js. Nous devons ajouter un événement de clic à la porte. Mais avant tout, sélectionnons ces éléments. Je vais créer une nouvelle variable. Appelons-le door, puis sélectionnons les éléments div à l' aide de la méthode de sélection de requêtes Spécifiez ici le point du nom de la classe. Ensuite, je vais ajouter un écouteur d'événements à ces éléments Utilisons donc la méthode d'ajout d'un écouteur d'événements, qui prend deux paramètres Le premier est le type d' événement dont nous avons besoin ici. Quant au deuxième argument, il s'agira d'une fonction de rappel, qui sera exécutée une fois que nous aurons cliqué sur la porte Donc, une fois que nous aurons cliqué, je vais ajouter une nouvelle classe à la porte. Ensuite, à l'aide de cette nouvelle classe, nous allons définir de nouveaux styles et CSS, que nous voulons appliquer aux éléments onclick Et puis au clic suivant, nous devons nous débarrasser de cette nouvelle classe d'édition. Pour cela, je vais utiliser l'une des méthodes appelées toggle Nous avons donc besoin d'une liste de classes de points. Cette propriété nous donne toutes les classes de l'élément. Et puis je vais utiliser la méthode appelée Toggle. Appelons le changement de nom de classe. C'est tout à propos du JavaScript. Ensuite, nous devons écrire du CSS. Nous devons donc sélectionner une porte avec changement de classe. Je vais faire pivoter les éléments. Nous devons donc transformer, faire pivoter selon l'axe Y avec la valeur 30 degrés Donc, si nous cliquons sur la porte, elle tournera. Mais nous devons ajouter quelques éléments à cet effet. La porte doit être tournée du côté droit. Nous devons également créer l'environnement 3D et créer le modèle d'effets. Nous devons donc modifier l' origine de la transformation. Réglons le tout pour écrire que pour créer un espace 3D, je vais utiliser la perspective avec une valeur de cent Ren. Enfin, utilisons la transition avec la transformation. 1 est arrivé. Donc si on clique sur la porte, elle s'ouvrira bien. Nous devons maintenant faire de même pour la poignée de porte. Je vais utiliser la même technique. Sélectionnons donc tout avec le changement de classe, suivi de la poignée de porte. Nous devons faire pivoter la poignée de la porte selon l'axe z. Nous devons donc transformer, faire pivoter Z avec une valeur de 20 degrés. Donc, comme pour la porte, nous devons changer l'origine de la transformation. Allons-y à gauche. Nous devons également effectuer la transition avec une transformation de valeur de 0,5 s. Comme vous pouvez le voir, tout fonctionne correctement. Je voudrais simplement ajouter une dernière chose. Ajoutons un peu de temps à la transition de la porte car tout d'abord, je souhaite faire pivoter la poignée de la porte puis ouvrir la porte. Ajoutons donc 0,5 s. D'accord, alors maintenant tout se passe parfaitement. Et en fait, avec ce projet, nous en avons terminé. J'espère que ça vous a plu. Passons donc à autre chose et commençons à travailler sur le suivant. 6. Projet 3 - Barre de recherche: Bien, alors allons-y et commençons à travailler sur notre prochain projet. Dans cette section, nous allons créer une barre de recherche avec de jolis effets d'animation. Allons-y et décrivons les projets. Comme vous pouvez le constater, nous avons ici une icône de recherche en haut à droite de la page. Si je clique dessus, il commencera à bouger et à s'animer. Elle sera déplacée vers le haut de la page. Le champ de saisie va donc apparaître avec le x qui se ferme, mais si je clique dessus, le champ de saisie sera masqué et l'icône de recherche, nous reviendrons à sa place par défaut. Voilà donc tout à propos de ce projet. Ce sera un petit projet, mais j'espère qu'il sera intéressant. J'ai créé un nouveau dossier sur le bureau appelé barre de recherche, qui est actuellement vide. Allons-y, ouvrons-le dans le code VS et créons nos fichiers de travail pour HTML, CSS et JavaScript. Je vais les appeler index.html style point css et script.js. Très bien, ouvrons le fichier index.html et créons un document HTML de base Pour cela, je vais utiliser un point d'exclamation. Nous avons donc ici des balises HTML de base. Tout d'abord, je vais changer le titre. Insérez votre barre de recherche. Ensuite, je vais lier les fichiers CSS et JavaScript. Ouvrons la balise link et indiquons ici le chemin du fichier. En ce qui concerne le fichier JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, nous avons besoin de script.js et de l'attribut source. En fait, en plus de cela, je vais ajouter un lien supplémentaire pour Font, Awesome icons. Allons-y et recherchons Font Awesome, CDN, GIS. Copions ensuite le premier lien. Ensuite, nous devons ouvrir la balise de lien et coller le lien dans l'attribut de référence h. Tout est donc prêt. Enfin, je vais exécuter le projet sur le navigateur à l'aide d'un serveur live. Ce package de code VS nous permet d' exécuter la vie du projet dans le navigateur. Vous pouvez également apporter des modifications et des mises à jour sans actualiser la page. À chaque fois. Avant de commencer à écrire le code, je vais organiser nos environnements de travail. Mettons l'éditeur et le navigateur côte à côte. Très bien, nous pouvons enfin commencer à écrire le code. Tout d'abord, je vais créer un balisage HTML. Ouvrons le wrapper d'entrée Class Search de la balise div. Il inclura un champ de saisie de recherche. Ouvrons donc une autre balise div avec l'entrée de recherche de classe Je vais passer deux éléments différents. La première sera l'entrée avec le type de texte et avec l' attribut d'espace réservé avec une valeur, par exemple, pour le second élément, il va fermer le bouton X. Je vais utiliser ici la police, l'icône Awesome. Ouvrons I Elements. Et assignés aux classes ont un S, f, k fois. Hein ? Ensuite, nous devons créer une icône de recherche. Il s'agit donc d'ouvrir la balise div avec l'icône de recherche de classe. Ensuite, insérons votre icône Font Awesome pour les classes FAS, une recherche Très bien, c'est tout à propos du balisage HTML. Il est maintenant temps de personnaliser ces éléments et de commencer à écrire du CSS. Tout d'abord, je vais créer des styles par défaut et réinitialiser. Je vais sélectionner tous les éléments à l'aide d'un astérisque. Tout d'abord, je vais me débarrasser de la marge et du rembourrage par défaut Mettons les deux propriétés à zéro. Ensuite, je vais définir la taille de la boîte borderbox. Tout au long de ce projet. Je vais utiliser la RAM comme unité de mesure. heure actuelle, 1 g est égal à 16 pixels car par défaut, la taille de police de l'élément HTML est égale à 16 pixels. Je veux convertir 1 g en dix pixels. Pour cela, nous devons réduire la taille de police des éléments HTML et la fixer à 62,5 %. Maintenant, comme vous pouvez le constater, tous les éléments sont devenus plus petits. Très bien, tout d'abord, je vais personnaliser le projet comme ça Je veux dire, je vais styliser et placer les éléments ici en haut de la page. Ensuite, nous allons aborder ici les animations. Allons-y, sélectionnons les éléments du wrapper div et définissons sa largeur et sa hauteur Je vais me fixer à 200 %. Ensuite, la hauteur sera de cinq mètres. Et changez également la couleur d'arrière-plan. Je vais utiliser ici la valeur RGBA à 55, 69 69,5 . Ensuite, je vais placer les éléments au centre de l' emballage pour cela Utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, pour le centrage horizontal, je vais utiliser justify-content En ce qui concerne le centrage vertical, nous devons aligner les éléments au centre Très bien, les éléments sont donc parfaitement placés au centre Passons à autre chose et commençons à personnaliser l'entrée de recherche. Dans un premier temps, je vais sélectionner ces enveloppes et définir la largeur Faisons en sorte que ce soit 30 runs. Après cela, je vais sélectionner l'élément d'entrée lui-même. Tout d'abord, définissons sa largeur, faisons-la courir 27. Et je vais aussi rendre la couleur de fond transparente. Ensuite, je vais supprimer la bordure par défaut et la laisser uniquement en bas. Nous n'avons donc pas besoin d'une frontière. Et puis bordez en bas avec les valeurs 0,1 RAM solides. Et comme couleur, je vais utiliser 999. Très bien, après cela, occupons-nous de la taille de la police. Je vais le régler à 1,5 g. également créer un espace entre les lettres. Réglons-le à 0,15 tour. Je vais également me débarrasser des défauts. Aperçu. Mettons-le à zéro. Changez ensuite la couleur. Vous voyez ici, 555. Enfin, je vais créer de l' espace sur le côté droit. Réglons la marge à droite sur une rampe. D'accord, c'est tout pour les champs de saisie. Allons-y et démarrons le bouton X. Sélectionnons-le. Tout d'abord, je vais régler la taille de la police à 1,5 gramme. Ensuite, je vais changer de couleur. Passons à 999. Et pointez le curseur. Très bien, avant de passer à autre chose et de personnaliser l'icône de recherche, je souhaite aligner les deux éléments verticalement au centre Et pour cela, utilisons Flexbox. Nous avons besoin d'afficher, de fléchir puis d'aligner les éléments au centre. Bien, passons à autre chose et personnalisons l'icône de recherche. Sélectionnons ses développements en matière d' emballage. Dans un premier temps, je vais définir la taille de la police. Faisons-en 1,5 RAM. Ensuite, je vais définir la position sur absolue. Nous allons placer l'icône de recherche devant les champs de saisie. Je vais définir la position de pointe comme 1,7 rem. Pour ce qui est de la bonne position, je vais faire un petit calcul. Comme vous le savez, la largeur de l'entrée de recherche est de 30 lignes. Pour placer l'icône de recherche devant les entrées de recherche, nous devons ajouter la moitié de la largeur de l'entrée de recherche à 50 %. Je vais donc utiliser l'une des fonctions appelées calc. Ensuite, nous avons besoin de 50  % plus 15 courses. Comme vous pouvez le voir, l'icône est placée devant l'entrée de recherche. Mais je pense que nous avons besoin d'un peu d'espace entre eux. Donc, au lieu de 15 RAM , utilisons 16 Rent. Très bien, enfin, changeons la couleur de l'icône. Sélectionnons les ions. Réglez sa couleur sur 999 et modifiez également le curseur. Faites valoir un point. Très bien, donc tout est prêt pour créer les animations. Comme tu l'as vendu. Par défaut, nous devons masquer le champ de saisie et le bouton X. Nous devons également déplacer l'icône de recherche dans le coin supérieur droit de la page. Alors allons-y et faisons-le. Je vais masquer ce wrapper de saisie de recherche. Pour cela, utilisons l' opacité avec une valeur nulle. Et aussi une visibilité cachée. A ensuite changé la bonne position de cette icône de recherche. Mettons à droite la propriété à trois Ran. Bon, il est maintenant temps de créer une animation. Jetons un coup d'œil au projet terminé. Donc, une fois que je clique sur l'icône, elle commence à bouger et augmente également sa taille. Nous allons suivre quelques étapes différentes au cours de l'animation. Allons-y et créons des images-clés CSS. Je vais l'appeler «   search icon anime ». Ainsi, de 0 % à 40 %, l'élément changera sa position supérieure ainsi que la taille de la police. Donc, à 0 %, nous allons exécuter la position 1.7. En ce qui concerne les 40 %, nous aurons deux positions avec une valeur de 40 %. Et aussi la taille de police avec une rampe de valeur 25. Ensuite, de 40 % à 60 %, l'élément gardera sa position supérieure. Mais nous allons changer de position. Nous aurons donc 60 %, encore une fois en tête avec 40 %. C'est probablement la bonne position. Nous aurons le calcul de 50 % plus 16 rampes. Enfin, de 60 % à 100 %, les éléments changeront de position, mais nous garderons la bonne position. Ainsi, à 100 %, nous aurons la propriété supérieure avec une valeur de 1,7 rem et la bonne position avec la valeur précédente. Les images-clés CSS sont donc prêtes. Nous devons maintenant appliquer cette animation à l'élément. Pour cela, je vais utiliser la propriété d'animation. Il faut spécifier ici le nom des images-clés, puis la durée de l'animation Ça va prendre 1 s. Comme vous pouvez le voir, l'icône bouge et l' animation fonctionne correctement. Nous avons ici un petit problème. Une fois l'animation terminée l'icône revient à sa position par défaut. Nous n'en avons pas besoin. Nous devons maintenir notre position actuelle à 100 %. Pour ce faire, nous devons donc utiliser l'une des valeurs appelées forward came. Maintenant, il peut voir que tout fonctionne bien. En fait, nous devons exécuter cette animation une fois que nous avons cliqué sur l'icône. Il est donc temps de commencer à écrire du JavaScript. Nous devons associer un écouteur d'événements de clic à l'icône de recherche Alors tout d'abord, je vais sélectionner cette icône. Créons une nouvelle variable et appelons-la icône de recherche. Je vais sélectionner cet élément en utilisant la méthode de sélection de requêtes Spécifiez ici le nom de la classe, l'icône de recherche, suivi du nom de la balise. Ensuite, je vais ajouter un écouteur d'événements à l'icône de recherche Nous devons spécifier ici l'événement de clic. Et nous devons également vous transmettre une fonction de rappel, qui sera exécutée une fois que nous aurons cliqué sur l'icône de recherche Comme vous le savez, nous devons appliquer la propriété d'animation à cette icône de recherche. Pour ce faire, je vais ajouter une nouvelle classe à l'icône de recherche, je veux dire à l'élément parent. Ensuite, nous allons sélectionner cet élément en utilisant la classe nouvellement créée en CSS. Et nous allons appliquer les propriétés d'animation de l'élément. Nous avons donc besoin de votre icône de recherche, puis nous devons accéder à ses éléments parents. Je vais donc utiliser ici une propriété appelée éléments parents. Ensuite, nous avons besoin d'une autre propriété appelée liste de classes. Il inclut toutes les classes de l'élément. Et puis je vais utiliser la méthode appelée add. Spécifiez. Voici la classe, disons le changement. Très bien, c'est tout concernant JavaScript pour le moment, revenons au fichier CSS Donc, comme je l'ai dit, nous devons maintenant sélectionner l'icône de recherche avec un changement de classe. Ensuite, nous devons déplacer cette ligne de code ici. Alors maintenant, si je clique sur l'icône de recherche, l'animation s'exécutera. OK, nous devons ensuite afficher le wrapper de saisie de recherche. Pour l'instant, il est caché. Donc, de la même manière, je vais utiliser le changement de classe. Tout d'abord, sélectionnons un rappeur, créons une nouvelle variable et appelons-la wrapper d'entrée de recherche Je vais sélectionner cet élément en utilisant à nouveau la méthode QuerySelector Spécifions ici le nom de la classe, le wrapper d'entrée de recherche. Ajoutons ensuite un changement de classe à ces éléments. Nous avons donc besoin d'une entrée de recherche, d'un wrapper, d'un point, liste de classes, d'un point, d'un ajout avec un changement de classe Revenez ensuite au fichier CSS et sélectionnez wrapper avec le changement de classe Ainsi, pour afficher le wrapper de saisie de recherche, nous avons besoin d'une opacité 1 et d'une visibilité visible Alors maintenant, si je clique sur l'icône de recherche, l' entrée de recherche apparaîtra. À l'heure actuelle, il apparaît sans aucun effet. Nous devons donc utiliser la transition avec les valeurs All than the duration will be 0.5 s. De plus, je vais utiliser ici un petit délai de 1 s. OK, donc maintenant, comme vous pouvez le voir, nous avons ici un effet bien plus agréable et cool Avant de poursuivre et de commencer à programmer le bouton de fermeture, je voudrais ajouter une dernière chose. Une fois que l' entrée de recherche est affichée, je souhaite qu'elle soit automatiquement focalisée. Pour cela, je vais utiliser l'une des méthodes appelées focus. Mais dans ce cas, il faut attendre 1 s pour que les éléments apparaissent. Donc, dans un premier temps, sélectionnons les éléments d'entrée, créons une nouvelle variable. Et les collègues recherchent des entrées. Je vais sélectionner à nouveau l'élément avec la méthode QuerySelector Spécifions ici les entrées de recherche par nom de classe, suivies de la saisie du nom de balise. Je vais donc utiliser une méthode appelée set time out. Il faut deux paramètres. La première est une fonction de rappel. Insérons le point focal de votre entrée de recherche. Quant au deuxième argument , ce sera le temps. Dans ce cas. Comme nous l'avons dit, nous avons besoin d'une seconde Je vais donc passer ici à 1 000 millisecondes Alors maintenant, si nous affichons l'entrée de recherche, elle sera automatiquement focalisée. Nous devons maintenant passer à autre chose et faire fonctionner le bouton X. Une fois que nous avons cliqué dessus, nous devons masquer le wrapper de saisie de recherche Et nous devons également remettre l' icône de recherche à sa position par défaut. Tout d'abord, sélectionnons le bouton X. Je vais créer une nouvelle variable. Appelons-la icône de fermeture. Ensuite, sélectionnez les éléments à l' aide de la méthode QuerySelector. Je veux spécifier ici le nom de la classe, entrées de recherche, suivi du nom de la balise I. Ensuite, nous devons attacher écouteur d'événements Click à l'icône Spécifiez ici le type d'événement, cliquez. Et nous avons également besoin d'une fonction de rappel. Ainsi, une fois que nous avons cliqué sur le bouton, nous devons supprimer le changement de classe du wrapper de saisie de recherche ainsi que de l'icône de recherche Je vais donc récupérer ces deux lignes, les coller ici, puis les modifier pour les supprimer. Alors maintenant, si je clique sur le bouton X, les éléments se masqueront et aussi l'icône de recherche, nous reviendrons à sa place initiale. En fait, tout fonctionne bien, mais nous devons ajouter quelques effets ici. Tout d'abord, je vais masquer les éléments avec une certaine transition. Utilisons donc la transition avec le wrapper de saisie de recherche. Attribuons des valeurs de vérité à toutes et à 0,5 s. Maintenant, comme vous pouvez le constater, les éléments se cachent facilement. Ensuite, je vais m' occuper de cette icône de recherche. Nous allons créer une animation distincte dans laquelle nous allons définir le mouvement de l'icône vers la droite. Créons de nouvelles images-clés CSS. Je vais les appeler search, icon et M2. Nous aurons deux étapes différentes, 0 % et 100 %. À 0 %, nous devons définir la bonne position. Et nous devons effectuer le calcul, 50 % plus 16 RAM. C'est pour les 100 %. Nous devons définir la bonne position comme étant trois tours. Enfin, appliquons cette animation à l'icône de recherche. Utilisez la propriété d'animation dont la valeur est l'icône de recherche et m2. Ensuite 0,5 s. Et nous avons également besoin d'avants. Bien, comme vous pouvez le voir, tout fonctionne parfaitement. Et en fait, ce projet est terminé. J'espère que vous avez apprécié cette vidéo et que vous avez appris de nouvelles choses. Passons à autre chose et occupons-nous du prochain projet. 7. Projet 4 - Horloge: Très bien, il est donc temps de passer à autre chose et de commencer à construire notre prochain projet Dans cette vidéo, nous allons créer une horloge avec HTML, CSS et JavaScript. Ce sera une horloge standard, que vous avez probablement accrochée au mur chez vous. Nous avons ici des chiffres pour les heures ainsi que trois flèches différentes qui indiquent les heures, les minutes et les secondes. Très bien, allons-y et commençons à créer un projet. J'ai un nouveau dossier sur le bureau appelé horloge, qui est actuellement vide. Ouvrons-le dans le code VS et créons nos fichiers de travail pour HTML, CSS et JavaScript. Je vais les appeler index.html, style.css et scripts point js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Pour cela, nous devons placer ici un point d'exclamation , puis appuyer sur Tab ou Entrée Nous avons donc ici les balises HTML de base. La première chose que je vais faire est de changer le titre. Insérez votre horloge. Ensuite, je vais lier les fichiers CSS et JavaScript. Ouvrons la balise link dans l'élément d'en-tête et spécifions ici la partie du fichier CSS. En ce qui concerne le JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, nous devons spécifier le chemin du fichier dans les attributs source. OK, nous sommes donc prêts à commencer. La dernière chose que je vais faire est d'exécuter le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé serveur live. Cela nous permet d'exécuter le projet en direct dans le navigateur et d'apporter des modifications et des mises à jour sans actualiser la page à chaque fois. OK, Enfin, plaçons le navigateur et l'éditeur côte à côte, comme ça. Et lancez-vous. Je vais créer le balisage HTML. Ensuite, nous allons le styliser. Je veux dire, nous allons faire en sorte que les éléments ressemblent à une horloge. Ensuite, nous allons le faire fonctionner en utilisant JavaScript. Allons-y donc et commençons à créer le balisage HTML. Ouvrons la balise profonde, qui sera le conteneur. Il inclura l' intégralité du contenu. Ensuite, je vais ouvrir une autre balise div à l'intérieur du conteneur qui est affectée à l'horloge de classe L'horloge sera composée de deux parties différentes, mais nous aurons les chiffres et les flèches. C'est une balise div ouverte avec les numéros de classe. Nous aurons quatre numéros différents. Ouvrons la balise div avec la classe 12. Et comme contenu, Instituons votre 12e. Ensuite, je vais dupliquer cette ligne de code trois fois, puis modifier les noms des classes ainsi que le contenu. Il nous en faut trois. Puis 6.9. C'est tout pour les chiffres. Ouvrons la balise div, qui va être l' enveloppe des flèches Nous aurons trois flèches différentes. Ouvrons la balise div avec l'heure de cours. Ensuite, je vais le dupliquer deux fois et changer les noms des classes. Nous avons besoin ici de minutes et de secondes. Très bien, c'est tout en ce qui concerne le balisage HTML. Pour l'instant, nous n'avons ici que les chiffres. Allons-y donc et commençons à personnaliser l'horloge. Tout d'abord, je vais ajouter le lien vers les polices Google. Je vais utiliser l'une des polices Google tout au long de ce projet. Allons-y donc et visitons le site Web de Google Fonts. Recherchez ensuite l'une des polices appelées concert one. instant, nous avons ici un texte à titre d'exemple, mais nous nous intéressons aux chiffres. Nous pouvons donc simplement changer la phrase en chiffres et voir à quoi ressemble la police Nous allons sélectionner le style. Pour relier les ponts, nous avons deux options différentes. Vous pouvez soit récupérer ce lien et le coller dans l'élément d'en-tête, soit cliquer sur Importer, récupérer cette URL et la coller dans le fichier CSS. Très bien, donc une fois la police sélectionnée, je vais ensuite réinitialiser certains styles par défaut Sélectionnons tous les éléments à l'aide d'un astérisque et supprimons les valeurs par défaut, les marges et le remplissage Je vais les mettre tous les deux à zéro et également modifier la famille de polices pour chaque élément. Utilisons ici le cours Cuckoo Font Concept One Très bien, comme vous pouvez le voir, les chiffres apparaissent maintenant différemment Donc je vais faire ce projet, je vais utiliser la RAM comme unité de mesure. heure actuelle, 1 g est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Je veux convertir une RAM en dix pixels. Par conséquent, nous devons réduire la taille de police des éléments HTML et la porter à 62,5 %. Comme vous pouvez le constater, les chiffres sont devenus plus petits. Ensuite, je vais m' occuper du conteneur. Sélectionnons-le. Et tout d'abord, définissons sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Nous avons donc besoin de 100 vh. Ensuite, je vais placer le contenu du conteneur au centre. Et pour cela, utilisons Flexbox. Nous devons régler l'affichage pour qu'il soit flexible. Ensuite, pour le centrage horizontal et vertical, nous devons justifier le centre du contenu et également aligner les éléments au centre Très bien, maintenant le contenu est placé au centre et nous pouvons personnaliser l'horloge elle-même. Allons-y, sélectionnons Horloge et définissons sa largeur et sa hauteur. Je vais les régler tous les deux à 45. Courez. Modifiez également la couleur d'arrière-plan. Je vais le rendre gris en utilisant la couleur ACA, CAC. Ensuite, je vais arrondir l'horloge. Pour cela, nous devons utiliser border-radius avec une valeur de 50 %. Créons ensuite une petite bordure. Réglons sa largeur à 0,5 RAM, puis rendons-la solide. En ce qui concerne la couleur, utilisons 777. Enfin, créons un petit effet d'ombre. Sur les quatre côtés. Utilisez box-shadow avec des valeurs de 0,5 gramme deux fois plus qu'une RAM Et comme couleur, utilisons 555. Ensuite, je vais placer ici -0,5 rem deux fois par pièce. Et de la même couleur. Très bien, voyons ce qu'il en est de l'horloge. Ensuite, je vais m' occuper des chiffres. Nous allons sélectionner l'élément div du wrapper et le définir en hauteur. Dans ce cas, nous devons hériter de la même largeur et de la même hauteur de l'élément parent, qui est une horloge Nous devons donc définir la largeur et la hauteur, les deux devant être héritées D'accord ? Ensuite, je vais sélectionner tous les éléments div à l'intérieur des nombres. Nous allons donc d'abord positionner les chiffres. Réglons la position sur absolue. Ensuite, afin de positionner les nombres en fonction de l'élément parent, nous devons définir la position des nombres par rapport à un élément relatif. Ensuite, augmentons la taille de police des chiffres. Portez-le à 2,5 rem. Très bien, maintenant je vais les positionner séparément. Allons-y et commençons par le 12. Il sera placé en haut de l'horloge. Alors sélectionnons-le et mettons-le en position 21. Ensuite, nous devons le centrer horizontalement. Pour cela, je vais régler la position gauche à 50 %. Et puis pour un centrage parfait, il faut utiliser Transform avec la fonction translate x. Et nous devons traduire les éléments de -50 %. D'accord ? Ensuite, nous en avons trois. Sélectionnons-le. Dans le cas de trois, nous avons besoin de la bonne position pour qu'il y ait une RAM. Ensuite, nous devons censurer les éléments verticalement. Nous devons donc fixer la position à 50 %. Et dans ce cas, nous devons transformer, traduire y -50%. Allons-y et occupons-nous du reste des chiffres. Le suivant est six. Dans ce cas, nous devons définir une position pour obtenir un seul point. Alors reprenons ces deux lignes à partir d'ici. En ce qui concerne le dernier chiffre, qui est neuf, nous avons besoin que la position gauche soit une RAM. Et puis nous avons également besoin de ces deux lignes ici. Très bien, donc les quatre chiffres sont positionnés. Ensuite, je vais changer la couleur. Faisons en sorte qu'il soit blanc. Et créez également un petit effet d'ombre. Utilisez une ombre de texte avec les valeurs pointant trois fois vers la RAM. Et la couleur aussi. C'est tout en ce qui concerne les chiffres. Passons à autre chose et prenons soin des flèches. Tout d'abord, définissons cette largeur et cette hauteur sous forme de chiffres. Je vais hériter de la largeur et de la hauteur de l'horloge. Mettons-les tous les deux en héritage. Ensuite, je vais définir la position. Faisons en sorte que ce soit absolu. Dans ce cas, l' élément sortira du flux normal de la page. Et pour le positionner en fonction de l'élément parent, nous devons le positionner par rapport à l'horloge. Définissons ensuite les propriétés top et lag Je vais les mettre toutes les deux à zéro. Les flèches doit-on placer au centre de l'horloge ? Et pour y parvenir, je vais utiliser à nouveau flexbox. Nous avons besoin de flexibilité d'affichage, puis de justification du centre de contenu et d' alignement du centre des éléments. Très bien, c'est tout à propos de l'emballage. Ensuite, je vais créer ce petit cercle. Il va être créé à l'aide du pseudo-élément before. Nous allons donc sélectionner les flèches suivies du pseudo-élément précédent. Rendons le contenu vide. Ensuite, définissez la largeur et la hauteur ainsi que la couleur de fond. Je vais régler la largeur et la hauteur à 2,5 RAM. Quant à la couleur de fond, elle sera blanche. Nous avons donc ici les éléments, actuellement ils ont la forme d'un carré. Faisons donc un cercle. Et faisons aussi un petit effet d'ombre. Réglons également le rayon de la bordure à 50 %, l'ombre. Utilisons Box Shadow avec les valeurs pointant deux fois vers la RAM. Puis 0,5 RAM. Et comme couleur, utilisons 777. Très bien, disons à propos d'un cercle. Allons-y et prenons soin des flèches. Pour le moment, ils ne sont pas visibles car nous n'avons que les éléments div vides Allons-y et sélectionnons tous les éléments div à l'intérieur des flèches Tout d'abord, en fonction de la largeur et de la hauteur définies, ainsi que de la couleur de fond. Je vais régler avec 2,7 rem. Ensuite, la hauteur sera de 12. Exécuté dans le cadre de la couleur d' arrière-plan, je vais utiliser la couleur f, f, f 0, f phi. À présent, les éléments sont visibles. Ensuite, je vais m' occuper de leurs positions. Je vais les placer au centre de ce cercle. Réglons donc la position sur absolue. Et puis définissez la position inférieure, soit 50 %. Ensuite, je vais ajouter un petit effet d'ombre aux flèches. Utilisons box-shadow. La valeur est le point à exécuter deux fois, puis 0,5 RAM et la couleur 777. Enfin, changeons la forme des éléments pour qu'ils ressemblent à des flèches. Je vais le faire en utilisant Border-Radius. Le rayon de bordure prend donc quatre valeurs différentes. Les coins supérieur gauche et supérieur droit seront de 100 %. S4, les coins inférieur droit et inférieur gauche, je vais les mettre en zéros. Comme vous pouvez le voir, les éléments ressemblent maintenant à des flèches. heure actuelle, nous ne voyons ici qu'une seule flèche, mais les trois flèches sont affichées. Ils sont placés l' un sur l'autre. La prochaine chose que je vais faire est de placer les flèches derrière ce cercle. Et pour cela, nous pouvons utiliser la propriété z-index avec une valeur supérieure à zéro, disons dix Hein ? Ensuite, je vais personnaliser les flèches séparément. Commençons par les secondes, car elles sont placées au-dessus du reste des flèches. Je vais changer la couleur de fond. Réglons-le sur C, F, E six. À l'heure actuelle, rien n'a changé. Et cela se produit parce que nous avons déjà changé la couleur d' arrière-plan des flèches lorsque nous les avons sélectionnées à l'aide de la balise div Et elle a une priorité plus élevée. Pour remplacer ce style, nous devons sélectionner l'élément à l' aide des éléments du parent Je veux dire des flèches. Alors maintenant, la couleur de fond est modifiée. En plus de cela, je vais faire pivoter la flèche. Utilisons Transform avec la fonction de rotation. Et je vais faire pivoter la flèche. Au revoir, disons 270 degrés. heure actuelle, la flèche pivote à partir du centre car par défaut, l'origine de la transformation est définie sur le centre Dans ce cas, nous devons placer l'origine de la transformation en bas au centre. Comme vous pouvez le constater, le problème est résolu. Ensuite, occupons-nous probablement de l'heure. Ensuite, nous devons le sélectionner à l'aide de l'élément parent car nous allons réduire sa hauteur. Réglons sa hauteur à dix RAM. Et je vais aussi faire pivoter la flèche. Faisons-le pivoter de 90 degrés. Très bien, enfin, l'horloge est personnalisée et tout est prêt pour fonctionner Comme nous l'avons dit, nous allons le faire en utilisant JavaScript. Allons-y et ouvrons le fichier script.js. La première chose que je vais faire est de sélectionner les trois flèches. Allons-y et créons une nouvelle variable. Je vais l'appeler Our. Sélectionnez ensuite la flèche à l'aide de la méthode de sélection de requête. Précisons ici l'heure du nom de la classe. Ensuite, je vais dupliquer cette ligne de code deux fois. Changeons le nom de la variable dont nous avons besoin en minutes. Et nous avons également besoin ici de la minute de cours , puis nous avons besoin ici de la seconde et du nom de la classe. Voyons voir, instituons-en une seconde également. Très bien, après cela, je vais créer une fonction. Disons que c'est une date fixe. À l'intérieur de cette fonction, nous allons réussir à faire fonctionner correctement les flèches. Ensuite, nous appellerons cette fonction après chaque seconde en utilisant la méthode d'intervalle défini. Tout d'abord, je vais créer une variable qui nous donnera l'état actuel. Je vais l'appeler. À présent. Elle doit être égale à la nouvelle date. Voyons voir dans la console ou dans cette variable que je vais lancer console.log. À présent. Ensuite, je vais appeler cette fonction. Mais avec la méthode des intervalles définis. En fait, cette méthode nous permet d' exécuter la fonction avec certaines intégrales. Il faut deux arguments. Le premier est le nom de la fonction. Dans notre cas, il s'agit d'une date fixe. En ce qui concerne le second argument, il s'agit de la quantité de l'intervalle exprimée en millisecondes Dans notre cas, ce sera mille millisecondes. Examinons la page et passons à l'onglet Console. Comme vous pouvez le voir, nous obtenons ici la date et l' heure actuelles ainsi que le fuseau horaire après chaque seconde. Très bien, nous devons ensuite définir les secondes, les minutes et les heures séparément. Créons donc une nouvelle variable. Je vais dire qu'il passe en deuxième position. Pour obtenir les secondes à partir de l'heure actuelle, nous devons utiliser l'une des méthodes de date intégrées appelée get seconds. Nous avons donc besoin maintenant de points pour obtenir des secondes. Si nous vérifions cette variable dans la console, nous obtiendrons des secondes. De la même manière, nous devons définir les minutes et les heures. Dupliquons donc cette ligne de code deux fois , puis changeons les noms des variables ainsi que les noms des méthodes. Nous avons besoin. Obtenez des minutes et des heures. Très bien, les trois variables sont donc créées. Comme vous pouvez le voir, notre horloge a la forme d' un cercle et la taille du cercle est égale à 360 degrés. Nous devons convertir les secondes, les minutes et les heures en degrés afin de définir les portions du moment de chaque flèche. Allons-y et commençons par ces secondes. Je vais créer une nouvelle variable. Disons que c'est le deuxième degré. Ainsi, pour convertir les secondes en degrés, nous devons utiliser la formule suivante. Nous devons diviser le nombre actuel de secondes, au revoir 60, parce que nous avons 60 s. Et ensuite nous devons le multiplier par 360. Très bien, maintenant nous pouvons tous ou eux faire bouger la deuxième flèche Pour cela, nous devons le faire pivoter d'un second degré. Nous avons donc besoin d'une deuxième transformation de point de style point égale à la fonction de rotation. Et en tant que valeur, nous devons passer ici. Deuxième diplôme suivi des diplômes. Donc, comme vous pouvez le voir, maintenant, si la flèche se déplace après chaque seconde et qu'elle nous indique les secondes en cours. De la même manière, nous devons convertir les minutes et les heures. Dupliquons cette ligne de code deux fois. Nous avons donc besoin de minutes. Diplôme. Puis obtient une minute. Ensuite, nous avons besoin de notre diplôme. Et dans ce cas, nous devons le diviser par 12 car au total, nous avons 12 h. Très bien, enfin, nous devons définir les valeurs de la fonction de rotation pour les minutes et les heures. Dupliquons cette ligne de code deux fois. Nous avons besoin ici d'un style minutieux. Et nous devons également réussir votre diplôme de minute. C'est pour l'heure. Nous avons deux voies ici, notre diplôme. Très bien, on peut donc voir que nous avons ici l' heure actuelle et que l'horloge fonctionne parfaitement 8. Projet 5 - Barre de navigation: Très bien, il est donc temps de passer à autre chose et de commencer à construire notre prochain projet Dans cette vidéo, nous allons créer une barre de navigation. À première vue, le projet semble simple, mais il sera vraiment intéressant et j'espère que vous apprendrez de nouvelles choses. Bien, allons-y et décrivons le projet. Comme vous pouvez le constater, nous avons ici quelques éléments de navigation différents. Ils sont représentés par les icônes Font Awesome. Par défaut, le premier élément a une couleur différente avec un arrière-plan différent et également une forme différente. Une fois que j'ai cliqué sur d'autres éléments, ils changeront ces couleurs et cette forme avec de jolis effets. Allons-y et commençons à construire le projet. J'ai créé un nouveau dossier sur le bureau appelé navbar, qui est actuellement vide. Allons-y et ouvrons-le dans VS Code, puis créons nos fichiers de travail. Le premier sera index.html. Ensuite, nous avons besoin de style.css et de script.js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Pour cela, je vais utiliser des amides. Plaçons ici un point d' exclamation puis appuyons sur Tab ou Entrée Nous avons ici les balises HTML de base. Tout d'abord, changeons le titre. Je vais passer devant ta barre de navigation. Ensuite, je vais lier les fichiers CSS et JavaScript. Ouvrons la balise link et spécifions ici le nom du fichier de cet utilisateur. En ce qui concerne le JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, nous devons spécifier le chemin du fichier dans l'attribut source. Très bien, en plus de cela, je vais ajouter un lien supplémentaire pour les icônes de Font Awesome Allons-y et recherchons Font Awesome. États-Unis canadiens. Copiez ensuite le premier lien à partir d'ici. Ouvrez la balise de lien dans l'élément d'en-tête et collez le lien CDN dans l'attribut de référence h. Très bien, nous sommes presque prêts à commencer à écrire le code. Exécutons le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé Live Server. Cela nous permet d'exécuter le projet en direct sur le navigateur et d'apporter des modifications et des mises à jour sans actualiser la page à chaque fois. Enfin, plaçons l'éditeur et le navigateur côte à côte. Comme ça. Et lancez-vous. Je vais commencer à créer le balisage HTML. Ouvrons la balise de navigation HTML5 avec une classe. Maintenant, à l'intérieur de cet élément, nous aurons sept éléments de navigation différents. Ouvrons maintenant la balise de lien avec la classe par lien. Ainsi, chaque élément de lien inclura une police, une icône géniale. Ouvrons l'élément I avec les classes FAS d'une maison. Dupliquez ensuite cette ligne de code six fois et modifiez les noms de classe des icônes Font, Awesome. La seconde sera une caméra. Ensuite, nous publierons le calendrier. Le prochain sera le campus. Ensuite, nous aurons un livre. La prochaine icône sera Camera Retro. Et enfin, nous aurons des écouteurs. Très bien, c'est tout pour le balisage HTML pour le moment, passons au fichier CSS et personnalisons le principe des éléments Je vais créer des styles par défaut et réinitialiser. Allons-y et sélectionnons chaque élément l'aide d'un astérisque Tout d'abord, je vais me débarrasser de marge et du rembourrage par défaut Définissons également les deux propriétés. Zéro. Ensuite, nous avons besoin de la taille de la boîte, de la borderbox. De plus, je vais supprimer les styles par défaut des éléments de lien en utilisant la décoration du texte, mais aucun. Tout au long de ce projet, nous allons donc utiliser la RAM comme unité de mesure. heure actuelle, 1 g est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Par défaut, je vais convertir 1 g en dix pixels. Et pour cela, nous devons diminuer la taille de police de l'élément HTML. Mettons-le à 62,5 %. Très bien, après cela, je vais sélectionner un élément du corps et définir sa largeur et sa hauteur Je vais régler la largeur à 100 %. La hauteur sera de 100 % de la fenêtre d' affichage, je veux dire 100 vh Et changez également la couleur d'arrière-plan. Je vais utiliser la valeur RGB 19124826. Ensuite, je vais placer la sieste ou au centre de la page. Nous pouvons le faire de différentes manières. Dans ce cas, je vais utiliser une grille CSS. Nous avons besoin d'une grille d'affichage , puis de placer les éléments au centre. Comme vous pouvez le voir, les éléments sont centrés à la fois horizontalement et verticalement. Voyons donc quels sont les éléments du corps. Ensuite, je vais personnaliser le napa. Tout d'abord, il a défini sa largeur et sa hauteur. Je vais régler la largeur sur 70, run. Pour la hauteur, ça va faire dix RAM. En plus de cela, je vais lui attribuer une couleur d'arrière-plan temporaire afin voir à quoi ressemble la barre de navigation Donc, en cas de recul de la couleur vers le gris clair CCC. l'heure actuelle, les éléments de navigation se sont retrouvés dans le coin supérieur gauche de la barre de navigation. Nous devons leur envoyer. Et pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, pour le centrage horizontal, nous avons besoin de justify-content Mettons la direction verticale. Nous devons aligner les objets au centre. Très bien, c'est tout à propos de la barre de navigation. Ensuite, je vais maintenant personnaliser par lien. Dans un premier temps, définissons la largeur et la hauteur. La largeur sera inférieure à la RAM car pour la hauteur, je vais la régler à 100 %. Modifiez également la couleur d'arrière-plan. Je vais utiliser à nouveau la valeur RGB 222-23-3181 et me débarrasser de la couleur d'arrière-plan temporaire du Napa OK, nous devons maintenant positionner les éléments de navigation. Je vais les placer horizontalement au centre et en bas au bas du napa Pour cela, utilisons à nouveau flexbox. Nous devons afficher la flexibilité, puis aligner les éléments sur une valeur flexible et également justifier le centre de contenu. En plus de cela, je vais créer de l'espace en bas à l'aide d'un rembourrage Plaçons le bas du rembourrage sur une rampe. Hein ? C'est tout pour le Napa Link. Passons à autre chose et aux clients, à la police, aux icônes Awesome. Sélectionnons les éléments. Tout d'abord, je vais augmenter la taille de la police. Réglons-le sur 2,5 marques, puis changeons la couleur, faisons-le 333. Très bien, le numéro est donc presque personnalisé et nous devons maintenant le faire fonctionner Jetons un coup d'œil aux projets terminés. Le demi-cercle, que vous voyez avec l'élément de navigation Actin créé à l'aide du pseudo-élément before Je vais donc maintenant créer cet élément. Sélectionnons maintenant le fait de tirer avec les pseudo-éléments précédents. Tout d'abord, nous devons définir le contenu. Il va être vide. Définissez ensuite la largeur et la hauteur. La largeur va être de dix. Courez. Pour ce qui est de la hauteur, je vais en faire un Tran. Et je vais également lui attribuer une couleur de fond temporaire. Disons rouge. Très bien, nous avons donc ici avant les pseudo-éléments. Ensuite, je vais changer sa position. Réglons sa position sur absolue. En fait, nous devons positionner cet élément en fonction du lien Navajo Attribuons donc à chaque position un élément relatif. Ensuite, nous devons définir les positions supérieure et gauche. La première position sera de -100 %. C'est probablement la position de gauche. Je vais le mettre à zéro. Enfin, changeons la forme du pseudo-élément antérieur à l' aide de border-radius Il faudra quatre valeurs. Le premier sera situé dans le coin supérieur gauche. Mettons-le à zéro. Ensuite, le coin supérieur droit sera égal à zéro. coin inférieur droit contiendra cinq RAM, tandis que le coin inférieur gauche contiendra également cinq RAM. Très bien, nous sommes maintenant prêts à faire en sorte qu'une application fonctionne. Pour ça. Je vais utiliser du JavaScript, nous devons maintenant attacher un événement de clic sur les bâtiments. Tout d'abord, sélectionnons tout ce que vous connaissez à propos de Berlin. Je vais créer une nouvelle variable. Disons qu'il clignote et sélectionnons tous les liens à l'aide du sélecteur de requête. Toutes les méthodes. Nous devons maintenant spécifier ici le nom de la classe par lien. Ensuite, nous devons parcourir les liens. En fait, la méthode all du sélecteur de requêtes renvoie un objet semblable à un tableau appelé liste Nous devons parcourir cette liste et associer un écouteur d'événements à chaque lien Pour parcourir la liste, je vais utiliser l' une des méthodes d' aide au tableau appelée forEach. Cette méthode fonctionne correctement avec la liste des nœuds. Nous n'avons pas besoin de le transformer en tableau. Sinon, si vous utilisez une autre méthode d'aide au tableau ou si vous voulez parcourir la collection HTMLCollection plutôt que dans un premier temps, vous devez la transformer en OK, utilisons la méthode forEach. Nous devons passer une fonction de rappel qui prendra un paramètre Ce sera l'élément actuel de la boucle Ensuite, nous devons associer un écouteur d' événements à chaque lien Précisons ici le type de clic sur l'événement et nous vous transmettrons également une fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur le lien Donc, une fois que nous avons cliqué sur l'élément, nous devons le déplacer avant le pseudo-élément vers le bas. Je vais ajouter une nouvelle classe au lien. Ensuite, nous allons sélectionner avant de voir l'île avec cette classe et définir le mouvement de l' élément avec du CSS. Ajoutons donc une nouvelle classe au lien. Nous avons besoin ici d' une propriété de liste de classes, qui inclut toutes les classes de l'animal. Ensuite, elle doit être suivie de la méthode d'ajout. Et nous devons spécifier ici le nom de la classe. Disons le changement. Très bien, allons dans le fichier CSS et sélectionnons avant le pseudo-élément avec le changement de classe et définissons la première position Et c'est -30 %. OK, alors maintenant si je clique sur l'élément de navigation avant que le pseudo-élément ne descende, nous avons en fait un petit problème. Si nous cliquons sur un autre élément de navigation que le précédent, les bras se déplaceront vers le bas, mais le précédent gardera sa position. Nous devons donc régler ce problème. Nous devons remplacer le nom de classe de l'élément de lien par Napa link Encore une fois sur Click. Pour cela, nous devons parcourir les liens et définir le nom de la classe comme napa link Nous avons donc besoin, encore une fois pour chaque méthode d'une fonction de rappel avec un lien de paramètre Nous devons donc définir ClassName. Et il doit être égal au lien NOPAT. Très bien, comme vous pouvez le voir, le problème est maintenant résolu Ensuite, je vais changer la couleur des icônes ainsi que la couleur de fond. Nous devons donc sélectionner un lien Albert avec le changement de classe. Définissons la couleur de fond. Je vais utiliser ici la valeur RGB 185-19-7147. Ensuite, je vais sélectionner à nouveau les ions avec le changement de classe. Définissons la couleur. Ça va être blanc. Et augmentez également la taille de la police, faites-la 3,5 rem. Comme vous pouvez le constater, les éléments de navigation changent de couleur et de taille. Une fois que nous avons cliqué dessus, jetons un coup d'œil au projet terminé. Ainsi, une fois que nous avons cliqué sur l'élément de navigation, leurs frères et sœurs modifient le rayon de la bordure. Maintenant, nous devons nous en occuper. Comme le changement de classe. Je vais ajouter une nouvelle classe aux éléments frères de la bague Ensuite, nous allons définir les styles et le CSS. Nous devons donc leur lier la propriété appelée « éléments précédents frères Encore une fois, nous devons utiliser des biens locatifs collectifs. Eh bien, la méthode s'ajoute, et je vais spécifier ici le nom de la classe. Disons « précédent », « EL change ». Je veux dire le changement d'élément précédent. Dupliquons cette ligne de code. Au lieu du frère précédent, nous avons besoin du frère de l'élément suivant Et changez également le nom de la classe. Nous avons besoin du changement d'élément suivant. Très bien, allons dans le fichier CSS et sélectionnons eNobe ou établissons un lien avec ces classes récemment ajoutées Nous devons donc définir ici la bordure, en haut à droite, le rayon à 1,3 rem. Dupliquons ce code. Changez le nom de la classe, nous avons besoin du changement d'élément suivant. Et dans ce cas, nous devons attribuer la même valeur au rayon supérieur gauche. D'accord ? Donc, afin de mieux voir si le rayon de bordure fonctionne correctement, éliminons cette couleur de fond rouge temporaire et utilisons la couleur qui est la même que la couleur de fond de l'élément du corps OK, maintenant le rayon de la bordure est visible, mais comme vous pouvez le voir, nous devons légèrement ajuster la position des pseudo-éléments précédents car les coins de l' article ne sont pas très beaux. Pour ce faire, dans un premier temps, je vais augmenter légèrement la largeur des pseudo-éléments précédents. Réglons-le à dix points pour la RAM. Ensuite, nous devons déplacer les éléments vers la gauche. Changeons donc la position dans laquelle je me trouve dans la propriété de gauche. Nous avons besoin d'un point négatif pour courir. Bon, comme vous pouvez le voir, nous avons un bien meilleur résultat. En fait, il y a un petit problème ici. Si nous cliquons sur le premier élément, le rayon de bordure de l'élément suivant fonctionne Parce que nous avons une erreur ici. Si j'inspecte la page puis que je passe à l'onglet console, vous verrez l'erreur indiquant que vous ne pouvez pas lire la liste des classes de propriétés nulle. Cela se produit parce que le premier objet ne correspond pas au frère ou à la sœur précédent Et le même problème que nous avons avec le dernier article. Il n'a pas le frère de l'élément suivant. Pour résoudre ce problème, je vais créer de nouveaux éléments en HTML. Je veux dire, les éléments que nous avons devant le premier élément et à la fin du numéro. Ouvrons donc la balise div avec une classe par lien Copiez ensuite cette ligne de code et collez-la ci-dessous. Maintenant, nous devons faire quelques choses, car les éléments de navigation ne semblent pas bons au début Augmentez la largeur de la barre de navigation Réglons-le à 90 RAM. Ensuite, nous devons désactiver les événements de pointeur pour les éléments nouvellement créés Parce qu'une fois que nous cliquons dessus, nous avons les mêmes effets que les éléments de navigation. Sélectionnons les développements à l'aide des pseudo-classes du premier enfant et du dernier enfant, puis attribuons-leur des événements pointeurs OK, alors maintenant tout fonctionne bien. Nous avons juste besoin d'ajouter quelques effets différents à la barre de navigation. Tout d'abord, rendons les effets plus fluides en quelques transitions. Tout d'abord, ajoutons une transition vers les icônes de Font Awesome. Nous avons besoin des valeurs suivantes. Colorie 0,4 s, puis taille de police avec la même durée. Ensuite, ajoutons la transition vers les pseudo-éléments avant le changement de classe. Dans ce cas, nous avons besoin de 0,2 s maximum. De plus, nous devons effectuer la transition pour le pseudo-élément before par défaut. Dans ce cas, nous avons besoin d'un top d'une durée de 0,4 s, puis d'une couleur d'arrière-plan d'une durée de 0,4 s. Et nous avons également besoin d'un petit délai, 0,4 s. OK, ensuite nous devons faire la transition pour les sœurs de l' élément précédent et suivant. Dans ce cas, nous avons besoin d' un rayon de bordure d'une durée de 0,45 s. Maintenant, comme vous pouvez le constater, nous avons de bien meilleurs résultats Ensuite, je vais utiliser la transition pour la sieste ou le lien. Nous avons besoin ici de border-radius, 0,2 s. De plus, nous avons besoin ici de masquer le débordement car si nous cliquons dessus avant le pseudo-élément haut de l'élément de navigation, il se déplacera vers le bas. Nous n'en avons pas besoin. Utilisons donc overflow hidden. Très bien, maintenant le problème est résolu. Ensuite, je vais ajouter un petit effet d'ombre à la barre de navigation. Utilisons trois fois box-shadow avec des valeurs de 0,3 RAM et la couleur AAA Ensuite, nous avons besoin d'un rayon frontalier pour les développements. Je veux dire, le début et la fin du roman. À l'heure actuelle, ils sont sélectionnés ensemble. Je vais donc les sélectionner séparément. Ajoutez-y ensuite. Le rayon du premier sera de 0,5 rem 00.5 Rome. Quant au second, il sera de 0,5 rem, 0,5 gramme. Et puis à nouveau zéro. Le rayon de bordure est appliqué. Mais maintenant, les coins du Napa sont visibles à cause de l'effet d'ombre Nous avons donc également besoin d'un rayon frontalier pour les Navajos. Réglons-le sur 0,5 rampe. Très bien, la dernière chose que je vais faire est de rendre le premier élément de navigation actif par défaut Parce que si je recharge la page, nous n'aurons aucun élément actif. Pour ce faire, nous devons attribuer à la première classe de développement le changement d'élément précédent. Et en plus de cela, nous devons attribuer à la première classe d'éléments de lien, passer à la seconde classe d'éléments de lien. Modification de l'élément suivant. Maintenant, on considère que si je recharge la page le premier élément de navigation sera actif par défaut Très bien, nous avons enfin terminé, nous avons fini de travailler sur ce projet. Passons à autre chose et commençons à créer le suivant. 9. Projet 6 - Chargeurs de site Web: OK, il est temps de passer à autre chose et de créer notre prochain projet. Dans cette section, nous allons créer deux chargeurs CSS différents Ces chargeurs sont utilisés avant le chargement de la page Web. Et de nos jours, vous pouvez les rencontrer sur tous les sites Web modernes. Très bien, allons-y et approfondissons notre projet. Dans l'ensemble, nous avons donc trois chargeurs différents. Décrivons-les rapidement. Le premier chargeur est composé de neuf points. Ils sont placés sur trois lignes différentes, et chaque point comporte une animation. Il existe des écailles et les opacités augmentent à certains intervalles Je veux dire que la durée de l'animation est différente pour chaque point. Deuxième chargeur, nous avons cinq lignes différentes pendant l'animation. Leur taille augmente avec des délais différents. Quant au troisième chargeur, il se compose de cinq cercles différents. Chaque cercle possède une belle animation. Ces choses plus légères sont créées à l'aide de pseudo-éléments. Très bien, c'est donc ce que nous allons créer dans cette vidéo Nous utiliserons du HTML et du CSS. Alors commençons. J'ai créé un nouveau dossier sur le bureau appelé css loaders. Il est vide pour l'instant. Allons-y, ouvrons-le dans le code VS et créons nos fichiers de travail pour HTML et CSS. Le premier sera index.html. Quant au second, il s' agira de style.css. Ensuite, je vais ouvrir le fichier index.html et créer un document HTML de base. Pour cela, nous devons placer ici un point d'exclamation, puis appuyer sur Entrée ou sur la touche Tab Très bien, nous avons donc ici les balises HTML de base. Dans un premier temps, changeons le titre. Nous devons utiliser des chargeurs CSS. Ensuite, je vais lier le fichier CSS. Pour ça. Ouvrons la balise link et indiquons ici le chemin du fichier. Très bien, nous devons maintenant exécuter le projet dans le navigateur, puis commencer à écrire le code Pour ouvrir le projet dans le navigateur, je vais utiliser l'un des packages de code VS appelé serveur live. Cela nous permet d'exécuter le projet en direct sur le navigateur. OK, Enfin, plaçons l' éditeur et le navigateur côte à côte Comme ça, et commencez. Je vais donc commencer par le premier chargeur, je veux dire, ces points bruns. Allons-y et commençons par créer le balisage HTML Je vais ouvrir la balise div avec un conteneur de classe. Il inclura l' intégralité du contenu. Ensuite, je vais ouvrir une autre balise div avec celle du chargeur de classe Au total, nous aurons donc neuf points. Et je vais les créer en utilisant éléments div avec les points de classe Très bien, c'est tout à propos du balisage HTML. Pour le moment, rien n'est visible sur la page car nous n'avons que les balises div vides Nous pouvons maintenant commencer à écrire le CSS. Tout d'abord, je vais créer des styles de réinitialisation. Sélectionnons tous les éléments à l'aide d'un astérisque. Je vais supprimer la marge et le rembourrage par défaut de chaque élément Mettons-les donc tous les deux à zéro. Tout au long de ce tutoriel, je vais utiliser la RAM comme unité de mesure. Hein ? Désormais, une mémoire vive équivaut à 16 pixels car par défaut, la taille de police des éléments HTML est égale à 16 pixels. Je veux convertir une RAM en dix pixels. Et pour cela, nous devons diminuer la taille de police des éléments HTML. Mettons-le à 62,5 %. Très bien, je vais maintenant prendre ici le conteneur. Sélectionnons-le et définissons sa largeur et sa hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, elle représentera 100 % de la fenêtre d'affichage. Et réglons également l' affichage pour qu'il soit flexible. instant, je vais placer le premier chargeur au centre. Mais une fois que nous aurons créé le reste des chargeurs, je modifierai légèrement la disposition flexible afin de centrer les éléments dont nous avons besoin pour justifier le centre éléments dont nous avons besoin pour justifier le de conférence et aligner les éléments Centre. OK, donc c'est tout pour le conteneur. Ensuite, je vais sélectionner et personnaliser le chargeur lui-même. Sélectionnons-le et définissons sa largeur à 20 mètres. Très bien, ensuite, allons-y et personnalisons les adultes. Réglez la largeur et la hauteur, toutes deux de 23 RAM. Ensuite, je vais les arrondir en utilisant rayon de bordure avec une valeur de 50 %. Modifiez également la couleur d'arrière-plan. Fais un cinq contre un, puis un . Je vais créer un espace autour des points en utilisant la marge. Réglons-le sur 1,6 RAM sur les quatre côtés. Et enfin, modifiez l' opacité, mettez-la à 0,6. Maintenant, les points sont visibles, mais nous devons les aligner correctement. Pour cela, utilisons la flexbox. Je vais régler l'affichage pour qu'il fléchisse Ensuite, pour aligner les éléments, il y a trois lignes. Nous devons les emballer. Nous devons donc adapter l'encapsulation à la valeur rap. Ensuite, je vais les centrer à l'aide du centre de contenu justify-content Comme vous pouvez le voir, les points sont alignés. Il est donc temps de créer l'animation. Nous allons le faire en utilisant des images-clés CSS. Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater au cours de l'animation, les adultes grossissent et les quiz sont de plus en plus opaques Allons-y et créons les images-clés CSS. Je vais l'appeler Animate Loader One. Au cours de l'animation, nous devons donc augmenter l' échelle des éléments. Donc, à 0 %, je vais définir l'échelle de transformation sur un. Ensuite, à 50 %, je vais augmenter l'échelle et également augmenter l'opacité Nous devons donc transformer l'échelle avec une valeur de 1,5. Et l'opacité sera de 100 %. Je veux dire, à la fin de l'animation, nous devons réduire l'échelle. Et nous devons également réduire l'opacité. Très bien, les images-clés sont créées et nous devons maintenant appliquer ces règles aux éléments Pour cela, nous devons utiliser une propriété d'animation. Comme nous l'avons dit, nous avons besoin durées d'animation différentes pour les adultes Je vais donc les sélectionner à l'aide du sélecteur de nième enfant. Nous allons sélectionner le premier. Utilisez ensuite l'animation. Nous devons transmettre ici deux valeurs différentes. Le premier sera le nom des images-clés qui animeront le Celle dont nous avons besoin pour durer sera de 1,5 s. Et nous avons également besoin d'une durée infinie car l'animation doit s'exécuter à l'infini Donc, comme prévu, le premier point est déjà animé. Dupliquons ce code huit fois car au total, nous avons neuf points. Ensuite, modifiez les numéros des sélecteurs du nième enfant ainsi que les durées Pour le second, nous avons besoin de 1,3 s. Ensuite, le suivant sera de 1,7 s. Ensuite, nous avons le quatrième élément. La durée sera de 1,1 s. Ensuite, la suivante sera de 0,9, puis de 0,7. La suivante devrait être de 0,5 s. Pour le huitième élément, je vais utiliser 1,3 s. Et pour le dernier point, la durée sera de 1,5 s. Très bien, donc enfin, nous avons ici une belle charge d'animation Voyons ce qu'il en est du premier chargeur. Passons à autre chose et occupons-nous de la suivante. Comme le chargeur précédent. Dans un premier temps, je vais créer le balisage HTML. Au total, nous aurons donc cinq lignes. Dans un premier temps, ouvrons la balise div avec le chargeur de classe pour que ce soit le wrapper Ensuite, créez cinq lignes en utilisant à nouveau les balises div. Le balisage est donc créé. Allons-y et commençons à écrire le CSS. Sélectionnons une ou deux charges d'emballage et définissons sa largeur sur 25 rampes. Ensuite, je vais styliser les lignes comme d'abord. Définissons la largeur et la hauteur. La largeur sera de 1,5 RAM. Quant à la hauteur, elle sera de cinq mètres. Ensuite, changeons la couleur d'arrière-plan. Faites-en 41, 69e1. Et arrondissez légèrement les lignes en utilisant le rayon de bordure avec la valeur 1 de la RAM Il peut donc voir que les lignes sont visibles. À l'heure actuelle, les chargeurs sont placés trop près les uns des autres. Je veux créer un espace entre eux. Allons-y et modifions la valeur de la propriété justify content pour le conteneur. Espacons-le uniformément. Alors maintenant c'est mieux. Ensuite, je vais placer les lignes côte à côte. Pour ça. Utilisons Display Flex. Également. Je vais créer un espace entre eux en utilisant de manière uniforme l'espace de contenu de justification. Et je veux aussi les centrer verticalement. Pour cela, nous devons aligner les éléments au centre. Très bien, donc les lignes sont alignées dans le bon sens. À présent, nous devons créer l'animation. Donc pendant l'animation, je vais augmenter la hauteur des lignes. Et les animations pour chaque ligne auront un temps de retard différent. Tout d'abord, nous devons créer des images-clés CSS. Je vais l'appeler animate load ou deux Donc zéro pour cent, la hauteur sera de cinq RAM, ce qui est la valeur par défaut Ensuite, à 50 %, la hauteur sera de 18 RAM. Et puis à la fin de l'animation, je veux dire qu' à 100 %, la hauteur sera de nouveau de cinq. Très bien, donc les images-clés sont créées. Nous devons maintenant appliquer ces règles aux lignes. Choisissons une alliance avec les sélectionneurs du nième enfant. Sélectionnez le premier. Ensuite, je vais le dupliquer quatre fois et changer les chiffres de 1 à 5. Nous devons donc exécuter l'animation pour la ligne médiane sans délai. Je veux dire, pour la troisième ligne. Nous avons donc besoin d'une animation avec le nom des images-clés animant le chargement ou deux, alors la durée sera 0,5 s. Et encore une fois, nous avons besoin de l'infini. Ensuite, nous avons besoin d'un délai similaire pour les deuxième et quatrième lignes. Copions donc cette ligne de code et attribuons-la aux deuxième et quatrième lignes. Ajoutez également un temps de retard, qui sera de 0,3 s. En ce qui concerne les première et cinquième lignes, nous avons besoin que le temps de retard soit égal à 0,6 s. Très bien, donc c'est considéré comme un chargeur, fonctionne bien avec une belle animation En fait, avec un deuxième chargeur, c'est terminé. Passons à autre chose et créons-en un troisième. Comme d'habitude, je vais commencer par le balisage HTML. Nous devons ouvrir la balise div avec le chargeur de classe 3. Ensuite, je vais passer ici cinq balises div avec le cercle de classe D'accord, c'est donc tout à propos du balisage HTML. Passons à autre chose et commençons à écrire du CSS. Je vais sélectionner votre emballage. Les charges sont au nombre de trois. Réglons sa largeur à quatre pour qu'elle s'exécute. Sélectionnez et personnalisez ensuite les cercles. Tout d'abord, en fonction de la hauteur, je vais les régler tous les deux de manière à ce que la RAM dont nous avons besoin pour arrondir l'élément. Utilisons le rayon de la frontière, 50 %. Et aussi, je vais changer la couleur de fond. Ce sera la couleur de fond temporaire. Faisons en sorte qu'il soit gris clair. Nous avons donc ici ces cercles. Alignons-les à l'aide de Flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons créer un espace entre les cercles en utilisant de manière uniforme l'espace de contenu de justification. Très bien, donc les effets d'animation seront créés à l'aide d'images-clés CSS, et avant les pseudo-éléments Ces éléments d'animation se trouveront donc avant les pseudo-éléments Avant de les créer, je vais ajouter à chaque cercle sa propre couleur Sélectionnons-les donc à l' aide du nième sélecteur d'enfants. La première couleur de fond sera 9o6d. Dupliquons ce code quatre fois et changeons les chiffres et les couleurs. La deuxième couleur de fond sera F9, C7 pour f. Ensuite, nous aurons f8961 dedans. aurons f8961 La quatrième couleur de fond sera f37 22c. Et le dernier sera le F9 pour 346. Très bien, nous devons maintenant créer les pseudo-éléments précédents Nous allons donc sélectionner le cercle, suivi de avant. Tout d'abord, nous devons définir le contenu. Il va être vide. Définissons ensuite la largeur et la hauteur. Je vais les régler tous les deux à 100 %. Et nous devons également définir la position. Faisons en sorte que ce soit absolu. Position relative de l'élément parent, car le cercle doit être aligné en fonction de l'élément parent. Ensuite, arrondissons les éléments en utilisant le rayon de bordure avec une valeur de 50 pour cent et définissons également l' opacité, fixons-la Pour le moment, les éléments ne sont donc pas visibles car ils n'ont pas les couleurs d'arrière-plan. Si nous leur attribuons une couleur d'arrière-plan temporaire, disons gris clair, vous les verrez clairement. Bon, alors maintenant je vais attribuer à chaque pseudo-élément la couleur de fond appropriée. En fait, nous pouvons récupérer le code complet d'ici. Ensuite, nous devons y ajouter juste le sélecteur avant. Maintenant, tout est prêt et nous pouvons créer l'animation. Tout d'abord, définissons les images-clés CSS. Le nom va être Animate Loader Three. Nous devons donc augmenter l'échelle des pseudo-éléments , puis les masquer. Les étapes doivent être les suivantes. À zéro pour cent, nous avons besoin d'une échelle égale à une. Ajoutez ensuite 50 %. L'échelle va être de 2,5. La prochaine étape sera de 75 %. Et encore une fois, nous avons besoin d'une échelle de 2,5. Et après cela, nous devons masquer les éléments. Donc, à 8 %, je vais mettre l' opacité à zéro De plus, à la fin de l'animation, à 100 %, l'opacité sera nulle Très bien, c'est tout à propos de ces images-clés CSS. Nous devons maintenant utiliser la propriété d'animation. Attribuons-le aux pseudo-éléments précédents. Nous avons besoin ici du nom Animate Loader Three. La durée sera de 2 s. De plus, je vais utiliser ici l'une des fonctions de chronométrage de l'animation, puis à nouveau infinie. C'est donc considéré comme une œuvre d'animation. La seule chose que nous devons faire est d' ajouter des délais différents aux éléments. Donc, pour la seconde avant les pseudo-éléments, nous avons besoin que le délai d'animation soit de 0,2 s. Copions cette ligne de code. Pour l'élément suivant, nous avons besoin de 0,4 s, puis de 0,6 s. Et pour le dernier élément, nous avons besoin de 0,8 s. Très bien, donc c' est tout pour le troisième chargeur Et en fait, nous avons terminé. Les trois chargeurs sont créés 10. Projet 7 - Button ondulé: Très bien, alors allons-y et commençons à travailler sur notre prochain projet Dans cette section, nous allons créer un bouton avec des effets de survol sympathiques Une fois que nous survolons le bouton , le cercle jaune s'étendra sur tout le bas Peu importe le côté que vous survolez. Le bouton de. Cet élément jaune apparaîtra de tous les côtés. Très bien, nous sommes donc prêts à commencer à créer le bouton. J'ai créé un nouveau dossier sur le bureau appelé repo button, qui est actuellement vide. Ouvrons-le dans VS Code et créons nos fichiers de travail pour HTML, CSS et JavaScript. Ouvrez ensuite le fichier index.html et créez le document HTML de base. Nous devons placer un point d' exclamation urinaire , puis appuyer sur Tab ou Entrée Nous avons donc ici les balises HTML de base. Dans un premier temps, changeons le titre. Je vais placer votre bouton de rapport , puis lier les fichiers CSS et JavaScript. Je vais ouvrir la balise de lien dans les éléments de tête. Ensuite, nous devons spécifier le chemin du fichier. En ce qui concerne le JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Et nous devons spécifier ici le chemin du fichier JavaScript. Très bien, nous sommes donc prêts à commencer à écrire le code. Avant cela, je vais exécuter le projet sur le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé serveur live. Cela nous permet d'exécuter le projet en direct sur le navigateur et d'apporter les modifications et les mises à jour sans actualiser la page. À chaque fois. Mettons l'éditeur et le navigateur côte à côte, comme ça, et commençons Je vais donc commencer par le balisage HTML. Ouvrons la balise div avec un conteneur de classe. Cet élément contiendra l'intégralité du contenu. Je veux dire le bouton. Le bouton sera créé à l'aide des éléments du lien. Ouvrons-le avec la classe btn, puis passons l'élément year span avec un contenu Explorez. Très bien, c'est donc tout à propos du balisage HTML. Commençons par écrire le CSS. Tout d'abord, je vais définir certains styles courants et les réinitialiser. Sélectionnons chaque élément à l'aide d'un astérisque. Tout d'abord, je vais supprimer la marge et le rembourrage par défaut de tous les éléments Mettons-les tous les deux à zéro. De plus, je vais créer un format de boîte, un border-box. Supprimons ensuite le soulignement par défaut de l'élément de lien en utilisant aucune décoration de texte. Et aussi, je vais changer la famille de polices. Réglons-le sur le monospace Courier New. Très bien, pour que ces styles soient appliqués aux éléments tout au long de ce projet, je vais utiliser la RAM comme unité de mesure Par défaut, 1 g est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Je veux convertir 1 g en dix pixels. Et pour cela, nous devons diminuer la taille de police de l'élément HTML. Mettons-le à 62,5 %. Comme vous pouvez le constater, la taille de police de l'élément de lien est devenue plus petite. Allons-y et commençons à travailler sur le conteneur. Tout d'abord, je vais définir sa largeur et sa hauteur. Mettons-nous à 200 %. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Nous avons donc besoin de cent vh et changeons également la couleur de fond Faites-le gris foncé en utilisant 262626. Très bien, ensuite, je vais placer le bouton au centre Et pour cela, je vais utiliser Flexbox. Nous avons besoin de Display Flex. Ensuite, pour le centrage horizontal, je vais placer le contenu de justification au centre C'est pour le centrage vertical. Nous devons aligner les objets au centre. On considère donc que le bouton est placé au centre et qu'il est maintenant temps de le personnaliser. Nous allons sélectionner BTN. Et tout d'abord, définissons cette position. Je vais le rendre absolu. Je vais ensuite définir la largeur et hauteur du Bateson Faisons en sorte qu'ils aient tous les deux 18 RAM. Ensuite, je vais changer la couleur de fond. Utilisons 90 E 0 E. Et arrondissons également le bouton en utilisant le rayon de bordure, 50 %. OK, donc la prochaine chose que je vais faire en ce qui concerne le bouton est de créer une bordure. Réglons sa largeur de manière à ce qu'elle pointe vers la RAM pour que le style soit pointillé Quant à la couleur, je vais le rendre blanc C'est bon, c'est ça. En ce qui concerne le bouton. Ensuite, je vais parler ici de cet élément de portée. Tout d'abord, je vais le placer au centre pour cela. Utilisons à nouveau Flexbox. Je vais récupérer ces trois lignes et les coller ici. Ce panneau est donc centré. Allons-y et stylisons-le. Sélectionnez btn span. Dans un premier temps, je vais définir sa position sur relative. Changez ensuite la couleur, faites-la blanche. Je vais également augmenter la taille de la police, la faire arrondir de 1,8. Ensuite, je vais rendre le téléphone plus audacieux. Réglons l'épaisseur de la police à 600. Transformez également le texte en majuscules. Enfin, créez un espace entre les lettres. Réglons l'espacement sur le point à courir. Très bien. Cet élément de span est donc personnalisé et je vais devoir créer un effet de survol Jetons un coup d'œil au projet terminé. Ainsi, une fois que nous survolons le bouton, le cercle jaune recouvre le contenu Il semble que du côté exact où nous entrons, la souris créera cet effet à l'aide d' animations JavaScript et CSS. Passons au fichier script.js et commençons à écrire le code. La première chose à faire est d'obtenir les coordonnées du curseur à l'intérieur du bouton. Je veux dire, nous devons mesurer la position supérieure et gauche du curseur à partir des bords supérieur et gauche du bouton. Avant cela, nous devons sélectionner le bouton lui-même. Créons donc une nouvelle variable. Je vais l'appeler btn. Et puis sélectionnez le bouton à l'aide de la méthode de sélection de requête. Nous devons spécifier ici le nom de classe BTN. Ensuite, nous devons y associer un écouteur d'événements à l' aide de la souris pour saisir des événements De plus, nous devons transmettre ici la fonction de rappel, qui sera exécutée une fois que nous aurons survolé le bouton En fait, la souris entre dans le métal et ne se déclenche qu'une seule fois lorsque nous survolons l'élément Comme nous l'avons dit, nous devons la position supérieure gauche du curseur à l'intérieur du bouton Pour obtenir ces positions, nous devons utiliser decline x et client. Pourquoi des propriétés ? Ils nous indiquent les positions supérieure et gauche du curseur, mesurées à partir des bords supérieur et gauche de la fenêtre d'affichage Pour connaître la position du curseur à l'intérieur du bouton, nous devons trouver la différence entre les propriétés x et y du déclin et la position supérieure gauche du curseur Donc, pour le rendre plus compréhensible, allons-y et écrivons le code. Dans un premier temps, je vais passer l'urine à l'objet. Ensuite, je vais vous montrer comment obtenir les informations sur les éléments. Pour cela, nous pouvons utiliser l'une des méthodes appelées get bounding client rect Passons en revue la console et voyons ce que cette méthode nous donne. Je vais passer ici le point e, le point cible, le client de délimitation Droite. Ensuite, je vais inspecter la page et passer à l'onglet console. Donc, si je passe la souris sur le bouton, nous obtiendrons un objet appelé Dumb Si je l'ai fait défiler, vous trouverez ici quelques propriétés différentes. Nous avons les positions dans lesquelles je me trouve, en bas, de gauche à droite et en haut. Nous avons également ici la largeur et la hauteur de l'élément. En outre, vous pouvez voir ici les propriétés x et y. Et en fait, ce sont les mêmes que les propriétés de gauche et de haut. Nous pouvons utiliser ces valeurs pour calculer la position du curseur vers la gauche. À l'intérieur du bouton. Pour cela, je vais créer une nouvelle variable. Disons que c'est à gauche. Nous avons donc besoin ici du client E point X, et nous devons y soustraire Vous ne ciblez pas le point, vous retrouvez les points corrects du client. Voyons dans la console ce que nous donne la variable de gauche. Lorsque nous survolons le bouton, nous obtenons la position gauche du curseur Mais maintenant, à l'intérieur du bouton. Je veux dire qu'il est mesuré à partir du bord gauche de la boîte. D'accord ? De la même manière, nous devons définir les deux positions. Nous pouvons simplement dupliquer ce code, puis changer le nom de la variable dont nous avons besoin en premier. Et nous avons également besoin ici du client y au lieu de x, et nous avons à nouveau besoin de votre top. D'accord ? Les deux positions sont donc définies et nous devons maintenant créer de nouveaux éléments sur ces positions. Nous allons le faire en utilisant l'une des méthodes appelées créer des éléments. Je vais déclarer une nouvelle variable. Appelons cela une ondulation Ensuite, en bas, nous devons créer de nouveaux éléments div Comme je l'ai dit, je vais utiliser la méthode de création d'éléments. Nous devons spécifier ici le nom du tag div. Ensuite, nous devons définir les positions supérieures gauche de l'ondulation Et nous utiliserons les valeurs que nous définissons ici. Nous avons donc besoin ici d'un point d'ondulation, d'un point de style, à gauche. Et elle doit être égale à la valeur de la variable de gauche. De la même manière, je vais définir la première position. Dupliquons cette ligne de code et les modifications manquaient en haut de la page. OK, l'élément est donc créé, mais nous devons l'ajouter au bouton Pour cela, nous devons utiliser l'une des méthodes appelées prépend Nous avons besoin de btn point prepend. Et nous devons passer ici la variable Ripple. Ok, donc pour prouver que l'élément est en train de se créer lorsque vous survolez le pointeur, passons à l'onglet Éléments, puis survolons le Comme vous pouvez le voir, Dede Allen est créé à l'intérieur du bouton. Nous avons donc ici des positions de gauche et de tête. Très bien, nous devons ensuite personnaliser cet élément dans le fichier CSS Créons une nouvelle classe et appelons-la Ripple. Afin de faire fonctionner une position gauche et deux positions lorsque la position du bain à remous est définie Faisons en sorte que ce soit absolu. Ensuite, définissez la largeur et la hauteur. Je vais les régler tous les deux à 100 %. Et changez également la couleur d'arrière-plan. Faites en sorte que E7 soit E 08. Très bien, voyons quels sont les styles du Ripple dès maintenant Pour les appliquer aux éléments, nous devons ajouter cette classe à la liste des classes d'éléments. Nous avons donc besoin de ressaisir liste des classes de points suivie de la méthode d'ajout Et nous devons spécifier ici le dépôt. D'accord ? Donc, si je passe la souris sur le bouton, le nouvel élément apparaîtra Si je survole le bouton plusieurs fois, les multiples éléments seront créés Mais nous allons bientôt régler ce problème. Tout d'abord, arrondissons ce point. Utilisons le rayon de bordure à 50 %. Et nous devons également le déplacer vers la main gauche de -50  % vers le haut Utilisons la transformation. Traduisez avec -50 %. Deux fois. Bon, nous avons maintenant de meilleurs résultats et il est temps de créer une animation. Par défaut, la largeur et la hauteur de cet élément seront donc nulles. Une fois que nous survolons le bouton , la taille de la république devrait augmenter avec l'animation Créons donc des images-clés CSS. Je vais l'appeler un anime Ripple. Dans l'ensemble, nous aurons deux étapes différentes. À zéro pour cent, notre hauteur doit être nulle. Pour les 100 %, nous devrions augmenter la largeur et la hauteur à 100 %. Très bien, les images-clés savent déjà comment appliquer ces styles aux éléments à l' aide d'une propriété d'animation Faisons une pause ici, Ripple anime également. La durée va être de 0,5 s. Donc maintenant, si je passe la souris sur le bouton, les éléments apparaîtront en douceur Mais comme vous le voyez, nous avons ici quelques problèmes. Une fois que l'élément apparaît et que sa taille est augmentée, alors en hauteur. Nous devons donc maintenir les styles que nous avons à 100 %. Pour cela, nous devons utiliser une valeur appelée forward. Alors maintenant, ce problème est que l'élément fixe n'est plus la hauteur. Le problème suivant est que la taille de l'élément n'est pas suffisante pour couvrir le fond, nous devons donc l'augmenter. Portons-le à 200 %. Maintenant, la taille est deux fois plus grande, mais ce n'est toujours pas suffisant car si je saisis la souris et que je l'arrête au bord du bouton, l' ondulation ne se couvrira pas Augmentons donc légèrement la hauteur. Je vais les faire à 210 %. Très bien, maintenant le problème est résolu. La prochaine chose que je vais vous enlever est de cacher les parties extérieures du dépôt. Pour cela, nous devons utiliser overflow hidden. Très bien, nous avons maintenant un bien meilleur résultat. La prochaine chose que je veux faire est de me débarrasser du dépôt. Une fois que la souris quitte le bouton, nous devons utiliser l'un des événements appelés sortie de la souris. Attachons-nous au bouton Event Listener. Avec un événement en direct avec la souris. De plus, nous avons besoin ici d'une fonction de rappel. Ensuite, nous devons supprimer le dépôt. Pour cela, je vais utiliser la méthode de suppression des enfants. Nous devons le préciser ici. Bon, enfin, nous avons terminé. Le bouton fonctionne parfaitement. Il a de jolis effets et animations. Je pense que c'était intéressant et différent, et j'espère qu'il vous a plu. Il est maintenant temps de passer à autre chose et de commencer à travailler sur le projet suivant. 11. Projet 8 - Barre de progression arrondie: Dans cette vidéo, nous allons créer une barre de progression forme de cercle avec une valeur en pourcentage. La barre de progression fonctionne donc sur un événement de défilement. Par défaut, nous avons ici zéro pour cent. Et une fois que nous commençons à faire défiler la page vers le bas, cette ligne blanche autour du cercle sera remplie de rouge en douceur. Et la valeur de la personne augmentera également en conséquence. Ensuite, si nous faisons défiler la page vers le haut, la valeur en pourcentage diminuera et nous retrouverons la bordure blanche. Ce projet fait partie de notre prochain cours Udemy, dans lequel nous allons créer un site Web complet avancé avec du HTML, CSS et du JavaScript à partir de zéro Il sortira bientôt, alors restez à l'affût. Très bien, c'est ça, ce que nous allons créer dans cette vidéo Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau appelé barre de progression circulaire, qui est actuellement vide. Allons-y et ouvrons-le dans le code VS. Je vais créer nos fichiers de travail. Le premier sera index.html. Ensuite, nous aurons style.css et script.js. Ouvrez ensuite le fichier index.html et créez un document HTML de base. Nous devons utiliser Ahmed, plaçons ici un point d' exclamation, puis appuyons sur Tab ou Entrée D'accord. Tout d'abord, je vais changer le titre. Faisons en sorte qu'il entoure la barre de progression. Ensuite, liez les fichiers CSS et JavaScript. Je vais ouvrir la balise de lien dans l'élément principal. Précisons ici le chemin du fichier. En ce qui concerne le fichier JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, dans l'attribut source, nous devons spécifier le chemin du fichier. Hein ? Après cela, je vais exécuter le projet sur le navigateur à l'aide d'un serveur live. Placez ensuite l'éditeur et le navigateur côte à côte. Très bien, nous allons d'abord créer une barre de progression en utilisant HTML et CSS Je veux dire, nous allons le styliser comme ça. Ensuite, nous allons le faire fonctionner en utilisant JavaScript. Commençons par le balisage HTML. Je vais ouvrir une balise div, qui sera un conteneur Ensuite, nous avons besoin d'une autre balise div qui encapsulera l'intégralité du contenu attribué à la barre de progression de la classe À l'intérieur de la balise div, vous aurez besoin de quatre éléments différents. instant, créons-les, puis nous expliquerons et montrerons pourquoi nous avons besoin de ces éléments. Ouvrons donc une balise div avec un demi-cercle de classe. Ensuite, dupliquez-le trois fois. En fait, nous n'avons pas besoin de toucher au deuxième développement. Le troisième sera un sommet en demi-cercle. C'est probablement le dernier développement. Ce sera un cercle représentant une barre de progression. En tant que contenu. Insérons ici zéro pour cent par défaut. Très bien, c'est donc tout à propos du balisage HTML. Allons-y et commençons à écrire du CSS. Je vais créer des styles communs. Sélectionnons tous les éléments pour cela. Nous devons utiliser un astérisque. Donc, tout d'abord, je vais me débarrasser de la marge et du rembourrage par défaut de chaque élément Mettons-les tous les deux à zéro. Je vais donc créer la taille des boîtes, les border box, puis modifier la Utilisons ici le sans-serif aérien Helvetica. Les styles courants sont donc appliqués aux éléments. Ensuite, je vais modifier la taille de police du code HTML. Parce que tout au long de ce projet, je vais utiliser la mémoire vive comme unité de mesure. heure actuelle, 1 g est égal à 16 pixels car la taille de police de l'élément HTML est égale à 16 pixels. Je veux convertir 1 g en dix pixels. Et pour cela, nous devons réduire la taille de police du code HTML. Portons-le à 62,5 %. Je peux donc voir que le texte est devenu plus petit. OK, ensuite, prenons soin du conteneur. Sélectionnons-le. Tout d'abord, définissez sa largeur et sa hauteur. Je vais régler sa largeur à 100 %. En ce qui concerne la hauteur, je vais la placer à 200 % des fenêtres d' affichage car nous devons faire défiler la page vers le bas Je peux également changer la couleur de fond, rendre grise en utilisant 555. C'est bon. Ensuite, je vais m' occuper de la barre de progression elle-même. Je veux dire l'emballage, définissez sa largeur et sa hauteur Je vais les faire courir 40 points à tous les deux. Modifiez également la couleur d'arrière-plan. Rendez-le blanc , puis arrondissez la barre de progression à l'aide du rayon de bordure avec la valeur 50 %. La barre de progression doit donc être placée au centre et elle doit être corrigée car une fois que nous faisons défiler la page, elle ne doit pas bouger. Réglons donc sa position de manière à ce que nous ayons besoin des propriétés supérieure et gauche, toutes deux égales à 50 %. Ensuite, afin de censurer parfaitement l'élément, nous avons dû utiliser Transform avec la fonction de traduction Nous avons deux voies ici, 50 % deux fois. Très bien, c'est tout à propos de l'emballage. Passons à autre chose et prenons soin du cercle de la barre de progression. Sélectionnons-le. Et tout d'abord, définissons sa largeur et sa hauteur. Je vais régler les deux 239,4 RAM. Changez ensuite la couleur de fond, elle sera noire. Créez également les éléments qui l'entourent en utilisant le rayon de bordure, 50 %. Changez ensuite la couleur, mettez-la en blanc et augmentez la taille de la police. Faites-en un forum. D'accord, donc cet élément est installé, mais nous devons faire attention à sa position. Il doit être placé au centre de l'emballage. Et nous devons également envoyer à la personne chaque valeur à l'intérieur du cercle. Dans les deux cas, je vais utiliser flexbox et pour éviter d'écrire le même code encore et encore, je vais créer une nouvelle classe Appelons-le centre et attribuons-lui quelques propriétés et valeurs différentes de flexbox Le premier sera la flexibilité d'affichage dont nous avons besoin. Justifiez le centre du contenu pour centrage horizontal et alignez les éléments au centre pour le centrage vertical Ensuite, nous devons attribuer à cette classe la barre de progression et le cercle de la barre de progression. OK, alors maintenant on peut voir que le problème est résolu. La barre de progression est donc préparée. Il a l'apparence par défaut. Et maintenant, nous devons faire votre travail. Comme vous vous en souvenez, nous avons créé plusieurs développements différents. Les deux premiers développements qui comportent un demi-cercle de classe, parviendront à remplir la barre de progression avec la couleur rouge. La première chose que je vais faire est donc masquer le cercle noir pendant un certain temps afin de mieux expliquer et montrer les choses qui sont assignées à l'option « Aucun ». Le cercle noir est donc masqué, et nous devons maintenant nous occuper des trois éléments du div, ce qui nous aidera à faire fonctionner la barre de progression Sélectionnons les trois éléments simultanément. Je veux dire, nous avons besoin d'un demi-cercle et d'un demi-cercle en haut. Tout d'abord, prenons soin de leurs positions. Nous avons besoin que notre position soit absolue. Définissons également les propriétés supérieure et gauche, toutes deux à zéro. Et après cela, en tant que largeur et hauteur définies, je vais définir la largeur à 40 %. Quant à la hauteur, faisons-la à 100 %. Ils ne sont donc pas réalisables pour le moment. Et pour résoudre ce problème, je vais attribuer à chacune d'elles une couleur d' arrière-plan temporaire différente. Sélectionnons le premier demi-cercle à l'aide du nième sélecteur enfant et définissons sa couleur d' arrière-plan sur Ensuite, je vais dupliquer ce code, changer le numéro dont nous avons besoin ici en S4, la couleur de fond, elle sera bleue Enfin, sélectionnons le demi-cercle en haut et définissons sa couleur d'arrière-plan sur, disons, orange. Très bien, donc les trois développements sont placés les uns sur les autres Dans un premier temps, je vais faire fonctionner la barre de progression sur le curseur afin de la rendre plus facile à comprendre Ensuite, nous allons changer le pointeur et utiliser l' événement de défilement à l'aide de JavaScript Nous devons donc faire pivoter le premier demi-cercle de 180 degrés. En ce qui concerne le second demi-cercle, nous devons le faire pivoter de 360 degrés car nous devons remplir tout le cercle. En ce qui concerne le haut en demi-cercle, je veux dire ces éléments oranges, nous devons le masquer. Allons-y et sélectionnons la barre de progression avec le pointeur de la souris, suivie du premier demi-cercle Utilisons à nouveau le nième sélecteur enfant que nous devons transformer avec la fonction de rotation Et comme nous l'avons dit, la valeur sera de 180 degrés. Dupliquons ce code. Changez le numéro du nième enfant, créez-le aussi. Quant à la valeur de la fonction de rotation, elle sera de 360 degrés. En outre, nous devons utiliser la transition pour rendre la rotation plus fluide. Utilisons donc la transition avec la transformation des valeurs. La durée du premier demi-cercle sera de 1 s. Et nous devons également utiliser ici la méthode linéaire. Ensuite, prenons ce code, collez-le vers le bas pour le second demi-cercle. La seule chose que nous devons changer, c'est la durée. Passons à 2 s. Donc maintenant, si nous survolons le curseur, les éléments vont pivoter, pour le moment nous ne voyons ici que moment nous ne voyons ici l'élément bleu parce que l'élément vert n'est pas marié Si je mets en pause le fond bleu ici, vous verrez les éléments verts. Les éléments tournent donc, mais dans le mauvais sens. Je veux dire que l'origine de la transformation est configurée pour censurer par défaut Mais dans notre cas, nous devons le placer au bon centre. Utilisons donc l'origine de la transformation et plaçons-la au centre droit. Donc, dans ce cas, l'origine de la transformation va être le centre de l'élément. Mais sur le côté droit, une fois que nous survolons la barre de progression, nous devons masquer ces éléments oranges Nous allons donc sélectionner la barre de progression avec le pointeur de la souris, puis le cercle en haut, et réglons son opacité à zéro Maintenant, l'élément s'élève une fois que nous survolons la barre de progression. Mais en fait, il se cache trop tôt. Nous devons le cacher. Veut que l'élément vert finisse de tourner. Nous devons donc le masquer après 1 s. Utilisons la transition. Avec opacité. La durée va être de 0 s. Quant au délai, ça va être de 1 s. Très bien, donc maintenant tout fonctionne bien Maintenant, nous devons changer les couleurs et créer les éléments qui l'entourent. Les deux premiers développements doivent avoir une couleur rouge. Je veux dire, la couleur B6 avec quatre zéros. Quant au troisième élément, il sera blanc car la barre de progression elle-même a un fond blanc. Nous devons maintenant masquer ces parties extérieures des éléments. Pour cela, utilisons overflow hidden. Maintenant c'est dissimulé. Nous avons obtenu un bien meilleur résultat. Enfin, nous devons rendre le cercle noir visible. Supprimons donc n'afficher aucun. heure actuelle Cette partie du cercle est visible car elle s'est retrouvée derrière les éléments de la division Pour résoudre ce problème , utilisons la propriété index. Nous devons lui attribuer une valeur supérieure à zéro, disons dix. OK, maintenant, si je passe la souris sur la barre de progression, elle sera bien remplie de rouge Très bien, nous vous avons maintenant montré comment créer une barre de progression à l'aide de CSS Nous allons maintenant vous montrer comment créer votre travail sur scroll à l'aide de JavaScript. Jetons un coup d'œil au projet terminé. Donc, si je fais défiler la page vers le bas, la barre de progression sera remplie. De plus, la personne que vous appréciez changera en conséquence, et changera en conséquence, elle diminuera une fois que nous reviendrons vers le haut. Commençons par commenter ces styles. Je veux dire, ces serviettes flottent. Accédez ensuite au fichier JavaScript. Tout d'abord, je vais sélectionner les éléments du div. Je veux dire, pour les éléments div, qui sont placés dans la barre de progression. Allons-y et commençons par les demi-cercles. Créez une nouvelle variable et appelez-la demi-cercle. Dans ce cas, nous sélectionnons deux éléments, nous devons donc utiliser la méthode all du sélecteur de requête Précisons ici le nom de la classe, demi-cercle. L'élément suivant sera le demi-cercle en haut. Dupliquons donc cette ligne de code. Modifiez le nom de la variable. Nous avons besoin d'un demi-cercle en haut. Nous devons également interroger le sélecteur. Au lieu d'un sélecteur de requête, toutes les méthodes pour le nom de la classe seront à moitié appelées top Dupliquons cette ligne de code. Une fois de plus, modifiez le nom de la variable. Ce sera le cercle de la barre de progression. Et modifiez également le nom de la classe. Nous avons besoin d'un cercle de barre de progression. Très bien, donc tous les développements sont sélectionnés. Je vais ensuite associer un événement de défilement au document. Utilisons la méthode d'ajout d'un écouteur d'événements. Nous devons spécifier ici que l' événement sera Scroll. Et nous avons également besoin ici d'une fonction de rappel qui sera exécutée une fois que nous aurons fait défiler la page Ainsi, comme vous le savez, la rotation complète est égale à 360 degrés. Nous devons convertir la partie défilée de la hauteur en degrés Avant cela, nous devons définir quelques variables différentes. La première sera la fenêtre d'affichage, la hauteur de la page Créons une nouvelle variable et appelons-la page viewport, height Ce sera une fenêtre à votre hauteur La variable suivante sera la hauteur totale de la page. Créons donc la hauteur de page. Il doit être égal à « documents point points » aux éléments du document. Ensuite, nous avons besoin de la hauteur de défilement. Encore une fois, nous avons défini ici la hauteur totale de la page. Et la dernière variable sera cette partie explorée de la page Créons donc une nouvelle variable. Je vais appeler ça une partie griffonnée. Et il doit être égal au décalage de la page Y du point de la fenêtre. Très bien, maintenant tout est prêt pour convertir la hauteur de cette portion de croissance en degrés. Créons une nouvelle variable. Je vais l'appeler le degré de la partie de défilement. Et maintenant, nous devons utiliser la formule suivante. Nous devons diviser la partie défilée en fonction de la différence entre la hauteur de la page et la hauteur de la fenêtre d'affichage de la page Et nous devons multiplier le résultat par 360. Nous avons donc besoin de la partie défilée divisée par la différence entre la hauteur de la page et la hauteur de la fenêtre d' affichage de la page Nous devons le multiplier par 360 degrés. Allons-y et voyons dans la console ce que cette variable nous donne. Passons en revue la console, ce que l'on appelle le degré de portion. Examinons donc la page et passons à l'onglet console. Une fois que nous avons fait défiler la page vers le bas et que nous sommes allés à la fin de celle-ci, nous obtiendrons les valeurs correctes de 0 à 360 degrés. Très bien, maintenant en utilisant cette variable, nous allons faire pivoter les demi-cercles Nous devons donc les parcourir en boucle et faire pivoter chaque demi-cercle. Je suis dans le premier et le deuxième développement dans la barre de progression. Donc, pour les parcourir en boucle, nous devons utiliser l'une des méthodes auxiliaires du tableau appelées for-each Elle prend un paramètre, qui sera la fonction de rappel Il sera exécuté pour chaque élément. La fonction de rappel elle-même prend un paramètre et c'est l'élément actuel de la liste Appelons-les éléments E L. Nous devons maintenant transformer chaque élément. Nous avons besoin d'une transformation de style. Ouvrez ensuite les tiques arrières. Nous avons besoin ici d'une fonction de rotation. Et comme valeur, nous devons vous transmettre le degré de la portion de défilement. Alors maintenant, si nous faisons défiler la page vers le bas, cette barre de défilement commencera à apparaître. Une fois que nous en avons atteint la moitié, nous devons arrêter le premier demi-cercle. Et nous devons également masquer le troisième élément div. Je suis dans la moitié de ce qu'on appelle le top. Nous devons donc utiliser l'instruction if où nous devons définir si le degré de la portion Scott est supérieur ou égal à 180. Nous allons donc insérer la condition que vous avez mentionnée. Si cette condition est vraie, nous devons attribuer au premier demi-cercle la valeur fixe égale à 180 degrés. Pour sélectionner le premier demi-cercle, nous devons utiliser le numéro d' indice zéro. Ensuite, nous avons besoin d'une transformation de style. Il doit être égal à une rotation de 180 degrés. Nous devons donc masquer le haut du demi-cercle. Utilisons le style, développons l'opacité et rendons-la égale à zéro Alors maintenant, une fois que nous faisons défiler la page vers le bas, toute la barre de progression sera remplie. Qu'est-ce que nous avons ici ? Un petit problème, une fois que nous faisons défiler la page vers le haut et que l'on appelle le degré de portion , devient inférieur à 180 degrés. Nous devons afficher le demi-cercle en haut. Nous devons donc créer une autre déclaration. Ensuite, prenons cette ligne de code, collez-la ici, et changeons cette valeur, créons-en une seule. Maintenant, il peut voir que tout fonctionne parfaitement. La seule chose à faire est de faire en sorte que la valeur en pourcentage fonctionne. Dans ce cas, nous devons convertir les degrés en pourcentage. Créons une nouvelle variable. Je vais l'appeler pourcentage de portion de défilement. Dans ce cas, nous devons diviser le degré de la partie défilée par 360 degrés, puis nous devons le multiplier par 100 D'accord ? Nous devons maintenant afficher cette valeur sous forme de cercle dans la barre de progression. Utilisons donc la barre de progression comme un cercle avec du contenu textuel. Ouvrez ensuite les backticks. Insérez ici, la partie défilée est présente, suivie du signe de pourcentage Donc, pour l'instant, la valeur en pourcentage fonctionne, mais nous avons ici les décimales Pour s'en débarrasser, nous devons utiliser l'une des méthodes appelées Math.floor. Alors maintenant, comme vous pouvez le constater, tout fonctionne parfaitement. Et en fait, avec le projet, nous avons terminé 12. Projet 9 - Diaporama d'icônes de réseaux sociaux: Dans cette vidéo, nous allons créer un diaporama des icônes des réseaux sociaux Ce sera un petit projet, mais je pense qu'il sera intéressant avant de commencer à créer le projet, je vais le décrire. Nous avons donc ici une image d'arrière-plan en plein écran et quelques très belles icônes de réseaux sociaux Ils se déplacent avec certaines intégrales. Et l'icône au centre s'éclaircit. Les autres icônes sont plus sombres par défaut. Comme nous l'avons dit, nous allons créer ce projet avec HTML, CSS et JavaScript. Je suppose donc que vous connaissez tous déjà les bases de ces trois technologies. J'ai créé un nouveau dossier sur le bureau appelé diaporama, dans lequel j'ai un autre dossier pour les Allons-y et ouvrons ce dossier et le code VS. Je vais créer nos fichiers de travail. Le premier sera index.html. Ensuite, nous aurons style.css et script.js. Ouvrons le fichier index.html et créons un document HTML de base. Pour cela, je vais utiliser Emmet. Nous devons placer ici un point d'exclamation , puis appuyer sur Tab ou Entrée Très bien, après cela, changeons le titre. Cela semble être quelques icônes des réseaux sociaux. Ensuite, je vais lier les fichiers CSS et JavaScript. Ouvrons la balise de lien dans l'élément d'en-tête et indiquons le chemin du fichier CSS. En ce qui concerne le JavaScript, je vais ouvrir la balise script en bas, juste au-dessus de la balise body de fermeture. Spécifiez ici le chemin du fichier JavaScript. Ensuite, exécutons le projet dans le navigateur. Pour cela, je vais utiliser un serveur live, qui nous permet d'exécuter le projet en direct dans le navigateur à l'aide d'un serveur local. Enfin, plaçons l' éditeur de texte et le navigateur côte à côte Comme ça, et lancez-vous. Nous sommes donc prêts à créer un balisage HTML. Ouvrons la balise div, qui sera l' enveloppe du contenu Attribuons au diaporama de la classe. Au total, nous aurons cinq icônes de réseaux sociaux différentes. Ils seront représentés par les images et seront également encapsulés par les éléments de lien. Il s'agit donc d'une balise de lien ouverte avec un lien vers un diaporama de classe qui crée ici et Je vais sélectionner une image appelée diaporama IMG one. Dupliquons l'élément de lien quatre fois, puis changeons rapidement les numéros des noms des images. D'accord, c'est donc tout à propos du balisage HTML. Tout est prêt et nous pouvons maintenant écrire du CSS. Tout d'abord, je vais personnaliser et organiser les icônes. Ensuite, nous ferons fonctionner le diaporama en utilisant JavaScript Dans un premier temps, créons des styles communs et réinitialisons les styles. Sélectionnons tous les éléments à l'aide d'un astérisque. Tout d'abord, je vais supprimer la marge et le rembourrage par défaut de chaque élément Mettons-les donc tous les deux à zéro. Nous avons également besoin de la taille de la boîte, de la borderbox. Et je vais supprimer les styles par défaut des liens. Utilisons la décoration de texte, aucune. Donc, tout au long de ce projet, je vais utiliser une rampe comme unité de mesure. Par défaut, 1 g est égal à 16 pixels, car la taille de police de l'élément HTML est égale à 16 pixels. Je vais convertir un run en dix pixels. Et pour cela je vais réduire la taille de police des éléments HTML. Portons-le à 62,5 %. OK, donc c'est tout pour les styles courants. Sélectionnons un wrapper div elements. Tout d'abord, je vais définir, on peut se cacher, faisons-le à 100 %. Quant à la hauteur, je vais la régler à 100 % de la fenêtre d'affichage Ensuite, je vais définir l'image comme arrière-plan en plein écran Mais avant cela, utilisons une fonction appelée gradient radial. fonction de dégradé radial définit la transition de couleur à partir du centre. Je vais donc spécifier ici deux couleurs différentes. La première sera 483 fois et l' opacité de 0,9 à 5 C'est pour la deuxième couleur. Je vais insérer ici couleur noire avec une opacité de 0,9 à 5 Ensuite, définissons l'URL. Je vais sélectionner une image appelée bg dot PNG. Nous avons également besoin ici de nous concentrer sur la position et de ne pas répéter. Enfin, définissons la taille de l'arrière-plan. Faisons la couverture Comme vous pouvez le voir, nous avons ici une image de fond en plein écran Ensuite, je vais placer l' icône côte à côte pour cela. Utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, alignons les icônes et centrons verticalement. Utilisez les éléments d'alignement. Centre. Créons également de l' espace sur les côtés gauche et droit à l' aide d'un rembourrage Je vais le mettre à zéro puis m'exécuter. Très bien, voyons ce qu'il en est de l'emballage. Occupons-nous des icônes. Je vais réduire leur taille. Sélectionnons d' abord le lien du diaporama et réduisons sa largeur Ensuite, nous devons définir la largeur de l'image elle-même. Nous allons donc sélectionner les éléments IMG et définir la largeur à 100 %. Dans ce cas, l'image occupera 100  % de la largeur de l'élément parent. Hein ? C'est tout à propos du CSS. Pour l'instant. Nous devons faire fonctionner le diaporama en utilisant JavaScript. Il va donc ouvrir ce fichier script.js. Tout d'abord, je vais sélectionner les éléments div de votre wrapper Je veux dire le diaporama, créons une nouvelle variable et appelons-la une nouvelle variable et appelons-la Sélectionnez ensuite l'élément à l' aide de la méthode de sélection de requêtes. Nous devons spécifier ici le nom de la classe. Diaporama. Très bien, laissez-moi vous dire comment nous allons faire fonctionner ce diaporama Nous allons supprimer la première icône de la liste et la rajouter à la liste en tant que dernière. Nous le ferons avec quelques intervalles et aussi avec des transitions fluides. Tout dépend du processus du diaporama. Comme nous l'avons dit, nous avons besoin de certains intervalles. Et pour cela, je vais utiliser l'une des méthodes intégrées appelées Set Interval. Il faut deux arguments. La première est une fonction de rappel, qui est exécutée après chaque intervalle En ce qui concerne le deuxième argument, ce sera la quantité de l'intervalle lui-même. Nous allons changer les images au bout de 3 s. Je vais donc passer ici 3 000 ou 3 000 millisecondes, ce qui équivaut à 3 s. OK, donc comme nous l'avons dit, nous devons supprimer la première icône puis l' ajouter à la liste en tant que dernière Alors tout d'abord, sélectionnons la première icône. Je vais créer une nouvelle variable. Appelons-la première icône. Je vais sélectionner la première icône en utilisant l'une des propriétés appelées premier élément enfant. Je veux dire, ce sera l' enfant de ce diaporama. Maintenant, la première icône est sélectionnée, et pour la supprimer des éléments du wrapper div, je vais utiliser l'une des méthodes du dôme appelée remove child Nous avons donc besoin d'un diaporama. Ensuite, retirez l'enfant. Et comme argument, nous devons transmettre votre première icône. Comme vous pouvez le voir toutes les 3 s, l'icône. Donc, en les supprimant, comme nous l' avons dit, nous devons les ajouter à nouveau à la liste. Et pour cela, je vais utiliser une autre méthode en forme de dôme appelée append child Par défaut, il ajoute un élément en tant que dernier enfant. Nous avons donc besoin d'un diaporama suivi de la méthode append child. Et comme argument, nous devons revenir ici pendant une seconde. OK, comme vous pouvez le voir, le diaporama montre toutes les œuvres. Mais nous devons y ajouter quelques effets différents. La première chose que je vais faire est de supprimer la première icône en douceur avec un effet de fondu. Pour ce faire, je vais créer une nouvelle classe en CSS. Disons que c'est passé. Cette classe inclura donc deux styles. Pour effacer les éléments, nous devons réduire l' opacité et la largeur, toutes deux nulles. Réglons donc l'opacité et la largeur à zéro. Et en plus de cela, nous devons utiliser transition pour la première icône. Pour sélectionner la première icône, je vais utiliser le sélecteur f child Nous devons en spécifier un ici. Ensuite, insérons votre transition avec une durée de 0,5 s d' opacité avec la même durée C'est tout à propos du CSS. Revenons au fichier JavaScript. Maintenant, nous devons ajouter une classe estompée à la première icône. Nous avons donc besoin ici de la première icône, suivie de la propriété appelée class list, qui nous donne toutes les classes de l'élément. Ensuite, nous devons utiliser la méthode appelée add. Et nous devons spécifier ici le nom de la classe estompé. L'icône est maintenant supprimée mais sans aucun effet de fondu car l' effet de transition prend du temps. En fait, la moitié de la seconde Nous devons attendre la moitié de cette seconde avant de supprimer l' élément de la liste. Pour ce faire, je vais utiliser l'une des méthodes appelées setTimeout Cela nous permet d'exécuter la fonction une fois avec un certain délai. Cette méthode prend donc deux arguments. La première est une fonction de rappel. Interférons entre ces deux lignes. Pour ce qui est du second argument, ce sera un délai. Dans ce cas, nous avons besoin de la moitié des 500 millisecondes Alors maintenant, l'icône est supprimée avec un bel effet de fondu. Nous devons maintenant l'ajouter à nouveau à la liste avec un effet de fondu. Pour ce faire, nous devons supprimer le fondu de classe des éléments. Nous avons besoin de la première icône, suivie de la propriété de la liste des classes. Ensuite, nous devons utiliser la méthode appelée supprimer. Précisons ici le nom de la classe fade out. L'icône est maintenant ajoutée à la liste, mais sans aucun effet de fondu. Parce qu'encore une fois, nous devons attendre la moitié de la seconde. Nous devons donc utiliser à nouveau la fonction de temporisation qui insère cette ligne de code à l'intérieur de la fonction et spécifie également le délai, 500 millisecondes Nous n'avons donc toujours pas l'effet de fondu car nous devons définir la transition pour la dernière icône. Passons au fichier CSS. En fait, nous avons besoin de la même transition que celle que nous avons utilisée pour la première icône. Je vais donc ajouter ici juste le sélecteur pour la cinquième icône Donc pour l'instant, tout fonctionne bien et nous pouvons passer à autre chose et nous occuper du second effet. Je veux dire, nous devons assombrir les icônes par défaut. Ensuite, nous devons les alléger une fois qu'ils occupent la troisième place, au moins, comme c'est le cas dans le projet fini. Tout d'abord, assombrissons toutes les icônes. Pour cela, je vais utiliser l'une des propriétés CSS appelée filtre avec une fonction appelée luminosité. Insérez votre 0.1. Cette valeur signifie donc que l'élément ne conserve que dix pour cent de sa luminosité par défaut. Après cela, je vais créer une nouvelle classe et du CSS, qui incluront la luminosité la plus élevée. Et nous allons ajouter cette classe à l'élément en utilisant JavaScript. Appelons cette classe de lumière plutôt que d'utiliser à nouveau le filtre, où la fonction luminosité la valeur qui vous intéresse, 1,5. Bon, revenons au fichier JavaScript. Nous devons maintenant sélectionner la troisième icône et y ajouter une lumière de classe nouvellement créée. Créons une variable et appelons-la troisième icône. Pour accéder à la troisième icône, je vais utiliser la propriété appelée enfants. Ensuite, entre crochets, nous devons spécifier le nombre d'éléments. Dans ce cas, il nous en faut trois. Nous avons donc sélectionné l'élément et nous devons y ajouter la classe light. Nous avons donc besoin ici d'une icône de pied, d'un point, liste de classes, d'un point à ajouter. Et nous devons spécifier ici le nom de la classe light. Comme vous pouvez le constater, l' icône devient plus claire, mais elle conserve sa luminosité. Nous n'en avons donc pas besoin. Nous devons retirer la lumière de la classe. Nous devons le supprimer du frère précédent de la troisième icône Parce qu'une fois qu'elle se déplace, ce n'est plus la troisième icône de la liste, mais la seconde dont nous avons besoin ici en passant par le point de l'icône, éléments précédents frères, puis la propriété de la liste des classes Ensuite, nous avons besoin d'une méthode appelée remove. Et encore une fois, classe comme OK, alors maintenant tout fonctionne bien. Il suffit d'ajouter une transition à cet effet. Passons au fichier CSS. Sélectionnez la troisième icône. Utilisez à nouveau le nième sélecteur d'enfant plutôt que d'Instituer la transition avec le filtre 0,5 s. D'accord, nous avons donc maintenant de bien meilleurs résultats Je peux, il fait de plus en plus sombre. Mais comme vous pouvez le constater, nous aurons également besoin d' une transition une fois que l'icône deviendra plus claire. Ajoutons donc une transition au filtre de lumière de classe comme durée. Précisons ici 1,5 s. D'accord, alors maintenant tout allait bien. Et avant de terminer ce tutoriel, je vais faire une dernière chose. Si je recharge la page, les cinq icônes seront plus sombres. Nous n'en avons pas besoin. Nous devons rendre votre troisième icône plus claire par défaut. Et pour ce faire, je vais ajouter des lumières de classe à la troisième icône et au fichier HTML. bon, c'est ça. Enfin, nous avons terminé. Nous avons fini de travailler sur les projets. Encore une fois, c'était petit, mais j'espère qu'il était intéressant. Et ça t'a plu. À la prochaine. 13. Projet 10 - Formulaires avec validation: Très bien, il est donc temps de commencer à travailler sur notre prochain projet Dans cette vidéo, nous allons créer un formulaire de connexion et d'inscription De nos jours, nous avons créé des formulaires de connexion et d' inscription sur presque tous les sites Web. Ce type de projet va donc être intéressant et utile pour vous, car lorsque vous travaillez sur vos projets, vous devez savoir comment gérer ces problèmes. Avant de commencer à écrire le code, allons-y et décrivons le projet. Nous avons donc ici deux boutons différents, connecter et s'inscrire dans le coin supérieur gauche de la page. Ensuite, nous avons ici le titre. Par défaut, il affiche « Se connecter » mais le programme à l'aide de JavaScript. Ensuite, en bas, nous avions quelques champs de saisie et un bouton de soumission. Par défaut, des champs de saisie sont affichés pour la connexion. Mais si je clique sur le bouton S'inscrire, nous obtiendrons ici les champs de saisie pour l'enregistrement. En outre, le projet inclut une validation de formulaire. Par exemple, si je vis les champs de saisie vides et que je clique sur le bouton d'envoi, nous recevrons des messages d'erreur indiquant qu'un e-mail et un mot de passe sont obligatoires. Si je ressens, par exemple, l'une des entrées, disons le mot de passe et cliquez sur le bouton d'envoi. Ensuite, le champ de saisie aura une bordure verte, ce qui signifie que nous avons saisi les données valides et le champ d'entrée D'accord, le projet va donc répondre à différentes tailles d'écran. Si j'inspecte la page et que je passe en mode réactif, vous constaterez que le projet est réactif. Nous avons conçu ce projet pour un écran de très grande taille. Je suis dans la taille de l'écran avec 1920 pixels de largeur et 1080 pixels de hauteur. Donc, si vous utilisez une taille d'écran relativement plus petite que celle du projet, cela ne sera peut-être pas très beau pendant le didacticiel, mais ne vous inquiétez pas au bout du compte, nous le rendrons réactif. En attendant, vous pouvez passer en mode réactif, régler la largeur et la hauteur de l'écran extra large. Et suis-moi. Comme nous l'avons dit, le projet sera construit sur la base du HTML, du CSS et du JavaScript. J'espère donc que vous connaissez déjà les bases de ces trois technologies. Je pense que nous sommes prêts à commencer. J'ai créé un nouveau dossier sur le bureau appelé formulaire de connexion, qui est actuellement vide Allons-y, ouvrons-le dans le code VS et créons les fichiers de travail pour HTML, CSS et JavaScript. Nous avons besoin de index.html, puis de style.css et de script.js. Ouvrez ensuite le fichier index.html et insérez ici le document HTML de base. Pour cela, je vais utiliser une animation. Plaçons ici un point d' exclamation et appuyons sur Tab ou répondons OK. Allons-y et changeons le titre. Je vais insérer votre formulaire de connexion, d'inscription. Ensuite, relions les fichiers CSS et JavaScript. Je vais ouvrir la balise de lien, spécifier le chemin du fichier CSS. Ensuite, pour lier le fichier JavaScript, je vais ouvrir la balise de script correctement, à propos du corps et de l'attribut source. Spécifiez le chemin du fichier. Enfin, je vais exécuter le projet dans le navigateur. Pour cela, utilisons l'un des packages de code VS appelé Live Server. Cela nous permet d'exécuter le projet dans le navigateur et d' effectuer des mises à jour sans actualiser la page à chaque fois. Vous pouvez donc installer et utiliser ce package. Très bien, plaçons l'éditeur et les navigateurs côte à côte, Et lancez-vous. Comme d'habitude, je vais commencer à créer du balisage HTML. Ouvrons donc la balise div, qui sera le conteneur Ensuite, je vais insérer votre élément de titre H1 avec un titre de classe Le titre sera composé de deux éléments de travée différents. Ouvrons-le avec le titre de la classe, étendons un élément , introduisons le signe de texte, puis créons un deuxième élément de plage avec un titre de classe à insérer ici C'est tout à propos du titre. Ensuite, je vais créer des boutons. Ouvrons donc la balise div, qui sera l' enveloppe des boutons Je vais lui attribuer des boutons de classe. Insérez ensuite les écouteurs et les éléments portant le signe de classe en BTN. Nous allons insérer votre identifiant. Ensuite, je vais dupliquer cette ligne de code et changer le nom de la classe. Nous devons nous inscrire et nous inscrire. Ensuite, je vais créer un formulaire, mais avant cela, insérons ici une balise div qui sera l' arrière-plan du formulaire Je veux dire que le triangle est la classe scientifique de g. Ensuite, je vais ouvrir la balise de formulaire. Il comportera deux classes différentes. Le premier va être formé. En ce qui concerne le second, Insertons votre identifiant Dans l'ensemble, nous aurons un seul élément de formulaire avec quatre champs de saisie différents. Et nous parviendrons à afficher, à connecter et à enregistrer des parties en utilisant JavaScript comme balise open div, qui sera l'enveloppe du champ de saisie et du Attribuons-lui un wrapper de saisie de formulaire de classe. Nous utiliserons le paragraphe pour afficher un message d'erreur. Insérons ici un élément d'entrée avec des textes de type. En plus de cela, je vais y ajouter quelques attributs assignés aux entrées du formulaire du cluster. Ensuite, nous avons besoin de l'identifiant, qui sera le nom d'utilisateur. Enfin, utilisons un attribut d'espace réservé pour dévaluer votre nom OK, c'est tout à propos de l'élément d'entrée. Créons le paragraphe avec le message de classe. Par défaut, je vais insérer ici un message d'erreur. Mais nous finirons par définir les messages d'erreur à partir de JavaScript. Le premier champ de saisie est donc créé. Allons-y, dupliquons l'élément trois fois, puis apportons quelques modifications. Pour la deuxième entrée, nous avons besoin d'un e-mail d'identification. Modifiez également l'attribut de l' espace réservé, entrez votre adresse e-mail Ensuite, nous allons saisir le mot de passe. Changeons donc le type, transformons-en un mot de passe et modifions également les attributs de l'ID et de l' espace réservé Nous avons besoin d'un mot de passe pour les deux. D'accord ? La dernière entrée sera destinée à la confirmation du mot de passe. Je vais donc refaire le type de saisie, le mot de passe. En ce qui concerne la pièce d'identité, ce sera le passeport pour. Enfin, modifiez l'attribut de l' espace réservé, je vais lui faire confirmer le mot de passe D'accord ? Le dernier élément que nous allons créer dans le document HTML sera un bouton d'envoi. Ouvrons donc l' élément d'entrée avec le type submit. Ajoutez également ici la valeur submit. Et enfin, utilisez votre formulaire de classe btn. Très bien, c'est tout en ce qui concerne le balisage HTML. Nous devons maintenant commencer à écrire le CSS. Tout d'abord, créons des styles réinitialisés et communs. Sélectionnons chaque élément à l'aide d'un astérisque et supprimons la marge et le remplissage par défaut Je vais les mettre tous les deux à zéro. En outre, définissons la taille de la boîte de bordure et supprimons également le contour par défaut de chaque élément Définissons le plan sur aucun. Ensuite, je vais modifier la famille de polices. Tout au long de ce didacticiel, nous allons utiliser l'une des polices Google. Allons donc sur le site Web de Google Fonts et recherchons une police appelée dans l'échelle de la console. Sélectionnez ensuite les différents styles ici. Prenez le lien et collez-le dans l'élément principal. Changeons la famille de polices. Ce n'est pas sûr dans l' échelle de la console et dans le monospace. C'est stupide à propos des styles courants et réinitialisés. Je vais utiliser la RAM comme unité de mesure dans ce projet. heure actuelle, un rem est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Par défaut, je souhaite convertir une mémoire vive en dix pixels. Et pour cela, nous devons diminuer la taille de police des éléments HTML. Portons-le à 62,5 %. Comme vous pouvez le constater, les éléments sont devenus plus petits. Allons-y et prenons soin du contenant. Sélectionnons-le. Et pour commencer par définir la largeur et la hauteur, je vais les régler à 200 %. Pour ce qui est de la hauteur, je vais la régler à 100 % de la fenêtre d'affichage Ensuite, je vais centrer le contenu. Et pour cela, utilisons Flexbox. Nous devons changer de direction. Faisons-en une colonne. Ensuite, pour placer le contenu au centre, nous devons justifier le centre de contenu et aligner les éléments au centre D'accord ? Les éléments sont donc placés au centre et avec le conteneur, nous avons terminé. Passons à autre chose et personnalisons le titre. Tout d'abord, prenons soin de sa position. Je vais le déplacer vers le haut. Attribuons donc à une position absolue. Ensuite, définissez la position supérieure, faites-en sorte que cinq rampes soient prises en compte, le titre soit positionné, et maintenant je vais d'abord le styliser. Changeons la taille de la police, faisons-en sept RAM. Ensuite, je vais alléger la police en utilisant une épaisseur de police de 300. Changez également la couleur, faites-en trois cinq, trois à cinq Ensuite, je vais créer un espace entre les lettres en utilisant l' espacement des lettres dans une pièce. Créez également un effet d'ombre. Utilisation de l'ombre du texte. Attribuons des valeurs de vérité de 0,2, 0,2, 0,5 RAM et la couleur AAA. Pour l'instant, c'est tout à propos du titre. Passons à autre chose et personnalisons les boutons. Dans un premier temps, je vais définir leurs positions. Sélectionnons donc les éléments du wrapper div, qui contiennent les boutons du nom de classe, et définissons sa position Définissez ensuite les propriétés du haut et de la gauche. Je vais les mettre tous les deux sur cinq rampes. Les cases sont donc placées dans le coin supérieur gauche de la page Ensuite, je vais les placer verticalement dans une colonne. Pour cela, utilisons Flexbox. Nous avons besoin d'afficher la flexion et la colonne de direction de flexion. OK, passons à autre chose et sélectionnons les boutons. Je suis dans l' élément bouton lui-même. Tout d'abord, je vais définir la largeur et la hauteur. Faisons avec dix RAM. Quant à la hauteur, je vais la régler pour la RAM. Et changez également la couleur d'arrière-plan, rendez-la blanche. Après cela, changeons la taille de la police. Je vais me rendre à Ram. Changez également la couleur. Utilisons à nouveau la couleur F zéro, trois cinq, trois cinq. Ensuite, je vais supprimer la bordure par défaut. Mettons-le à zéro. De plus, je vais créer les coins des cases qui les entourent en utilisant le rayon de bordure avec une valeur de cinq rem Ensuite, créons un espace entre les lettres en utilisant un espacement des lettres de 0,1 RAM. Je vais donc créer un petit effet d'ombre. Utilisons donc à la fois l'ombre avec les valeurs 0,3, 0,3 RAM plutôt que 0,8 rem, et la couleur E. Ensuite, nous avons besoin d'un peu d'espace en haut et en bas des boutons. Utilisons donc la marge avec les valeurs un, RAM et zéro. Et enfin, changeons le type de cours pour le faire ressortir. D'accord ? Les boutons sont donc stylisés et nous devons maintenant nous occuper du formulaire Allons-y et sélectionnons-le. Je vais créer un conteneur Flex Element. Nous avons donc besoin de Display Flex. Et je vais aussi changer de direction. Définissons la direction flexible pour appeler. Ensuite, prenons soin du wrapper de saisie du formulaire. Mais avant cela, je voudrais masquer ces paragraphes pendant un certain temps Allons-y, sélectionnons-les et attribuons-leur n'en afficher aucun. Après cela, sélectionnons le wrapper de saisie du formulaire. Je vais créer de l' espace en haut et en bas en utilisant la marge. Mettons-le à 1,5 rem et à zéro. Très bien, allons-y et sélectionnons l'élément d'entrée lui-même. Et définissez la largeur et la hauteur de chute. Je vais définir la largeur à 50 RAM comme hauteur totale. Faisons cinq RAM. Changez également la couleur d'arrière-plan, rendez-la blanche. Ensuite, je vais augmenter la taille de la police. Passons à 1,7 rem. Créez ensuite de l'espace sur les côtés droit et gauche à l'intérieur des entrées à l'aide d'un rembourrage Faisons en sorte que ce soit 0,2 ram Enfin, créons un espace entre les lettres en utilisant moins de points d' espacement pour créer une rampe. C'étaient donc les styles courants des entrées. Les entrées et le bouton d' envoi. Je vais maintenant sélectionner la saisie du formulaire elle-même. Créons une ombre en utilisant Box Shadow avec le point de valeurs que nous avons exécuté. Nous avons couru 0,5 rem. Ensuite, nous devons appeler ou E. Et je vais également ajouter ici une valeur supplémentaire. Je veux créer une ombre à l'intérieur de l'entrée. Et pour cela, nous devons utiliser une valeur appelée encart. Ensuite, changeons la couleur. Vous voyez votre couleur 888. Très bien, après cela, supprimons la bordure par défaut pour tous les éléments d'entrée Je vais donc définir la limite sur aucune. Et je vais aussi arrondir les coins en utilisant le rayon comme valeur de cinq rem D'accord ? Donc, pour l'instant, les éléments d'entrée ont une ombre à l'intérieur des champs, et je vais également la créer en dehors de l'élément Pour cela, attribuons la propriété box shadow au wrapper de saisie du formulaire Ce sont les mêmes valeurs de vérité, 0,5 RAM trois fois. Et la couleur est Et en plus de cela, nous avons besoin du rayon avec la valeur cinq rampes. Désormais, chaque champ de saisie comporte une ombre à l'intérieur et à l'extérieur, ce qui leur donne une belle apparence. Allons-y et prenons soin de ce bouton d' envoi que nous voyons ici uniquement pour la soumission du texte. Allons-y et sélectionnons cet élément. Et dans un premier temps, créez une ombre à l'aide de box shadow. Je vais vous transmettre les valeurs 0,5 rem, 0,5 RAM, une RAM et la couleur D, D, D. De plus, changeons la couleur du texte. Utilisons à nouveau la couleur rouge à 03535. Ensuite, je vais créer de l'espace en haut et en bas en utilisant la marge. Mettons-le à deux RAM et à zéro. Créons donc un espace entre les lettres. Utilisez des points d'espacement latéraux pour courir. Ensuite, mettez la police en gras en utilisant l'épaisseur de police en gras. Le bouton d'envoi semble correct. Ensuite, je veux créer un petit effet de survol. Je vais légèrement augmenter les ombres en volume une fois que nous aurons survolé le bouton. Nous allons donc sélectionner Form btn avec le pointeur de la souris. Et on lui a attribué une ombre à la boîte à dents, où les valeurs 0,5 RAM, 0,5 RAM pour RAM, et la couleur d, d, d. D'accord ? La dernière chose que nous devons faire avant d'ajouter la fonctionnalité à notre projet est donc la fonctionnalité à notre projet de créer un arrière-plan. Comme vous le savez, nous avons un élément div vide dans le document HTML avec la forme de classe PG Allons-y et sélectionnons cet élément. Et dans un premier temps, définissons sa position sur absolue. Ensuite, je vais régler la largeur et la hauteur, toutes deux à 65 RAM. Utilisez également ici une ombre de boîte avec 1,5 round trois fois et la couleur ddd. Enfin, je souhaite faire pivoter cet élément de 45 degrés pour créer un effet de triangle. Utilisons donc Transform avec la fonction de rotation et insérons ici 45 degrés. Comme vous pouvez le constater, nous en avons terminé avec l'arrière-plan. En fait. En ce moment, nous avons un petit problème. Je n'arrive pas à me concentrer sur les entrées. Pour résoudre ce problème, attribuons à l'élément de formulaire la propriété d'index Z avec une valeur plus élevée, disons 100. Très bien, maintenant le problème est réglé et en fait, avec cette Thaïlande, nous en avons terminé pour le moment Nous devons ajouter certaines fonctionnalités au projet. Avant de commencer à écrire du JavaScript, je voudrais faire quelques choses et faire du CSS. Une fois que nous nous sommes concentrés sur les entrées, je souhaite augmenter la zone ombrée à l'intérieur du InputField Je vais donc sélectionner la saisie du formulaire avec une pseudo-classe focus Ensuite, insérez votre ombre de boîte avec les valeurs suivantes. Cinq rampes, 0,5, soit une RAM de plus que la couleur E. Et nous avons également besoin ici de la valeur définie. Utilisez ensuite la transition. Je souhaite attribuer propriété de transition à tous les éléments d'entrée, y compris au bouton d'envoi, car cela a également un effet d'ombre de boîte. Cependant, la transition est définie avec les valeurs box shadow et 0,3 s. OK, donc maintenant nous avons un bien meilleur effet. Je vais modifier le mode de saisie du bouton d'envoi. Faisons donc en sorte qu'il soit pointé. Très bien, il est maintenant temps d' ajouter des fonctionnalités au projet Jetons un coup d'œil à la version finale. D'ailleurs, nous n'avons pas ici le fond triangulaire car le projet fini est entièrement réactif. Je vais programmer ces deux boutons. Comme vous pouvez le constater par défaut, la couleur d'arrière-plan du bouton de connexion est différente Et une fois que nous aurons cliqué sur le bouton S'inscrire, les couleurs d'arrière-plan changeront. En outre, la deuxième partie du titre est modifiée en conséquence. Et aussi les champs de saisie appropriés pour afficher OnClick. Nous allons faire ces trois choses. Dans un premier temps, éliminons la couleur d'arrière-plan blanc par défaut de ces boutons. Sélectionnez ensuite le bouton de connexion et modifiez la couleur d'arrière-plan Je vais utiliser votre couleur E7, E7, E7. Sélectionnez ensuite le bouton S'inscrire et définissez sa couleur d' arrière-plan en blanc. Très bien, maintenant je vais changer les couleurs d'arrière-plan Onclick Passons au fichier script.js. Nous devons donc associer aux deux boutons des récepteurs d'événements avec l'événement de clic Ensuite, une fois que nous avons cliqué sur le bouton S'inscrire, nous devons ajouter au conteneur une nouvelle classe qui sera utilisée en CSS Nous définirons de nouveaux styles à l' aide de cette classe. Alors tout d'abord, allons-y et sélectionnons le conteneur. Je vais créer un nouveau conteneur variable. Et puis sélectionnez le conteneur à l'aide de la méthode de sélection de requêtes. Nous devons spécifier ici le conteneur de classe. Ensuite, je vais sélectionner le bouton d' inscription et y associer l' écouteur d'événements Allons-y et utilisons à nouveau la requête, sélectionnons une méthode et spécifiez ici le nom de la classe, inscrivez-vous btn. Ensuite, attachez-le à l' écouteur d'événements à l'aide d'un événement de clic. Et nous devons également transmettre ici la fonction de rappel, qui sera exécutée une fois que nous aurons cliqué sur le bouton Lorsque nous cliquons sur le bouton S'inscrire, nous devons ajouter une nouvelle classe au conteneur. Nous avons donc besoin ici du conteneur, suivi de la propriété class list, qui stocke toutes les classes de l'élément. Donc, pour ajouter la classe au conteneur, je vais utiliser une méthode appelée add. Entre parenthèses. Nous devons spécifier le nom de la classe. Disons que c'est du changement. Très bien, allons dans le fichier CSS et sélectionnons le bouton d'inscription, mais avec le changement de classe Ensuite, définissez la couleur d'arrière-plan sur E7, E7, E7. Alors maintenant, si je clique sur le bouton S'inscrire, sa couleur d'arrière-plan changera. Mais en fait, cela ne suffit pas. Comme vous le voyez, le bouton de connexion a toujours la couleur d'arrière-plan grise. Revenons donc au fichier JavaScript. Nous devons maintenant nous connecter au bouton de connexion et à l'écouteur d'événements Et nous devons supprimer le changement de classe du conteneur. Allons-y et sélectionnons le bouton Se connecter à l'aide de la méthode QuerySelector, puis attachons-y méthode QuerySelector, puis un écouteur d'événements Arrêtons-nous ici, cliquez sur événement, puis sur la fonction de rappel Donc, comme nous l' avons dit, nous devons supprimer la classe modifiée sur le conteneur. Allons-y et récupérons cette ligne de code. Et au lieu de la méthode appelée add, utilisons remove. Accédez ensuite au fichier CSS. Contrairement au bouton d'inscription, sélectionnez le bouton de connexion avec la classe, modifiez-le et définissez sa couleur d' arrière-plan sur le blanc Maintenant, comme vous pouvez le constater, tout va bien. Les couleurs d'arrière-plan changent. ne restait plus qu'à ajouter un effet de transition aux boutons. Utilisons donc la transition avec la couleur de fond et avec une durée de 0,3 s. Très bien, nous avons maintenant un bien meilleur effet Ensuite, je vais m' occuper du titre. Une fois que nous aurons créé des boutons, nous devrions modifier la deuxième partie du titre en conséquence. Dans un premier temps, je vais le modifier sans aucun effet. Et une fois que nous aurons réussi à modifier le contenu, nous ajouterons de jolis effets. Passons au fichier JavaScript. Et si c'est le premier, sélectionnons le deuxième élément de la plage dans le titre. Je vais créer une nouvelle variable. Appelons-le Headings Part II. Ensuite, sélectionnez les éléments de span à l'aide de la méthode QuerySelector. Faisons une pause ici. Le titre du nom de classe s'étend sur deux. Pour modifier le contenu des éléments, je vais donc utiliser l'une des propriétés appelées contenu du texte. Nous avons donc besoin de hareng spawn 2, suivi de la propriété TextContent, et nous devons l'attribuer vers le haut Copions ce code. Collez-le ci-dessous et changez-le en E. Donc si je clique sur les boutons, le contenu changera en conséquence. Tout fonctionne bien. Et maintenant, comme je l' ai dit, je vais ajouter quelques effets intéressants à ce changement. Jetons à nouveau un coup d'œil au projet terminé. Ainsi, lorsque je clique sur les boutons, la boîte blanche se déplace de droite à gauche et crée un bel effet. Cette boîte blanche sera la suite des pseudo-éléments. Tout d'abord, créons ces éléments. Nous avons besoin du deuxième point, suivi des pseudo-éléments F2 Dans un premier temps, définissons un contenu. Je vais le vider. Puis réglez la position sur absolue. Je vais définir la position de cet élément en fonction de son parent, qui est l'élément span lui-même. Je vais donc attribuer à l'élément span une position relative. Définissez ensuite la largeur et la hauteur de la boîte. Je vais les régler tous les deux à 100 % et également leur donner des arrière-plans temporaires différents de la couleur blanche parce que je veux rendre la boîte visible. Utilisons ici la couleur gris clair. Maintenant, la boîte est visible. Ensuite, je vais définir sa position Par défaut, je vais le placer sur le côté droit. Réglons la bonne position à -100 %. Très bien, donc lorsque je clique sur le bouton S'inscrire, cette case doit se déplacer vers la gauche. Et pour y parvenir , je vais à nouveau utiliser le changement de classe. Suivie par les deux titres avec des pseudo-éléments après Pour déplacer les éléments, je vais définir la bonne position à 200 %. Maintenant, si je clique sur les boutons , la boîte se déplacera. Ajoutons à cela une petite transition. Attribuons-lui, non ? Et 0,6 s. Maintenant, la boîte se déplace avec une transition en douceur. Il peut voir lorsque la boîte se déplace vers la gauche, puis elle se retrouve en haut du titre. Je suis dans le premier élément de la plage. Nous devons donc corriger ce problème et nous pouvons manipuler avec la propriété z-index Sélectionnons le premier élément de plage, dont le titre de classe est la colonne vertébrale 1, et définissons la propriété d'index sur dix. OK, maintenant le problème est réglé et la seule chose à faire est d'ajouter peu de temps avant que le continent ne change. Parce qu'à l'heure actuelle, au début, le contenu change, puis la boîte se déplace. Et en fait, ça n'a pas l'air bien. Je vais créer un délai en utilisant l'une des fonctions intégrées appelée setTimeout Accédez au fichier script.js et insérez-le ici. Réglez le délai d'expiration. Cette fonction prend deux arguments. La première est la fonction de rappel, qui est exécutée après un certain temps. Et la durée de ce temps sera le deuxième argument. Exécutons cette ligne de code. En ce qui concerne le délai d'expiration, vous devez le spécifier en millisecondes Insérons donc une année, 200. Copions ce code et collez-le ici. Je vais passer à E. Donc maintenant, si je clique sur les boutons, l'effet fonctionnera correctement. La seule chose à faire était de se débarrasser de cette couleur temporaire et d' interviewer la couleur blanche. OK, maintenant nous avons un effet sympa et cool. Très bien, avec le titre, nous avons terminé et devons maintenant nous occuper des champs de saisie Par défaut, nous devons afficher les entrées d' e-mail et de mot de passe n. Une fois que nous pouvons être sur le bouton S'inscrire, nous devons afficher à nouveau le prénom et le nom de famille plus. Allons-y et masquons le premier et le dernier champ de saisie. Je vais les sélectionner à l'aide du sélecteur f child. En fait, je vais sélectionner le wrapper de saisie de formulaire. Nous avons besoin ici de F. child one. Dupliquez ensuite ce sélecteur et modifiez le numéro. Insérez ici pour. Donc, pour masquer ces éléments, je vais utiliser la visibilité cachée et l'opacité nulle Comme vous pouvez le voir, les entrées sont masquées, mais le bouton de soumission est maintenant trop éloigné de ces entrées. Alors occupons-nous de ça. Je vais définir la position sur relative. Et puis pour déplacer l'élément haut avec une valeur moins six. Maintenant, lorsque nous cliquons sur le bouton S'inscrire, nous devons faire plusieurs choses. Nous devons le réafficher. La première et la dernière entrée. Je vais dupliquer ce code. Ajoutons ensuite aux deux sélecteurs le changement de classe. Ensuite, nous devons modifier les valeurs. Au lieu d'une visibilité cachée, nous avons besoin d'une visibilité visible et d'une opacité En outre, nous devons remettre ce bouton d'envoi à sa position par défaut. Nous allons donc sélectionner le bouton Soumettre en plaçant changement de classe et la configuration sur une seule rampe. Donc, si nous cliquons sur le bouton S'inscrire, tout fonctionnera correctement. Maintenant, pour rendre ce changement plus agréable, nous devons utiliser la transition Dans un premier temps. Ajoutons une transition aux rappers d'entrée Nous avons besoin de toutes vos valeurs et de 0,3 s. Ensuite, nous devons effectuer la transition avec le changement de classe. Et nous avons également besoin que vous utilisiez un certain délai. Ainsi, lorsque nous cliquons sur le bouton S'inscrire, cette transition fonctionnera. Et une fois que nous aurons cliqué sur le bouton de connexion, cette transition fonctionnera Très bien, donc avec les champs de saisie, nous avons terminé. Ajoutons une transition au bouton d'envoi. Par défaut, je vais placer la transition en haut de la page. Ensuite, la durée 0,3 s, et aussi le délai de 0,3 s. Et nous avons également besoin d'une transition ici avec la valeur maximale et 0,3 s. Donc si je clique sur le bouton S'inscrire, le bouton de soumission se déplacera sans problème. Mais une fois que j' aurai cliqué sur le bouton Se connecter, nous n'aurons aucun effet de transition. La raison en est que nous avons utilisé la transition avec des éléments d'entrée. Et en fait, ce sélecteur a la priorité la plus élevée Je vais donc me débarrasser de la transition à partir de là et ajouter une zone ombrée en dessous dans Alors maintenant, si je teste, tout fonctionnera parfaitement. OK. La prochaine chose que nous devons faire est donc de valider tous ces champs de saisie. Tout d'abord, je vais sélectionner les quatre éléments d'entrée et les stocker dans les variables. Allons-y et créons la première variable, qui sera le nom d'utilisateur. Comme on s'en souvient, les éléments d'entrée ont des identifiants. Je vais donc sélectionner nom d'utilisateur en utilisant la méthode get element by ID. Nous devons transmettre le nom d'utilisateur d'identification. Dupliquons cette ligne de code trois fois et changeons les noms des variables ainsi que les identifiants. Le second sera un e-mail. Ensuite, nous aurons un mot de passe et un mot de passe aussi. Très bien, nous allons d'abord vérifier si les champs de saisie sont vides ou non Je vais créer une fonction. Allons-y et appelons-le vérifier les champs obligatoires. Je vais utiliser ici la fonction flèche. Cette fonction prendra un paramètre qui sera un tableau et inclura toutes les amplitudes Donc, en tant que paramètre, je vais insérer votre tableau d'entrées. Ainsi, pour vérifier si les champs de saisie sont vides ou non, nous devons d' abord parcourir le tableau. Et pour cela, je vais utiliser l'une des méthodes d'aide au tableau appelées H. Elle prend un argument qui sera la fonction de rappel Cette fonction elle-même prend un paramètre et je vais transmettre votre entrée. Ce sera l' élément d'entrée actuel pendant la boucle. Très bien, nous devons maintenant vérifier si la valeur de l'entrée est vide ou non Nous devons donc utiliser les instructions if else. Et comme condition, je vais passer ici, valeur du point d'entrée triple est égale à une chaîne vide. En fait, la valeur d'entrée n'est pas tout à fait suffisante ici car si nous saisissons quelque chose dans les champs de saisie avec un espace blanc, cet espace sera reconnu comme la partie de la valeur dont nous n'avons pas besoin Donc pour éviter ce genre de choses, je veux dire, pour ignorer les espaces, nous pouvons utiliser l'une des méthodes appelées trim D'accord ? Donc, si cette condition est vraie, nous devons afficher un message d'erreur. Mettons simplement ici le commentaire. Et si c'est faux, alors nous avons besoin d'une autre instruction dans laquelle nous devons changer la couleur de la bordure des entrées en vert. Instituons donc un succès pendant un certain temps. Donc, pour faire ces deux choses, je vais créer deux fonctions différentes. Commençons par le message d'erreur. Je vais créer une nouvelle fonction. Disons que c'est une erreur. Il faudra deux paramètres. Le premier concerne les éléments d'entrée. Pour ce qui est du second, ce sera un message. Nous devons maintenant accéder au wrapper de saisie du formulaire, qui est un élément parent de l'entrée Nous allons ajouter une nouvelle classe au wrapper. Et avec l'aide de cette nouvelle classe, qui parviendra à afficher un message d'erreur. OK, allons-y et créons une variable. Je vais l'appeler wrapper d'entrée. Ainsi, pour accéder au wrapper d'entrée, nous avons besoin d'une entrée suivie de la propriété appelée élément parent Nous devons maintenant ajouter une nouvelle classe au wrapper d'entrée. Et pour cela, je vais utiliser l'une des propriétés appelées ClassName Insertons votre classe. Disons erreur. En fait, cet élément possède sa propre classe, qui est un wrapper de saisie de formulaire Si nous vivons ici, c'est juste une erreur, cela écrasera la classe existante Donc pour l'éviter, insérons ici un formulaire capable de rapper également. Très bien, je vais maintenant sélectionner le paragraphe. Nous pouvons le faire en utilisant le document, mais dans ce cas, le premier paragraphe trouvé sera sélectionné. Donc, au lieu de documents, je vais utiliser un wrapper d'entrée suivi de la méthode de sélection de requêtes À l'intérieur de la parenthèse, nous devons spécifier la classe du message du paragraphe Très bien, nous devons maintenant modifier le contenu du message d'erreur Pour cela, utilisons la propriété TextContent doit être égale au message La fonction pour le message d'erreur est prête. Nous pouvons l'appeler ci-dessous dans l'instruction if. Il doit prendre deux arguments. Le premier sera également l'entrée. Le second sera le message. Ouvrons donc les coches rétroactives car je vais utiliser les littéraux du modèle Je vais donc vous transmettre l'identifiant de l'entrée. Comme vous le savez, les quatre entrées ont des identifiants. Ensuite, il doit être suivi du texte requis. D'accord ? Pour exécuter ce code, nous devons appeler cette fonction. Et cela devrait se faire une fois que nous aurons soumis le formulaire. Nous devons donc joindre au formulaire Elements Event Listener un événement de soumission Dans un premier temps, sélectionnons l'élément de formulaire. Créons une nouvelle variable et sélectionnons éléments du formulaire à l'aide de la méthode de sélection de requêtes Puis attaché à celui-ci et écouteur d'événements. Je vais réussir votre événement de soumission. Et aussi la fonction de rappel, qui sera exécutée une fois que nous aurons soumis le formulaire Dans un premier temps, lançons quelque chose sur la console, disons soumis. Donc, si je clique sur le bouton d'envoi, nous serons soumis dans la console. Mais comme vous pouvez le voir, il clignote. Et cela arrive parce que par défaut, le bouton Soumettre recharge la page Pour éviter ce comportement, nous devons utiliser une méthode appelée prevent default, et nous devons l'associer à l'objet de l'événement. Passons donc des objets pairs, puis utilisons la méthode de prévention par défaut, qui serait attachée à l'objet de l'événement. Maintenant, si je clique sur le bouton d' envoi, le problème sera résolu. Nous pouvons maintenant appeler la fonction vérifier les champs obligatoires. Il doit prendre un argument qui sera un tableau de champs de saisie. Passons donc les quatre entrées. Nom d'utilisateur, e-mail, mot de passe et mot de passe aussi. OK, donc pour le moment, nous ne verrons pas les messages d'erreur car nous devons écrire du CSS. moment, les paragraphes sont masqués, je vais donc les rendre visibles. Débarrassons-nous de n'afficher aucun. Nous voyons donc ici des messages d' erreur codés en dur. Et si je clique sur le bouton d' envoi, nous recevrons les messages d'erreur que nous venons de définir à partir du JavaScript. Si je saisis des caractères dans l'une des entrées, nous recevrons un message d'erreur provenant du champ de saisie vide. Allons-y et personnalisons le paragraphe. Tout d'abord, je vais définir sa position comme absolue. Ensuite, afin de positionner paragraphe en fonction de l'enveloppe d'entrée, attribuons-lui une position relative Ajoutez ensuite d'autres styles au paragraphe. Je vais définir la position gauche et l'afficher en RAM. Modifiez ensuite la taille de la police, pointez-la d'un point sur la RAM. De plus, je vais créer le dossier de polices en utilisant font-weight 700 Créez ensuite un espace entre les lettres en utilisant l'espacement des lettres. 0,1 RAM. Transformez également le texte en majuscules. Créez ensuite de l' espace en haut de l'élément en utilisant la marge supérieure d'un rang. Et enfin, changez la couleur, mettez-la F5, F5, E5 Très bien, le paragraphe est donc personnalisé. Par défaut, il doit être masqué et nous devons afficher des messages d'erreur lors de l'envoi. Cachons donc les paragraphes en utilisant la visibilité cachée et l'opacité à zéro Maintenant, par défaut, les messages d'erreur sont masqués et pour les afficher, nous devons utiliser l'erreur de classe. Suivi du message. Nous devons passer ici, la visibilité étant visible, et aussi l'opacité une Enfin, utilisons l'opacité de Transition Institute et la durée de 0,3 s. Donc, si je clique sur le bouton d'envoi, nous recevrons nos messages avec une transition agréable En fait, nous avons ici un petit problème tel que je le vois pour le dernier élément de saisie, nous avons un message d'erreur indiquant qu'un mot de passe est requis. Et en fait, cela n'a aucun sens. Je souhaite modifier ce message. Pour cela, nous devons utiliser une autre instruction if dans laquelle nous devons vérifier si l'ID de l'entrée est également égal au mot de passe. Mettons donc cette condition ici. Donc, si cela est vrai, nous devons appeler une fonction appelée erreur. Nous devons transmettre vos données et le message d'erreur. La confirmation du mot de passe est requise. Ensuite, nous devons utiliser l'instruction L. Et nous devons passer cette ligne de code ici. Maintenant, si nous testons, tout fonctionnera bien. Pour l'instant, avec les messages d'erreur, nous en avons terminé. Passons à autre chose et veillons au succès. Si nous saisissons des données dans les champs de sais 14. Projet 11 - Calendrier: Très bien, alors allons-y et occupons-nous de nos prochains projets Dans cette section, nous allons créer le calendrier. Nous avons donc ici un fond noir en plein écran et au centre de la page, nous voyons le calendrier Il nous montre le mois en cours avec la date actuelle. Ci-dessous, nous avons les jours de la semaine suivis du mois entier. Vous pouvez voir que le jour du mois en cours est surligné. De plus, nous avons ici deux flèches. Si nous cliquons vers le bas, nous passerons aux mathématiques suivantes et précédentes Vous pouvez donc consulter n'importe quelle date dans le futur ou dans le passé. Très bien, c'est donc ce que nous allons créer. J'ai créé un nouveau dossier sur le bureau appelé calendrier. Allons-y et ouvrons-le dans le code VS. Je vais créer les fichiers de démarrage pour HTML, CSS et JavaScript. Appelons-les index.html. Puis style.css et script.js. Ouvrez ensuite le fichier index.html et créez le document HTML de base. Je vais utiliser Animate. Plaçons ici le point d' exclamation et appuyons sur Entrée ou sur la touche Tab. Nous y voilà. Allons-y et changeons le titre. Je vais insérer ton calendrier. Ensuite, je vais lier les fichiers CSS et JavaScript au code HTML. Ouvrons la balise de lien et indiquons le chemin du fichier. En ce qui concerne le JavaScript, je vais ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, nous devons indiquer chemin du fichier dans l'attribut source. Enfin, je vais lancer le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages CSS appelé serveur live. Cela nous permet d'exécuter le projet jusqu'à la vie du navigateur et apporter les modifications et les mises à jour sans actualiser la page à chaque fois . Je recommande de télécharger et d'installer ce package. Très bien, enfin, je vais placer l'éditeur et le navigateur côte à côte, l'éditeur et le navigateur côte à côte, comme ça. Et lancez-vous. Je vais d'abord créer le balisage HTML. Nous allons utiliser des données statiques, mais finalement, nous allons créer ces données dynamiquement à partir de JavaScript. Ouvrons la balise div, qui sera le conteneur Ensuite, nous avons besoin d'une autre valeur par défaut, le calendrier lui-même. Le calendrier sera donc composé de trois parties principales. Nous avons un mois en cours avec ce fond vert. Ensuite, nous aurons les jours de la semaine et enfin les jours du mois. Ouvrons donc la balise div. Je vais lui attribuer une bouche de classe. Dans un premier temps, je vais activer la flèche gauche. Il doit être représenté par l'icône Font Awesome. Nous devons donc intégrer le CDN Font Awesome. Allons-y et recherchons Font Awesome CDN JS. Accédez au premier lien, puis sélectionnez CSS et récupérez le lien à partir d'ici. Nous devons ouvrir la balise de lien dans l'élément d'en-tête et coller le lien en tant que valeur de l'attribut de référence h. OK, ouvrons donc l'élément I avec les classes suivantes. Nous avons besoin de F a, S, F d'un angle gauche. En plus de cela, je vais lui attribuer une autre classe pour JavaScript. Disons que c'est de la préparation. Je veux dire précédent. Ensuite, nous avons besoin de l'élément div, qui inclura le nom du mois ainsi la date à laquelle il est attribué à la date du cours Ensuite, je vais transmettre votre élément de titre H1 avec le contenu s'il sera suivi du paragraphe où nous aurons le jour de la semaine, le vendredi, puis il devrait être suivi du mois du 29 mai, puis nous aurons besoin de l'année 2020 Encore une fois, pour l'instant, ce sont des dates codées en dur, mais nous les rendrons dynamiques plus tard Ensuite, nous devons insérer ici une autre flèche. Je suis sur la flèche droite pour les mois à venir. Je vais donc ouvrir l' élément avec la classe FAS, l'angle FAA, n' est-ce pas ? Et nous devons aussi entendre les cours ensuite. Très bien, la première partie du calendrier est prête. Passons à la partie suivante. Nous devons créer les jours de la semaine. Ouvrons donc la balise div, qui sera le wrapper Attribuons deux jours de la semaine , puis insérons les sept jours de la semaine Je vais insérer votre balise div avec un contenu. Dimanche Dimanche Puis dupliquez-le six fois et modifiez les jours de la semaine. Nous avons besoin du lundi, du mardi. Ensuite, nous aurons le mercredi, le jeudi, le vendredi et enfin le samedi. Très bien, avec la deuxième partie, nous avons terminé. Passons à autre chose et créons la troisième partie dans laquelle nous aborderons les jours du modèle actuel. Ouvrons le tag div avec les jours de cours. Donc, tout d'abord, je vais insérer ici quelques jours du mois précédent. Ouvrons la balise div avec une préparation de classe, une date et un 26 postérieur Dupliquez ensuite cet élément div quatre fois et modifiez les dates. Il nous en faut 27. Ensuite, nous en aurons 28, puis 29h30. D'accord. La suivante concerne les jours compris entre 1 et 31. Je ne vais pas écrire chaque date séparément. Donc, pour simplifier ce processus, je vais utiliser m it nous avons besoin de la balise div, puis d'un astérisque et de 31 Ensuite, nous devons insérer le signe du dollar à l'intérieur des bretelles bouclées. Alors on y va. Nous avons les chiffres de 1 à 31. En plus de cela, je vais faire un institut dans quelques jours à compter du mois prochain. Créons donc des développements avec la prochaine date de classe , instituons-en un, puis dupliquons-le cinq fois et changeons les nombres de deux à six. OK, en fait, avec le balisage HTML, nous avons terminé. Nous devons maintenant commencer à personnaliser le calendrier. Tout d'abord, créons des styles réinitialisés et communs. Je vais sélectionner chaque élément à l'aide d'un astérisque. Supprimons ensuite la marge et le rembourrage par défaut des éléments Je vais les mettre tous les deux à zéro. En plus de cela, je vais définir la taille d'une boîte de bordure. Ensuite, je vais définir la famille de polices. Tout au long de ce projet, nous utiliserons l'une des polices Google. Passons donc au site Web de Google Fonts. Recherchez ensuite des sables mouvants. Je vais sélectionner ces différents styles. Saisissez ensuite le lien et collez-le dans l'élément principal. Ensuite, définissons la famille de polices pour chaque élément. Je vais le placer sur des sables mouvants. San-Serif. Très bien, c'est tout à propos de la réinitialisation et des styles courants Comme vous pouvez le constater, ils s'appliquent à tous les éléments de la page. Tout au long de ce projet, je vais utiliser une mémoire vive comme unité de mesure. heure actuelle, un rem est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Je veux convertir 1 g en dix pixels. Et pour cela, nous devons diminuer la taille de police des éléments HTML. Portons-le à 62,5 %. Comme vous pouvez le constater, les éléments sont devenus un peu plus petits. Bon, maintenant il est temps de travailler sur le conteneur. Je souhaite l'étendre à l'ensemble de la page. Sélectionnons-le et définissons la largeur et la hauteur. Je vais me fixer à 200 %. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. Ensuite, je vais changer la couleur de fond. Utilisons votre couleur 12121. Et changez également la couleur du texte, éclaircissez-le en utilisant la couleur E. Ensuite, je vais placer le calendrier au centre de la page. Et pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, pour le centrage horizontal, je vais utiliser justify-content En ce qui concerne le centrage vertical, nous devons aligner les éléments au centre Très bien, c'est tout pour le conteneur. Ensuite, je vais personnaliser le calendrier. Je suis dans les éléments du tube qui encapsule le contenu du calendrier Tout d'abord, je vais définir la largeur et la hauteur. Mettons-nous en place avec 245 RAM. Pour ce qui est de la hauteur. Faisons-en 50 pour monter en rampe. Je vais également changer la couleur de fond. Faisons-le cinq fois, puis sept, ce sera de la couleur foncée. Ensuite, définissons l' ombre de la boîte à 0,5 rampe, trois rem et la valeur RGBA avec une couleur noire et une opacité Très bien, donc avec l'élément div du calendrier, nous avons terminé. Passons à autre chose et personnalisons les différentes parties de celui-ci. Je vais commencer par la bouche. Sélectionnons-la et, dans un premier temps, définissons la largeur, faisons-la à 100 %. Ensuite, je vais régler la hauteur sur 12 RAM et changer la couleur d'arrière-plan. Faites-le 16756. OK, ensuite je vais utiliser flexbox pour placer les éléments horizontalement dans une rangée et aussi pour les centrer verticalement. Utilisons Display Flex. Ensuite, afin de créer un espace entre les éléments, utilisons Justifier l'espace de contenu entre les éléments. Et nous devons également aligner les éléments au centre. Très bien, après cela, je vais créer de l'espace sur les côtés droit et gauche à l'intérieur des éléments Pour cela, utilisons du rembourrage et réglons-le sur zéro en haut et en bas et sur les côtés gauche et droit Nous devons également aligner le texte au centre. Enfin, utilisez Tax Shadow avec les valeurs 0,3, 0,5 RAM et la valeur RGBA avec une couleur noire et une opacité de Très bien, je vais maintenant styliser les différents éléments de l'élément mouth div Allons-y et commençons par les flèches. Sélectionnez l'élément I. Réglez sa taille de police sur 2,5 rem. Et créez également un pointeur de curseur. Ensuite, nous avons le vêtement de tête H1, qui nous montre le mois en cours. Allons-y et sélectionnons cet élément. Je vais modifier la taille de sa police. Faisons-en trois RAM. Rendons également la police légèrement plus claire, définissons la police sur 400 plutôt que de transformer le texte en majuscules Ensuite, je vais créer l' espace entre les lettres. Faisons en sorte qu'il y ait une rampe. Enfin, créez de l'espace en bas en utilisant la marge inférieure avec la valeur 1 rampe. Allons-y et enfin, stylisons le paragraphe. La seule chose que je vais faire ensuite est d'augmenter la taille de la police. Sélectionnons-le et définissons la taille de police sur 1,6 rampe. Très bien, c'est donc tout à propos de la première partie du calendrier Passons aux jours de semaine. Je vais me fixer à 200 %. Augmentez ensuite la hauteur, faites cinq mètres. Et créons également de l'espace en utilisant du rembourrage. Je vais le mettre à zéro en haut et en bas. Pointez pour courir sur les côtés droit et gauche. Ensuite, je vais placer les jours de la semaine horizontalement dans une rangée et aussi les centrer verticalement. Nous avons donc besoin d'afficher, de fléchir et d'aligner les éléments au centre. OK, donc avec l'élément wrapper div, nous avons terminé. Ensuite, personnalisons les jours de la semaine eux-mêmes. Je vais sélectionner des éléments div. Dans un premier temps, modifions la taille de la police. Je vais le régler sur 1,5 RAM. Alors amusons-nous, légèrement plus légèrement, en utilisant font-weight 400 Et créez un espace entre les lettres en utilisant une rampe d'espacement des lettres de 0,1. Hein ? Je vais maintenant définir la largeur de chaque élément div Comme vous le savez, la largeur du calendrier est égale à 45 rem. Nous avons créé un petit rembourrage à l'intérieur du div id des jours de semaine qui équivaut à 2,4 RAM des deux côtés Je veux dire, sur les côtés droit et gauche, je veux que la largeur de chaque élément de division soit un septième de la largeur totale Je vais donc utiliser la fonction de calcul. Et nous devons diviser 44 points par 744,2. Rem est la différence entre la largeur et le rembourrage. J'espère que cela a du sens pour vous. OK, nous devons ensuite centrer le contenu de chaque élément du div Et pour cela, utilisons Flexbox. Je vais régler l' affichage pour qu'il soit flexible. Ensuite, nous devons justifier le centre du contenu et aligner les éléments au centre. Enfin, créons un petit effet d'ombre. Utilisez une ombre de texte avec les valeurs 0,3, 0,5 rem, valeur RGBA avec une couleur noire et une opacité de Très bien, donc c'est pour les jours de semaine. Passons à autre chose et occupons-nous des jours du mois. Tout d'abord, sélectionnons l'élément wrapper div, qui comporte des jours de cours Mettons-nous à 200 %. Ensuite, je vais régler l'affichage sur Flex parce que je veux terminer les journées. Utilisons donc le flex wrap avec le value rap. Enfin, créons de l'espace en utilisant du rembourrage. Disons qu'il y a de la RAM sur les quatre côtés. Ensuite, je vais personnaliser la journée elle-même. Nous allons donc sélectionner les éléments div. Tout d'abord, définissons la taille de police sur 1,4 rampe. Ensuite, utilisez la marge, faites-en 0,3 RAM sur les quatre côtés. Ensuite, définissons la largeur des éléments HTML. Je vais utiliser la même technique que celle que nous avons utilisée en semaine. Je veux donc placer sept jours sur chaque ligne. Utilisons à nouveau la fonction de calcul. Nous devons diviser la largeur du calendrier par sept, mais nous devons exclure la marge et le rembourrage Si nous en soustrayons deux, la largeur, la marge et le rembourrage, nous obtiendrons 40 points pour La marge de chaque côté est égale à 0,3 rampe. Le montant de la marge sera donc de 0,3 multiplié par 14, car au total, nous aurons sept jours. Cela équivaut à 4,2 RAM. Ensuite, il faut ajouter à la valeur du loyer le montant du rembourrage Nous devons diviser 40 points pour la RAM par sept. Ensuite, je vais régler la hauteur à cinq rem. Ensuite, je vais centrer le contenu. Définissons donc la propriété d'affichage sur flex et utilisons justify-content center et align items center Je vais aussi créer un petit effet d'ombre. Utilisons une ombre de texte avec les valeurs 0,3 et 0,5 RAM et RGBA avec une couleur noire et une opacité de Très bien, donc les jours sont personnalisés et ensuite je vais personnaliser les dates précédentes et suivantes La seule chose que je vais faire est de réduire leur opacité. Allons-y et sélectionnons les deux. Et réglez l'opacité sur 0,5. OK, donc la prochaine chose que je vais faire est de souligner le jour en cours du mois. Dans un premier temps, accédons au fichier HTML et attribuons à la classe de date actuelle aujourd'hui. Ensuite, sélectionnez-le et modifiez la couleur d'arrière-plan. Je vais en faire 16756. OK, donc la dernière chose que je vais faire est de créer un petit effet de survol Une fois que nous aurons survolé les jours, je vais changer la couleur d'arrière-plan Affichez également la bordure et pointez le curseur. Je veux le faire tous les jours du mois sauf le jour en cours. Nous allons donc sélectionner les éléments div avec le pointeur de la souris. Ensuite, il doit être suivi du sélecteur de notes. C'est la fonction. Et nous devons passer ici avec la classe aujourd'hui. OK, passons à la couleur d'arrière-plan 62626. Ensuite, j'ai défini la bordure avec le point de valeurs à afficher en continu et la colonne 777. Et enfin, pointez le curseur. Utilisons également la transition uniquement pour la couleur d'arrière-plan. Nous avons besoin ici de la couleur de fond et de la durée de 0,2 s. Bon, avec le CSS, c'est terminé Il est maintenant temps d' ajouter du JavaScript à notre calendrier et de le faire fonctionner. Tout au long de cette partie, nous travaillerons assez fréquemment avec l'objet date. Nous allons utiliser différentes méthodes pour manipuler la date. Tout d'abord, je souhaite afficher le mois en cours de manière dynamique à l'aide de JavaScript. À l'heure actuelle, c'est en mai que nous l'avons spécifié à partir du fichier HTML ? Dans un premier temps, je vais créer un objet de date. Pour ce faire, nous devons donc utiliser la fonction constructeur de l'objet date En général, l'objet date renvoie la date et l'heure actuelles. Il spécifie également le fuseau horaire du navigateur et renvoie ces données sous forme de chaîne de texte intégral. Allons-y et créons les objets de date. Je vais créer une nouvelle variable, date, qui doit être égale à la nouvelle fonction du constructeur de date Ensuite, lancez dans la console. Donc, si j'inspecte la page et que je vérifie la console, nous obtiendrons la date et l'heure actuelles suivies du fuseau horaire du navigateur. Comme nous l'avons dit, la première chose que nous allons faire est d'afficher le mois en cours à l'aide de JavaScript. Pour obtenir le mois en cours, vous devez utiliser l'une des méthodes d' objets de date appelée get month. Créons donc une nouvelle variable. Je vais appeler ça des maths. Il doit être égal au point de date. Vas-y, maman. Exécutez ensuite le calcul sur la console Comme vous pouvez le voir, nous avons ici une valeur numérique agit en fait du numéro d'index de l'embouchure actuelle. Nous sommes maintenant en mai, qui est le cinquième mois de l'année. Mais à cause de cela, les papillons ont un indice basé sur zéro La méthode mathématique renvoie quatre, qui est l'indice du cinquième mois. Très bien, donc pour afficher le mois en cours sur la page, nous devons utiliser la méthode get et manipuler ces numéros d'index. Tout d'abord, je vais créer un nouveau tableau dans lequel je vais stocker les 12 mois de l'année. Créons donc une nouvelle variable, qui sera un tableau. Et puis passez ici les noms mathématiques. La première aura lieu en janvier. Ensuite, je vais le dupliquer 11 fois. Et puis changez de nom. Nous avons besoin de février, mars , avril, puis nous avons mai, juin, juillet et août. La prochaine aura lieu en septembre, octobre, novembre et décembre. Ainsi, le tableau est créé. Comme vous le savez, les éléments des tableaux ont des numéros d'index basés sur zéro Ici. Chaque mois possède les indices appropriés de zéro à 11. Je vais maintenant sélectionner la rubrique vêtements H1, qui doit afficher le mois en cours. Nous allons donc le sélectionner à l'aide de la méthode QuerySelector. Nous devons spécifier ici le nom de la classe, la date, puis la balise H1 Le titre est donc sélectionné et nous devons maintenant modifier son contenu. Pour ce faire, je vais utiliser l'une des propriétés du DOM appelée innerHTML Nous devons maintenant utiliser nos maths matricielles et spécifier le numéro d'index Si je mets ici le numéro d'index manuellement, disons quatre. Ensuite, supprimez le contenu de l'élément de titre à partir du code HTML. Nous verrons à nouveau le mois de mai sur la page. Si je change le numéro d'index et que j'écris cinq, nous aurons le mois de juin. Donc, pour afficher la bonne bouche, nous devons utiliser la méthode get. Nous avons besoin de Date Dot, obtenez-en plus. Comme vous pouvez le voir, nous avons à nouveau le mois de mai, mais maintenant il est affiché dynamiquement à l'aide de JavaScript. Très bien, passons à autre chose et affichons la date. Pour ce qui est de sélectionner le paragraphe qui affiche la date, sélectionnons-le à l' aide de la méthode QuerySelector Ensuite, pour modifier le contenu de l'élément, nous avons besoin de la propriété innerHTML Je vais maintenant utiliser l'une des méthodes appelées « chaîne de date », qui renvoie la date actuelle dans un format lisible. Nous avons donc besoin ici d'une chaîne de date point à date. Si je supprime le contenu du code HTML, nous obtiendrons exactement le même résultat sur la page. Très bien, nous avons terminé la première partie du calendrier Nous avons réussi à afficher la bouche et la date de manière dynamique à l'aide de JavaScript. Il est maintenant temps de passer à l'affichage des jours. Nous ne toucherons pas aux jours de la semaine, ils seront affichés HTML car je pense que c'est suffisant en HTML car je pense que c'est suffisant pour afficher les jours que je vais utiliser pour la boucle Tout d'abord, créons une variable. Jours. Je vais utiliser le mot clé let. Et faisons-en une chaîne vide. Je vais donc parcourir les nombres de 1 à 31 et les afficher tant que contenu de l'élément div des jours Utilisons for-loop. Nous devons créer ici la variable I, qui sera le compteur. Alors nous avons besoin d'une condition. Je dois être inférieur ou égal à un. Ensuite, nous avons besoin de I plus l'opérateur d'incrémentation. Comme le contenu. Je vais instituer des jours suivis de l'opérateur plus égal. En fait, cet opérateur fait exactement la même chose que l'expression suivante. Par exemple, x plus est égal à dix signifie que x est égal à x plus dix Nous devons donc maintenant créer un élément div et transmettre la variable I comme contenu de celui-ci Ouvrons les backticks et insérons la balise u div. Son contenu sera la variable I. Enfin, nous devons modifier le contenu de l'élément div du wrapper Je vais créer une nouvelle variable, appelons-la Mark days. Sélectionnez ensuite l'élément div days à l'aide de la méthode QuerySelector. Et puis en bas, modifiez le contenu de cette variable aide de la propriété innerHTML Nous avons donc besoin d' un point de texte HTML interne, qui doit être égal à des jours. Comme vous pouvez le voir, nous avons ici les chiffres de 1 à 31. Si je vais dans le fichier index.html et que je supprime tout le contenu d'ici, rien ne changera, je recevrai à nouveau des chiffres de 1 à 321. Ainsi, à partir de maintenant, le contenu de l'élément div days est affiché à partir de JavaScript En fait, nous devons faire deux choses ici. Nous ne voyons plus les jours suivants précédents et les chiffres ne correspondent pas non plus aux jours de la semaine En outre, nous définissons ici le nombre de jours d'un mois comme 31. Mais comme vous le savez, certaines des messes ont celles d'aujourd'hui et d'autres n'en ont qu'une. Ainsi, au lieu d'utiliser ici uniquement 321, nous devons définir la date de fin pour chaque mois. Créons une nouvelle variable. Je vais l'appeler le dernier jour. Ensuite, créons un objet de date et définissons l' année et le mois en cours. Nous devons donc utiliser ici la méthode pour obtenir une année complète. Nous avons besoin de dates dot get full year, puis de la méthode date dot get. La première méthode nous donnera l'année en cours. Quant à la seconde méthode, elle nous donnera le montage actuel. Pour ce qui est du jour, je vais le régler sur, disons, un. Exécutons maintenant cette variable dans le navigateur et voyons ce que nous avons obtenu. Comme vous pouvez le constater, nous sommes ici au 1er mai 2020. Maintenant, changeons un en zéro et vérifions le résultat. Dans ce cas, nous sommes arrivés le 30 avril 2020. Ainsi, lorsque vous spécifiez le jour comme zéro, vous obtenez le dernier jour du mois précédent. Dans notre cas, nous devons obtenir le dernier jour du mois en cours. Par conséquent, il suffit d'en ajouter un à la fonction get. Comme vous pouvez le constater, nous avons ici le dernier jour du mois en cours. Ainsi, au lieu d'utiliser ici le numéro codé en dur, nous pouvons simplement insérer le dernier jour. Mais pour le moment, nous ne pouvons pas le faire car la variable du dernier jour renvoie la date et l'heure complètes. Pour obtenir le numéro du jour, nous devons utiliser la méthode Get date. À présent, il ne renvoie qu'une seule donnée au lieu d'autres. Et maintenant, nous pouvons changer 31 en dernier jour dans la boucle. Rien n'est donc changé ici. Nous avons le même résultat. Pour prouver que cela fonctionne correctement, je vais régler le mois en cours sur, disons, juin, où nous avons 30 jours pour changer le mois en cours Nous devons utiliser l'une des méthodes appelées set mouth. Nous avons donc besoin d'une bouche à point de date avec une valeur de cinq. Maintenant, nous voyons le mois de juin et le nombre de jours signifie que tout fonctionne bien jusqu'à présent. Débarrassons-nous de cette ligne de code. Une fois que nous avons affiché les jours de la bouche, je vais maintenant m'occuper des jours du mois précédent. Si nous examinons le projet terminé, vous verrez que nous affichons quelques jours par rapport au mois précédent. Pour y parvenir, nous devons donc tout d'abord deviner le nombre de jours à compter de la bouche précédente. Je vais utiliser une petite astuce. Allons-y et changeons la date actuelle, faisons-en le premier jour du mois. Nous avons donc besoin d'une date, d'une date définie par des points. Nous devons en faire un. Après cela, je vais utiliser l'une des méthodes appelées get day. Elle renvoie l'index. Désormais, en fonction des jours de la semaine, ces indices sont basés sur zéro Par exemple, le dimanche a l'indice zéro, lundi un, etc. Passons donc en revue la console. Date, point = jour. Comme vous le voyez, nous en avons cinq ici. Le premier jour de mai devrait donc être le vendredi, car le vendredi a un indice numéro cinq. Cela signifie que le premier jour de mai doit être placé en dessous du vendredi. Maintenant, nous pouvons facilement savoir combien de jours devons-nous afficher par rapport au mois précédent ? Ça va être cinq heures. Très bien, nous devons donc créer une autre boucle for Insérons ici la variable x, qui va être le compteur Nous devons maintenant définir le nombre d'itérations. Comme nous l'avons dit dans ce cas, nous devons afficher cinq jours à partir du mois précédent. Au total, nous aurons donc cinq itérations. Et à chaque itération, nous créerons un nouveau div, qui sera le contenu de l'élément div d'aujourd'hui La valeur initiale du compteur x sera donc l'indice du premier jour du mois. Créons une nouvelle variable dans laquelle nous allons stocker le numéro d'index du premier jour du mois. C'est ce qu'on appelle un indice variable du premier jour. Il doit être égal à la date, point get date. Affectez ensuite cette variable au compteur x. Nous devons maintenant définir la condition x qui doit être supérieure à zéro. Et à chaque itération, x doit diminuer d'un Nous avons donc besoin de x moins moins. Alors laisse-moi t'expliquer encore une fois. Dans ce cas, l'indice du premier jour du mois est cinq car il s'agit du vendredi. La valeur initiale de la variable x sera cinq. À chaque itération, il diminuera un jusqu'à ce qu'il devienne zéro Au total, nous aurons donc cinq itérations. À chaque itération, nous allons créer un nouvel élément div pour les dates du mois précédent. Nous avons besoin ici de ce plus égal. Ensuite, nous devons rouvrir les cases et insérer une balise div avec la date précédente du cours, je suis en cours de préparation Insérez ensuite votre signe du dollar avec des bretelles bouclées. Nous devons maintenant définir le contenu du développement. Tout d'abord, définissons le dernier jour du mois précédent. Je vais utiliser la même technique que celle que nous avons utilisée dans le cas précédent pour créer une nouvelle variable. Je vais appeler ça « préparation » le jour dernier, je suis là, le jour précédent. Ensuite, je vais récupérer cette valeur à partir d'ici. Donc, pour obtenir le dernier jour du mois précédent, suffit de se débarrasser de plus un car cela nous donne le dernier jour du mois en cours. Donc, si je regarde la console avant la dernière journée, nous aurons la troisième, soit le dernier jour d'avril. Très bien, donc pour créer le contenu de chaque élément div, nous devons soustraire x à la variable du dernier jour précédent Comme vous le voyez, nous avons compté des jours depuis l'embouchure précédente, mais ce n'est pas tout à fait exact, car nous en avons 29 comme dernier jour du mois. Ça devrait être 30. Il nous suffit donc d'en ajouter un à l'intérieur. Le problème est donc réglé. Bien, maintenant que nous en avons terminé avec les jours précédents, passons à autre chose et occupons-nous des jours du mois prochain Dans le cas des jours suivants, nous devons définir le numéro d'indice du dernier jour de l'embouchure en cours. Créons donc une nouvelle variable et appelons-la index du dernier jour. Ensuite, récupérez ce code car il nous donne le dernier jour du mois en cours. Dans ce cas, au lieu de la méthode getState, nous devons utiliser getState car elle renverra le numéro d'index Passons donc en revue la console pendant qu'ils indexent. Nous n'en avons aucun. Et cela signifie que le dernier jour est le dimanche. Et nous devons afficher six jours à partir du mois suivant. Pour définir le nombre de jours du mois suivant, il faut donc soustraire 27, qui est le nombre de jours dans une semaine, l'indice du dernier jour Nous devons également en soustraire un car indices des jours de la semaine sont Créons donc une nouvelle variable. Je vais l'appeler dans les prochains jours. Et il doit être égal à sept moins l' indice du dernier jour moins un. Ensuite, nous avons à nouveau besoin d'une boucle pour. Dans ce cas, je vais utiliser j comme compteur, qui doit être égal à un, car chaque mois commence par une condition valide : j est inférieur ou égal aux jours suivants alors que nous avons besoin de j plus plus. Ainsi, à chaque itération, nous devons créer nouveaux éléments div et les transmettre en tant que contenu de l'élément div actuel Nous avons besoin de jours plus égaux. Ouvrez ensuite les ticks et passez ici la balise div avec une classe. Date suivante En tant que contenu de la balise div, nous devons insérer la variable J. Enfin, modifions le contenu des jours de bouche Alors on y va. Nous avons ici quelques jours à compter du mois prochain, non ? La prochaine chose que je vais faire est donc de mettre en évidence la date actuelle. heure actuelle Il n'est plus surligné. Pour ce faire, nous devons utiliser une instruction if comme condition. Nous devons comparer le premier compteur à l'état actuel. Une fois qu'ils correspondront, nous devrons ajouter à la classe d'exclusion d'aujourd'hui. Nous avons besoin que je triple la valeur de la nouvelle date point get date. En outre, nous devons comparer la bouche à celle du mois en cours. Nous avons donc besoin ici d' une logique et d'un opérateur. Et nous devons insérer les données point get mount, triple égal à la nouvelle date, point get marr. Si cette condition est vraie, je vais copier cette ligne de code et l'ajouter à la classe de développement aujourd'hui. Quant à cet élément div, il doit être placé dans l'instruction else. Comme vous le voyez, la date actuelle est surlignée. Très bien, donc la prochaine chose que je vais faire est de faire fonctionner les flèches Une fois que nous avons cliqué sur la flèche gauche, nous devons accéder à l'embouchure précédente. En ce qui concerne la flèche droite, nous devrions passer à la carte suivante. Je vais associer aux deux flèches des écouteurs d' événements avec des événements de clic Je vais donc sélectionner la flèche gauche avec la méthode QuerySelector plutôt que de l' associer à l'écouteur d'événements, où nous devons spécifier le type des Ça va être un clic. Et nous devons également transmettre votre fonction de rappel. Dupliquons-le et changeons le nom de classe dont nous avons besoin ici. Suivant. Pour revenir au mois précédent, nous avons besoin d'une bouche à point de date. Ensuite, nous devons en soustraire un à la bouche actuelle. Nous avons donc besoin d'un point de données pour obtenir Mouth moins un. C'est pour le mois prochain. Nous avons besoin de la même expression, mais avec plus un. Donc, si nous cliquons sur les flèches, elles ne fonctionneront pas. La raison en est que nous devons afficher le calendrier avec une bouche OnClick appropriée Nous devons donc créer une fonction dans laquelle nous transmettons l'intégralité du code. Ensuite, nous devons l'appeler une fois à l'échelle mondiale. Et nous devons également l'appeler lorsque nous cliquons sur les flèches. Allons-y et créons une fonction. Je vais appeler ça un calendrier aléatoire. Reprenons le code complet à l'exception de cette ligne de code. Et collez-le dans la fonction que je vais appeler sur la portée globale. Et aussi à l'intérieur de ces fonctions de rappel. Très bien, donc si je clique sur les flèches, elles fonctionneront bien. Comme vous le voyez, nous passons au mois précédent et au mois suivant. OK, donc nous avons presque terminé. En fait, je vois que nous avons un petit problème. La date actuelle n'est pas correcte car, comme vous vous en souvenez, nous avons fixé la date à une et nous devons remplacer nous avons fixé la date à une et nous devons remplacer ces dates par une nouvelle date. Alors maintenant, le problème est résolu. Et enfin, nous avons terminé 15. Projet 12 - Compte à rebours: Très bien, il est maintenant temps de commencer à créer notre prochain projet Dans cette vidéo, nous allons créer une application de compte à rebours. Avant de commencer à construire le projet, je vais en parcourir huit et les décrire. Comme vous pouvez le voir, nous avons ici un fond noir en plein écran Au centre de la page. Nous avons deux éléments. Je suis dans le titre qui dit que quelque chose va bientôt arriver. Ensuite, il est suivi du compte à rebours, qui fonctionne automatiquement. Il se met à jour toutes les secondes. Nous en avons ici pour différentes sections. Ces sections comportent quatre jours, heures, minutes et secondes. Ensuite, en bas, nous avons un bouton de réinitialisation. Si je clique dessus, le compte à rebours sera réinitialisé et toutes les valeurs deviendront nulles. Très bien, alors c'est ça. Ce que nous allons construire. Le projet va être simple, mais j'espère que vous vous amuserez. J'ai créé un nouveau dossier sur le bureau appelé Count Down, qui est actuellement vide. Allons-y, ouvrons-le dans le code VS et configurons nos fichiers de travail. Dans l'ensemble, nous aurons donc trois fichiers différents pour HTML, CSS et JavaScript. Allons-y et créons-les. Appelons le fichier HTML index.html. Ensuite, nous aurons style.css et les scripts point js. Ensuite, je vais accéder au fichier index.html et créer le document HTML de base. Pour cela, je vais utiliser m. Et plaçons ici un point d'exclamation et appuyons sur Entrée ou sur Tab Alors on y va. Je vais changer le titre. Nous allons insérer votre compte à rebours. Après ça. Lions fichiers CSS et JavaScript au code HTML. Ouvrons la balise de lien. Spécifiez ici le chemin du fichier CSS. En ce qui concerne le code JavaScript, je vais ouvrir la balise de script juste au-dessus de la balise de fermeture du corps, puis spécifier la partie du fichier JavaScript et les attributs source. Très bien, les trois fichiers sont connectés et je vais maintenant exécuter le projet sur le navigateur Pour cela, utilisons l'un des packages de code VS appelé serveur en direct, qui lui permet d' exécuter le projet en direct sur le navigateur et d'apporter les modifications et les mises à jour sans actualiser la page. À chaque fois, je vous recommande d'utiliser ces packages. Très bien, le projet est donc opérationnel. Enfin, je vais placer l'éditeur et le navigateur côte à côte, comme ça Et lancez-vous. Tout d'abord, créons le balisage HTML, qui sera le plus simple Je vais ouvrir la balise div, qui sera le conteneur qui doit être suivi du wrapper du compte à rebours Il inclura les trois éléments, je veux dire, les éléments de titre, les textes seront bientôt disponibles. Ensuite, nous aurons un div vide avec le compte à rebours des classes, dans lequel nous insérerons le contenu de JavaScript Enfin, nous aurons un bouton avec la réinitialisation de la classe et la réinitialisation du texte. Très bien, nous avons donc ici le titre et le bouton. heure actuelle, l'élément div du compte rebours n'est pas affiché ici car il est vide. Alors maintenant je vais passer à autre chose et commencer à écrire. Javascript va créer un compte à rebours et le faire fonctionner. Ensuite, je m' occuperai du design. Passons au fichier script.js. Et tout d'abord, sélectionnons le compte rebours et stockons-le dans la variable. Créons une variable appelée compte rebours et sélectionnons l'élément div Utilisation de la méthode de sélection de requêtes. Pour créer le compte à rebours, nous devons manipuler les objets de date JavaScript. Par défaut, JavaScript utilise le fuseau horaire du navigateur et affiche une date sous forme de chaîne de texte. Allons-y, créons un objet de date et vérifions à quoi il ressemble. Je vais créer une variable. Disons que c'est une date. Ainsi, pour créer un objet de date, nous devons utiliser la nouvelle fonction de construction de date Laissons la date sur la console. Donc, si j'inspecte la page et que je vérifie l'onglet console, vous trouverez ici la date et l' heure actuelles suivies du fuseau horaire. Très bien, donc en général, l'objet de date utilise deux méthodes différentes qui nous permettent d' obtenir le jour, bouche, l'heure, etc. Je ne vais pas les passer en revue. Nous utiliserons uniquement la nouvelle fonction de construction de date. Ainsi, en plus d'obtenir la date actuelle, vous pouvez spécifier manuellement la date future ou passée. Par exemple, on peut faire passer ici l'année, disons 2020 plutôt qu'un mois. Mais vous devez vous rappeler que vous devez spécifier un mois en utilisant des indices. Les mois ont un indice basé sur zéro. Donc, si je veux passer l'année, disons le mois d'août, qui est le huitième mois de l'année que je dois insérer ici. Sept. Vient ensuite le jour du mois. Passons 15 ans. Ensuite, vous pouvez spécifier l'heure. Je veux dire, des heures, des minutes et des secondes. Passons ici. 12 et zéros comme minutes et secondes. D'accord ? Donc, si nous vérifions la console, nous obtiendrons la date que nous venons de spécifier ici. Très bien, supposons que cette date soit la date limite et que nous devions compter à rebours à partir de cette date En fait, je tiens à noter que si vous regardez cette vidéo dans le futur, cette date est bien que passée, alors vous devez entrer la date du futur. Je vais changer le nom de la variable. Fixons la date limite et éliminons également le fichier console.log. En outre, nous devons définir l'heure actuelle. Créons donc une nouvelle variable. Je vais l'appeler actuel, puis lui attribuer un nouveau constructeur de date Très bien, donc l'heure qui devrait s'afficher sur la page sera la différence entre la date limite et l'heure actuelle Ajoutons donc d'abord, vérifiez la différence dans la console. Je vais créer une variable, appelons-la div J'ai fait la différence. Elle doit être égale à la date limite moins la date actuelle. Puis autour de la variable vers la console. Comme vous pouvez le constater, nous en avons ici un nombre étrange et énorme. En fait, il s'agit de la durée, la différence entre la date limite et l'heure actuelle affichée en millisecondes Nous allons utiliser ce nombre de millisecondes pour définir séparément les jours, heures, minutes et secondes restants heures, minutes Allons-y, créons une variable et appelons-la jours. Donc, pour obtenir le nombre de jours restants, nous devons diviser la différence par le nombre de millisecondes, en 24 h. Nous avons donc besoin de la différence divisée par des parenthèses ouvertes. différence divisée par Et nous devons multiplier les milliers de millisecondes par 60 s. Ensuite, nous avons besoin de 60 minutes et enfin de 24 h. Ensuite, je vais exécuter cette variable Comme vous pouvez le constater, nous avons obtenu ici le nombre de jours, mais avec quelques décimales Nous n'avons pas besoin de ces décimales car nous devons simplement afficher le nombre de jours Nous devons donc arrondir le chiffre vers le bas. Et pour cela, nous pouvons utiliser l'une des méthodes JavaScript appelée Math.floor. Comme vous pouvez le voir, nous avons ici juste le nombre de jours sans décimales Ensuite, nous devons définir les heures, minutes et les secondes de la même manière. Passons aux heures. Je vais utiliser à nouveau la méthode Math.floor. Donc, dans notre cas, nous devons diviser la différence par le produit des millisecondes, des secondes Ensuite, nous devons récupérer le montant restant de cette opération. Nous devons donc utiliser l'un des opérateurs arithmétiques appelé module, ou parfois le reste L'opérateur de module renvoie donc un reste de division exprimé par le signe de pourcentage. Nous en avons besoin ici. Différence divisée par le produit de mille millisecondes, 60 s et 60 min. Ensuite, nous devons utiliser le module suivi du 24, qui est le nombre d'heures Encore une fois, cette opération nous donnera les heures restantes. En d'autres termes, après cette opération, le nombre d'heures sera toujours inférieur à 24. Si je vérifie les heures sur la console, nous aurons le nombre d'heures restantes. Très bien, passons au procès-verbal. Créez une nouvelle variable. Appelez cela minutes, puis utilisez à nouveau la méthode Math.floor. Donc, en cas de minutes, nous devons diviser la différence par le produit des millisecondes et des secondes . Ensuite, nous avons besoin du module 60, qui est le Nous avons donc besoin de la différence divisée par le produit de mille millisecondes Module 60. OK, allons-y et définissons les secondes de la même manière. Créez une nouvelle variable, utilisez plutôt Math.floor. Donc, en cas de secondes, nous devons diviser la différence par mille millisecondes Ensuite, nous avons besoin du module 60, qui correspond à quelques secondes. Donc, si je vérifie les secondes dans la console, commence à actualiser la page. Vous verrez ici comment le nombre de secondes est mis à jour. Très bien, les quatre montants sont définis. Et maintenant, nous devons les afficher sur la page pour être plus précis et prendre en compte le div, que nous avons créé dans le fichier HTML puis sélectionné ici Je vais donc passer quelques éléments de div dans le div du compte à rebours. Puis attachée à chaque élément div, la variable appropriée parmi ces quatre variables Nous devons donc modifier profondément le contenu du compte à rebours. Pour cela, je vais utiliser l'une des propriétés du dôme appelée innerHTML Cela nous permet de définir le contenu HTML d'un élément. Attachons donc pour compter à rebours la propriété HTML interne. Ouvrez ensuite les ticks rétroactifs car nous devons interpoler les variables avec les balises HTML Nous en avons donc besoin ici pour les éléments div. Ensuite, dans le premier, je vais passer des jours. Nous avons besoin du signe du dollar, des accolades et du nom variable des jours Ensuite, nous aurons le nôtre. Minutes et secondes. D'accord ? Comme vous pouvez le voir, nous avons ici les quatre valeurs, jours, les heures, les minutes et les secondes. À l'heure actuelle, ils sont en mode statique. Ils ne sont pas mis à jour automatiquement. Si je recharge la page, le nombre de secondes sera mis à jour Nous devons donc dynamiser le compte à rebours. Il devrait se mettre à jour automatiquement à chaque seconde. Pour ce faire, nous devons utiliser l'une des méthodes JavaScript appelée set interval. La méthode set interval exécute la fonction à des intervalles spécifiés en millisecondes Très bien, créons une variable et appelons-la intervalle. Attribuez-lui ensuite une méthode d'intervalle définie. Cette méthode utilise deux arguments. La première sera la fonction de rappel, qui sera exécutée à intervalles réguliers Nous devons maintenant vous transmettre la fonction , l'intégralité de ce code. Récupérez-le et collez-le dans la fonction. Le deuxième argument sera le temps dont nous avons besoin pour exécuter la fonction après chaque seconde. Je vais donc passer ici en milliers de millisecondes. Comme vous pouvez le constater, le compte à rebours fonctionne et se met à jour après chaque segment. Très bien, nous avons donc réussi à créer la partie principale des projets Nous devons personnaliser un peu les fonctionnalités. Mais pour rendre le travail en cours plus intéressant, prenons soin de la conception Une fois que nous aurons démarré le projet, nous ajouterons quelques éléments au compte à rebours à partir de JavaScript. D'accord, ouvrons le fichier style.css. Et tout d'abord, créez des styles réinitialisés et communs. Je vais sélectionner chaque élément à l'aide d'un astérisque. Débarrassons-nous ensuite de la marge et du rembourrage par défaut. Je vais les mettre tous les deux à zéro. Et utilisez également une borderbox de la taille d'une boîte. En outre, je souhaite modifier la famille de police pour tous les éléments. Je vais utiliser l'une des polices Google. Allons donc sur le site Web de Google Fonts et recherchons la police appelée sous le A2 Nous allons sélectionner ces styles. Ensuite, saisissez le lien et collez-le dans l'élément principal. Ensuite, je vais définir la famille de polices pour chaque élément afin de suivre le cours de dA2 Très bien, comme vous pouvez le voir, ces styles sont appliqués En fait, je vais utiliser la RAM comme unité de mesure tout au long de ce projet. C'est ce que nous faisons dans presque tous les tutoriels car je pense que c'est très pratique et facile à utiliser. heure actuelle Un rem est égal à 16 pixels, car la taille de police du code HTML est égale à 16 pixels. Par défaut, je souhaite convertir une RAM en dix pixels afin de réduire la taille de police des éléments HTML. Mettons-le à 62,5 %. Supposons donc que la taille des éléments a diminué. Et maintenant, 1 g équivaut à dix pixels. Passons à autre chose et retirons le conteneur. Je vais l'étendre à la page entière. Sélectionnons-le et définissons la largeur et la hauteur. Je vais régler la hauteur à 200  %. Faisons en sorte qu'il représente 100 % de la fenêtre d'affichage. Et enfin, changeons la couleur de fond. Je vais utiliser votre couleur 17181. OK, ensuite, sélectionnons l'emballage du compte à rebours. Je vais le placer au centre de la page. Je veux dire, pour le centrer verticalement. Donc, tout d'abord, une largeur définie rend la présentation plus difficile. Ensuite, je vais définir sa position sur absolue. Ensuite, je vais attribuer position relative du conteneur car je veux positionner car je veux emballage du compte à rebours en fonction du conteneur Définissez ensuite la propriété supérieure. Réglons-le à 15 %. Placez ensuite les textes au centre en utilisant le centre d' alignement du texte et modifiez la couleur Faites-en le D. Très bien, la position de l'emballage du compte à rebours modifiée et je vais maintenant personnaliser les éléments individuels Commençons par un titre. Tout d'abord, je vais augmenter la taille de la police. Faisons-en huit RAM. Modifiez ensuite l'épaisseur de la police, allégez-la, en lui attribuant 400. Ensuite, je vais transformer le texte en majuscules. Créez ensuite de l'espace en bas en utilisant la marge inférieure à huit Ran. Enfin, je vais utiliser l' ombre du texte afin de créer un effet d'ombre. Passons ici 0,5 à 0,8 RAM. Et la valeur RGBA avec une couleur noire et une opacité de 0,5. Très bien, donc le titre semble bon. Passons à autre chose et occupons-nous du compte à rebours. Je vais placer ces chiffres horizontalement dans une rangée à l'aide de Flexbox. Et placez-les également au centre en utilisant justify-content OK, c'est tout pour le compte à rebours. Je vais maintenant personnaliser un élément div que nous avons créé en JavaScript Je veux dire que l'enfant fait certains éléments du compte à rebours. Tout d'abord, définissons la largeur et la hauteur. Je vais les mettre tous les deux sur 13 rampes. Je vais maintenant définir l'arrière-plan. En fait, je veux utiliser un dégradé linéaire parce qu'avec le dégradé linéaire, nous pourrons diviser l'arrière-plan en deux parties différentes. Donc, tout d'abord, je vais changer de direction. Faisons en sorte qu'il convienne au bas. Cela signifie que la transition se fera du haut vers le bas. Utilisez ensuite la valeur RGBA. Faisons une pause ici, 601-50-8508 et l'opacité 0,9. Et nous avons également besoin ici de 50 %. Ensuite, nous avons besoin d'une autre valeur RGBA entre les nombres 909-90-3903 Et nous devons te placer à zéro. Comme vous le voyez maintenant, l'arrière-plan est divisé en deux parties différentes. Ensuite, je vais créer de l'espace en utilisant la marge. Mettons-le à zéro en haut. Ensuite, pour la RAM sur le côté droit, 12 en bas et quatre sur le côté gauche. Après cela, augmentons la taille de la police, faisons-en sept RAM. Et modifiez également l'épaisseur de la police , faites-la 400. OK, ensuite je vais centrer les chiffres à l'intérieur des cases. Et pour cela, utilisons Flexbox. Nous avons besoin d'une flexibilité d'affichage, centre de contenu de justification et d'un centre d'alignement des éléments. Enfin, je vais créer un effet d'ombre. Utilisons box shadow avec les valeurs 0,8 RAM 2,5 RAM. Et puis la valeur RGBA avec une couleur noire et une opacité Hein ? Donc, étape par étape, le projet s'améliore de plus en plus. La prochaine chose que je veux faire est d'afficher une petite ligne au centre de chaque boîte ou carte, quelle qu'elle soit. Je vais créer une ligne en utilisant des pseudo-éléments antérieurs. Nous allons donc sélectionner le compte à rebours def, suivi des pseudo-éléments précédents. Tout d'abord, définissons le contenu, rendons-le vide. Réglez ensuite la position sur absolue. Je vais positionner l'élément fonction de son élément parent. Attribuons donc au compte à rebours une position profonde relative. Définissons ensuite la largeur et la hauteur. Je vais me fixer à 200 %. Quant à la hauteur, faisons en sorte qu'elle soit de 0,24 run. Et définissez également la couleur de fond. Faites-le 17181. OK, on voit que nous avons ici la ligne au centre des cases. Allons-y et passons à l'étape suivante. Jetons un coup d'œil au projet terminé. Comme vous pouvez le voir, en dessous de chaque case se trouve le texte approprié. Je suis en jours, heures, minutes et secondes. Je vais les ajouter en utilisant la pseudo-classe after. Nous pouvons donc sélectionner séparément chaque élément div avec le sélecteur F child et définir le contenu Mais je ne vais pas le faire. Je vais utiliser une petite astuce. Passons au fichier script.js et attribuons à chaque développement l'attribut appelé contenu des données. Ensuite, comme valeurs, insérons ici les jours, les heures. Ensuite, nous avons les minutes et les secondes. Revenez ensuite au fichier CSS et sélectionnez compte à rebours div avec les pseudo-éléments après Définissons le contenu. Donc, comme valeur de la propriété de contenu, je vais transmettre ici la fonction appelée attribute, qui est exprimée sous forme de TTR. Et nous devons transmettre ici les attributs du contenu des données. Comme vous pouvez le constater, les valeurs du texte apparaissent sur la page. À l'heure actuelle, ils sont deux plus grands. Alors occupons-nous de ça. Changeons la taille de la police, faisons-la pointer vers la RAM plutôt que de régler le poids de la police sur 400. Définissez ensuite la position sur absolue et définissez la propriété inférieure. Faites moins six tours. Très bien, donc le dernier élément que je souhaite personnaliser est un bouton. Nous allons donc le sélectionner. Tout d'abord, définissons la largeur et la hauteur. Je vais me mettre à 220 pour courir. Quant à la hauteur, faisons-la six ronds. Supprime ensuite la bordure par défaut en utilisant Border None. Et changez la couleur de fond. Je vais utiliser vos couleurs A5 à A12. Ensuite, prenons soin des polices. Je vais régler la taille de la police à 2,2 RAM plutôt que de faire 400. Créez un espace entre les lettres. Faites-le pointer vers la RAM. Transformez également le texte en majuscules. Changez ensuite la couleur du texte, éclaircissez-le en utilisant la couleur, par exemple. Ensuite, je vais créer une ombre pour le texte et pour le bouton lui-même. Utilisons donc l'ombre du texte, où la valeur est 0,3, 0,5 RAM. Et la valeur RGBA avec une couleur noire et une opacité de 0,5 Dupliquons cette ligne de code. Changez le texte en Box. De plus, au lieu de 0,5 rampe, je vais utiliser 0,6 wrap. Enfin, éliminons le contour par défaut. Faites en sorte qu'il n'en soit rien Très bien, c'est tout ce qu' il faut savoir sur le design. Le projet a l'air plutôt sympa. Et maintenant, je vais revenir au fichier script.js et ajouter quelques éléments supplémentaires à la fonctionnalité du compte à rebours. Ainsi, une fois que le nombre du compte à rebours devient inférieur à dix, un seul chiffre sera affiché Ce n'est pas très bien. Je vais donc réussir à afficher toujours deux chiffres quoi qu'il arrive. Je vais donc utiliser les déclarations conditionnelles. Nous devons vérifier si la durée des jours est égale à un. Si tel est le cas, nous devons afficher les jours avec zéro. Et si c'est faux, alors nous ne devons afficher que les jours. En fait, j'ai utilisé ici la longueur de la propriété comprise dans le nombre, mais ce n'est pas correct. La propriété de longueur fonctionnera correctement avec les valeurs de cette chaîne. Nous devons donc convertir ces nombres en valeurs de chaîne. Il y a plusieurs façons de le faire. Je vais ajouter à chaque nombre et à chaque chaîne vide. Dans ce cas, les valeurs seront concaténées et nous obtiendrons les Très bien, utilisons ce conditionnel pour le reste des chiffres. Je vais le copier et le coller. Ici, nous avons besoin d'heures plutôt que de minutes. Enfin, nous avons besoin de quelques secondes. Très bien, maintenant le problème est résolu. Nous n'aurons plus numéros à un chiffre sur le compte à rebours. La prochaine chose que je voudrais faire, c'est qu'une fois le temps écoulé, nous devions modifier le contenu du compte rebours à partir de ces chiffres dans certains textes. Nous avons donc besoin de l'instruction IF comme condition, nous devons vérifier si la différence est inférieure à zéro. Donc, si c'est vrai, cela signifie que le temps est écoulé et que nous devons modifier le contenu du compte à rebours. Tout d'abord, nous devons effacer l'intervalle. Je veux dire, pour arrêter la fonction d'intervalle définie. Pour cela, nous devons utiliser l'une des méthodes appelées intervalle clair. Et nous devons passer un intervalle variable de rendement. Ensuite, je vais modifier le contenu du compte à rebours. Nous avons donc besoin du code HTML interne du compte à rebours. Utilisons vos éléments de titre H1 avec certains textes. Disons. Nous y voilà. OK, donc pour vérifier comment cela fonctionne, je vais régler la date à l'heure actuelle. Alors on y va. Huit œuvres. Amende. Très bien, nous avons presque terminé. La seule chose que je vais faire est de faire fonctionner le bouton de réinitialisation. Une fois que j'ai cliqué dessus, le compte à rebours devrait être réinitialisé et ces chiffres devraient être nuls Je vais donc sélectionner le bouton de réinitialisation en utilisant la méthode QuerySelector Ensuite, je vais m'attacher à un écouteur d' événements en utilisant la méthode d' ajout d'un écouteur d'événements Il faut deux arguments. Le premier sera l'événement de clic. Pour ce qui est de la seconde, je vais passer ici une fonction de flèche, qui sera exécutée une fois que nous aurons cliqué sur le bouton de réinitialisation. Tout d'abord, nous devons arrêter de définir la fonction d'intervalle. Je veux dire que nous devons utiliser la méthode des intervalles clairs. Passons ici à l'intervalle. Je vais maintenant sélectionner tous les éléments div dont nous avons besoin pour les parcourir et modifier le contenu Nous devons le mettre à zéro. Je vais donc créer une variable, appelons-la divs. Sélectionnez ensuite tous les éléments du div à l'intérieur du compte à rebours. Nous avons donc besoin d'un sélecteur de requêtes pour toutes les méthodes. Et nous devons spécifier ici le compte à rebours des classes suivi du div Comme nous l'avons dit, nous devons donc examiner ces éléments div et modifier leur contenu Je vais donc utiliser l'une des méthodes d'aide au tableau appelées pour chacune Pour chaque méthode, il faut un argument. Ce sera la fonction de rappel, qui prendra un paramètre et ce sera l'élément actuel de la liste Appelons ça div. Nous devons donc modifier le contenu de chaque div Utilisons innerHTML et mettons le contenu à zéro. Donc si je clique sur le bouton, le compte à rebours sera réinitialisé 16. Projet 13 - Carte de profil: OK, il est temps de commencer à construire notre prochain projet. Dans cette vidéo, nous allons créer une carte de profil. Le projet sera simple avec un design moderne et de jolis effets. Je pense donc que vous allez aimer le construire. Très bien, avant de commencer à construire le projet, jetons un bref coup d'œil Comme vous pouvez le constater, nous avons une petite carte au centre de la page. Il contient des informations sur la personne. J'y suis, l'image, le nom du fichier et une description. Et en bas, nous avons un bouton. Si je clique dessus, le bouton changera forme, de position et de contenu. Trois cases différentes apparaîtront également avec les coordonnées de la personne sur les réseaux sociaux. Si je clique à nouveau sur le bouton, nous reviendrons à l'état précédent de la voiture. Voyons donc ce que nous allons créer. J'espère que ça va être intéressant car vous allez apprendre comment créer de tels effets. OK, j'ai donc créé un nouveau dossier sur le bureau appelé card. Il contient un dossier pour les images. Je vais ouvrir ce dossier dans VS Code, puis créer trois fichiers différents pour HTML, CSS et JavaScript. Le premier sera index.html. Ensuite, nous aurons style.css et les scripts point js. Allons-y et créons le document HTML de base. Pour ça. Je vais l'utiliser Si je mets ici un point d' exclamation puis que j'appuie sur Entrée ou sur Tab, nous obtiendrons la structure de base du document HTML Allons-y et changeons le titre. Je vais mettre ici la carte de contact. Ensuite, relions les trois fichiers. Je vais ouvrir la balise de lien dans l'élément d'en-tête du fichier CSS. Mettons ici le nom du fichier. Ensuite, nous devons ouvrir la balise de script juste au-dessus de la balise body de fermeture. Et dans l'attribut source, nous devons spécifier le chemin du fichier. Bon, voyons, les trois fichiers sont connectés. Ensuite, je vais ajouter quelques liens supplémentaires. Tout au long du projet. Je vais utiliser les icônes Font Awesome et Google Forms. Allons-y et recherchons Font Awesome, CDN, js. Accédez ensuite au premier lien, sélectionnez CSS et récupérez le premier lien à partir d'ici. Ensuite, je dois ouvrir la balise link et mettre le lien comme valeur de l'attribut de référence h. Très bien, c'est tout en ce qui concerne les icônes Font Awesome. Allons-y et introduisons le lien vers les polices Google. Je vais faire une recherche sur Google Fonts. Donc, tout au long de ce tutoriel, je vais utiliser une police appelée doses. Personnalisons-le car nous utiliserons des épaisseurs de police différentes. Ensuite, saisissez le lien et collez-le dans l'élément principal. Très bien, il est maintenant temps d'exécuter le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé Live Server. Cela nous permet d'exécuter le projet dans le navigateur et d' effectuer des mises à jour sans actualiser la page. Vous pouvez donc procéder à l' installation de ce package. OK, Enfin, plaçons l' éditeur et le navigateur côte à côte Comme ça, et lancez-vous. Donc, dans un premier temps, je vais commencer par le balisage HTML. Nous allons préparer la structure HTML complète du projet, puis nous y ajouterons du CSS et du JavaScript. Allons-y et ouvrons la balise div, qui sera le conteneur de l'ensemble du contenu Ensuite, à l'intérieur du conteneur, je vais créer la carte elle-même. La voiture sera donc composée de plusieurs pièces différentes. Nous aurons une carte, une fiche biographique, des contacts sur les réseaux sociaux, etc. Allons-y et commençons par la biographie de la carte. Il inclura l'image de la description de la personne et le bouton. Il s'agit d'une balise div ouverte attribuée à la biographie de la fiche de classe. Insérez-le ensuite dans un autre div, qui sera l' enveloppe de l'image Je vais l'appeler IMG rapper. Et je vais mettre ici une balise d'image et l'attribut source. Nous devons spécifier le chemin de l'image. Et je vais aussi mettre ici la personne comme valeur de l'attribut alt. Et en plus de cela, je vais définir la largeur de l' image à partir d' ici pendant un certain temps Faisons-le à cent pixels. En fait, nous le ferons à partir du CSS à la fin de la journée. Très bien, à la minute suivante, des informations personnelles. Ouvrons donc la balise div avec les informations sur la personne de la classe et insérons votre élément de titre h3 pour le nom complet de la Je vais instituer Jane Brown. Et nous devons également ajouter un paragraphe pour une description. Ajoutons ici un texte fictif. Très bien, enfin, nous devons créer le bouton, je veux dire le bouton noir qui se déplacera et changera de forme une fois que nous aurons cliqué dessus Affectons-nous à une classe appelée btn. Donc, à l'intérieur de ce bouton, nous aurons deux parties. Le premier sera l'élément span avec le texte. Contactez-moi Pour ce qui est du second, ce sera l'icône. Attribuons donc à ce panneau un élément appelé contacts btn. Et puis l'institut taxé me contacte. Ensuite, je vais mettre ici l'icône Font Awesome, qui devrait avoir les noms de classe, FAS, FA dash, angle, dash up OK, donc c'est tout pour la bile à cartes. C'est passer à la partie suivante. Ensuite, nous devons créer le titre, me contacter, qui sera ensuite masqué et apparaîtra au clic. Ouvrons donc la balise div avec contact de la carte de classe et insérons les éléments de titre H4 avec le texte Contactez-moi Très bien, donc la moitié du balisage est créée Ensuite, nous devons nous occuper des trois cases blanches différentes qui seront utilisées pour certaines informations de contact sur les réseaux sociaux. Ouvrons donc la balise div et attribuons-la à la classe appelée Social Ce sera la classe commune pour un style courant. Mais nous avons également besoin de la classe individuelle pour le style individuel. La première case sera réservée à l'e-mail. Attribuons-lui donc un e-mail de classe. En fait, chaque boîte sera composée d'une icône Font Awesome et de quelques coordonnées. Ouvrons la balise profonde, qui sera l'enveloppe de l' icône Font Awesome Attribuons-lui la classe que je peux encapsuler. Ensuite, insérez votre Irlande avec les classes FAS, FA, tiret, enveloppe. Après cela, nous devons mettre ici quelques coordonnées. Ouvrons donc une autre balise div avec les coordonnées de la classe Je vais mettre ici l'élément de titre h f4 avec le texte de l'e-mail Ensuite, nous avons besoin d'un paragraphe qui inclura l' adresse e-mail réelle de la personne. Et je vais également insérer votre petite flèche, qui sera exprimée par le crochet angulaire. Ouvrons l'élément span et mettons-le ici. Très bien, c'est tout pour les premiers contacts sur les réseaux sociaux. Au total, nous en aurons trois. Dupliquons donc ce code deux fois, puis apportons quelques modifications. Je vais changer le nom de la classe, FB en Facebook Ensuite, je vais changer la classe des ions lorsque f, a, b, f tiret, Facebook, tiret carré. Alors nous avons besoin ici de facebook. Et le nom complet de la personne, Jane Brown. OK, Next va être lié. Changez les classes de l'île, FAB, FA Dash, LinkedIn De plus, nous avons besoin ici de LinkedIn , puis du nom d'utilisateur Jane Brown. Très bien, nous en avons enfin terminé avec le balisage HTML des éléments créés et préparés Il est temps de passer à autre chose et de commencer à écrire le CSS. Tout d'abord, je vais créer des styles de réinitialisation. Je souhaite supprimer la marge et le rembourrage par défaut de chaque élément Pour les sélectionner, nous devons utiliser un astérisque Ensuite, je vais mettre la marge et le rembourrage à zéro. Très bien, donc tout au long de ce projet, je vais utiliser une rampe comme unité de mesure Par défaut, une mémoire vive est égale à 16 pixels car l'heure actuelle, la taille de police de l'élément HTML est égale à 16 pixels. Je veux convertir une mémoire vive en pixels parce que ce sera plus pratique et facile à calculer. Pour ce faire, nous devons réduire la taille de police de l'élément HTML de 100 % à 62,5 % Maintenant, une mémoire vive équivaut à dix pixels Comme vous pouvez le constater, la taille des éléments a diminué. OK, passons à autre chose et prenons soin du conteneur. Je veux que le conteneur occupe toute la page. Sélectionnons-le et définissons la largeur et la hauteur. Je vais régler la largeur à 100 %. Quant à la hauteur, je vais lui attribuer une hauteur de 100 fenêtres d'affichage Nous disons donc ici que le conteneur doit occuper 100 % de la hauteur de la fenêtre d'affichage Ensuite, je vais changer la couleur de fond. Utilisons votre couleur 051321. Ensuite, je veux placer la carte au centre de la page. Pour cela, utilisons CSS flexbox. Nous devons utiliser trois propriétés différentes. L'écran est flexible. Ensuite, pour centrer l' élément horizontalement, nous devons justifier le centre de contenu. Pour un centrage vertical. Nous devons utiliser Aligner les éléments au centre. C'est tout pour le conteneur. Ensuite, nous devons prendre soin de la voiture. heure actuelle, le contenu de la carte n'est pas tout à fait visible, alors corrigeons-le en utilisant un arrière-plan temporaire. Tout d'abord, définissons la largeur de la carte, la configurons pour qu'elle s'exécute, puis changeons la couleur d'arrière-plan. Utilisez votre couleur D, D, D. Très bien, maintenant le contenu est visible grâce à un cordon lui-même. Nous avons terminé. Nous devons personnaliser ses pièces séparément. Je vais commencer par la première partie, qui sera la biographie de la carte. Sélectionnons-le et définissons d'abord la couleur de fond. Je vais utiliser ici la couleur 458564. Ensuite, créons de l'espace à l'intérieur de la boîte à l'aide d'un rembourrage Je vais régler le rembourrage sur les 23 premiers de la RAM. Puis encore trois rem sur le côté droit jusqu'à M en bas, et trois rem sur le côté gauche. Ensuite, je vais placer les éléments horizontalement dans une rangée. Pour cela, je vais utiliser Display Flex. Et je vais aussi arrondir les coins en haut à gauche et en haut à droite Pour cela, utilisons le rayon de la bordure. Dans ce cas, il doit prendre quatre valeurs différentes. Le premier sera pour le coin supérieur gauche. Faisons en sorte que ce soit 0,5 rampe. Ensuite, je vais utiliser à nouveau les points de Ram pour le coin supérieur droit. Et il doit être suivi de deux zéros pour les colonnes en bas à gauche et en bas à droite Très bien, c'est tout. Pour l' instant, en ce qui concerne la biographie de la carte, nous devons styliser le contenu Je vais commencer par un bouton. Contactez-moi car je pense que cela facilitera légèrement le processus de coiffage. Nous allons donc le sélectionner. Tout d'abord, je vais m' occuper de sa position. Je veux le placer ici au bas de la biographie de la carte. Rendons donc sa position absolue. Ensuite, je vais régler l'achat d' une propriété à -2,5 rem. Ensuite, nous avons besoin de la bonne position. Je vais le régler sur dix rampes. Donc, comme vous le voyez actuellement le bouton s'est retrouvé en fin de page. Cela se produit parce que la position ne fonctionne pas en fonction des éléments parents, ce que l'on appelle bio. Nous devons rendre sa position relative, puis le bouton fonctionnera en fonction de la position de l'élément parent. Très bien, maintenant c'est correctement placé. Définissons sa largeur et sa hauteur. Je vais le régler sur 20 RAM. Quant à la hauteur, faisons-en six rampes. Et changez également la couleur d'arrière-plan. Fais en sorte que ce soit 3038. Bien, passons à autre chose et ajoutons d'autres styles en bas. Je vais changer la couleur du texte. Faisons en sorte qu'il soit blanc. Arrondissez ensuite le bouton à l'aide du radius de la bordure avec une valeur de cinq rem Et il est également important de se débarrasser de la bordure par défaut. Donc, étape par étape, le bouton devient plus agréable. Occupons-nous de la police. Je vais changer de famille de polices. Allons-y, dit Dole, serif. Augmentez ensuite la taille de la police, faites-la deux points pour la RAM. Et pour transformer le texte en majuscules. D'accord ? En fait, il y a quelques styles que je souhaite ajouter ici. Je vais créer une ombre en utilisant box shadow avec les valeurs 0,3 autour de 0,8 RAM. Et puis la valeur RGBA, je vais utiliser la couleur noire avec une opacité de 0,3 Supprimons ensuite le contour par défaut Définissez le contour sur aucun et, enfin, modifiez le type du curseur. Faites-le pointer vers le bouton. Ça a l'air plutôt bien en ce moment, nous en avons fini avec ça. Comme je vois les deux contenus de la boîte dans ce traçable, je veux dire que le texte me contacte et le support d'angle Laissons les choses telles qu'elles sont pour le moment car nous nous en occuperons plus tard. Très bien, une fois que nous avons terminé avec le bouton, nous pouvons maintenant personnaliser l'image et les informations personnelles Allons-y et commençons par l'image. Je vais sélectionner un wrapper div elements. Tout d'abord en fonction de la largeur et de la hauteur définies. Je vais les mettre tous les deux sur la neuvième rampe. Et créez également l'espace sur le côté droit en utilisant la marge droite, avec une valeur de trois tours. Ensuite, je vais sélectionner l'image elle-même. Faisons la largeur et la hauteur, toutes deux à cent pour cent. Dans ce cas, a qui héritera de la largeur et de la hauteur du développement parent Je veux dire le wrapper IMG. En outre, nous devons utiliser votre housse adaptée à l'objet. Cela nous permettra de maintenir la qualité de l'image. Enfin, arrondissons-le à l'aide rayon de bordure avec une valeur de 50 %. Alors maintenant, l'image est plutôt jolie. Comme vous vous en souvenez, nous définissons la largeur de l'image à partir du document HTML. Alors allons-y et éliminons-en parce que nous n'en avons plus besoin. C'est bon, c'est ça. En ce qui concerne l'image, passons à autre chose et personnalisons les informations personnelles. Je vais sélectionner le rappeur. Tout d'abord, définissons sa largeur, faisons-la à 60 %. Ensuite, je vais y ajouter quelques styles courants pour le titre et pour le paragraphe. Faire cela afin d'éviter de taper les mêmes choses encore et encore. Alors allons-y et définissons la famille de polices. Utilisez à nouveau Ptosis serif. Changez ensuite la couleur, faites-la blanche. Je vais également utiliser l'ombre du texte avec les valeurs 0,1 point rem par rapport à la RAM, et la couleur noire RGBA avec une opacité de D'accord, après cela, nous devons ajouter des styles individuels aux deux éléments. Commencez par les éléments de titre. Je vais faire en sorte que la taille de police soit 2,5 rem. Modifiez ensuite l'épaisseur de la police. Faites-en 500. Je vais également créer un espace entre les lettres. Faites-en 0,1 RAM, puis créez de l' espace en bas en utilisant la marge inférieure avec la valeur 1 run. OK, c'est tout à propos du titre. Allons-y et sélectionnons un paragraphe. En cas de paragraphe, je veux juste que la taille de police soit 1,8 rem. Très bien. Comme vous pouvez le voir, la première partie de la carte, la biographie de la carte, est jolie et en fait, nous en avons fini avec elle. Il est maintenant temps de passer à la partie suivante. Je souhaite personnaliser une petite section sous la biographie de la voiture. Je veux dire le titre. Contactez-moi dans un premier temps, sélectionnons son wrapper appelé contact Changez la couleur d'arrière-plan. Je vais utiliser ici, appelé ou 2814d. Ensuite, faites en sorte que le texte soit blanc. Je vais donc créer de l'espace à l'intérieur des éléments. Utilisons du rembourrage Je vais le régler à 1,5 rem en haut et en bas. S4, côtés gauche et droit. Faisons en sorte que le rembourrage soit éclatant. Et je vais également utiliser le rayon de la frontière. Dans le cas de contextes de cartes, je souhaite arrondir les coins inférieur gauche et inférieur droit. Nous avons donc besoin des valeurs suivantes, 00 puis 0,5 rem, et encore 0,5 rem. D'accord ? Occupons-nous maintenant du titre lui-même. Sélectionnons-le et ajoutons-y quelques styles. Tout d'abord, je vais modifier la famille de polices. Utilisons à nouveau Ptosis Serif. Modifiez ensuite la taille de la police, faites-en 1,8 RAM. Ensuite, je vais régler le poids de la police à 500. Mettez également le texte en majuscules. Créez ensuite un espace entre les lettres. Faites-le 0,1 rem. Enfin, utilisez Shadow avec les valeurs 0,1 point rem par rapport à la RAM, et la couleur noire avec une opacité de 0,3 D'accord, c'est tout pour cette section. Je sais que ça n'a pas l'air très bien. Je veux dire, il se retrouve partiellement derrière le bouton, mais en fait ce n'est pas le problème. Nous nous en occuperons. Très bien, étape par étape, nous allons de l'avant. Ensuite, je vais personnaliser les coordonnées des réseaux sociaux. Je veux dire, ces trois boîtes. En fait, nous pouvons nous débarrasser de cet arrière-plan temporaire car nous n'en avons plus besoin. Ensuite, sélectionnons le développement avec une classe appelée Social. Tout d'abord, je vais faire en sorte que la couleur de fond soit blanche. Crée ensuite de l'espace à l'intérieur de la boîte à l'aide d'un rembourrage. Faisons-le 1,5 rem sur les quatre côtés. Nous devons également créer un espace entre les cases en utilisant la marge. Mettons-le à deux rem en haut et en bas et à zéro sur les côtés gauche et droit. Ensuite, arrondissons les coins l'aide du rayon de bordure avec une valeur de 0,3 RAM De plus, je vais créer le conteneur Elements Flex parce que je veux placer les éléments horizontalement dans une rangée. Utilisez donc Display Flex. Et puis pour centrer les éléments verticalement, utilisons aligner les éléments au centre. Enfin, nous avons besoin d'un pointeur de curseur. Très bien, pour l'instant avec Wrapper, nous en avons terminé. Personnalisons les différents éléments de ces cases. Je vais commencer par les icônes de Font Awesome. Nous allons sélectionner le développement rapide. Il a une classe que je peux encapsuler. Je vais régler la largeur et la hauteur, les deux en fonction de l'automne. Ensuite, je vais donner la couleur d'arrière-plan de l' emballage. Mais comme vous vous en souvenez, les trois icônes de Font Awesome ont des couleurs d'arrière-plan différentes. Nous devons donc les sélectionner individuellement. Allons-y et commençons par l'e-mail. E-mail suivi du wrapper d'icônes de classe. Donc, dans le cas d'un e-mail, nous allons utiliser la couleur de fond avec la valeur d, d pour B39 Ensuite, dupliquons ce code deux fois. La deuxième boîte est destinée à Facebook. Alors changeons de classe. Utilisez ici FB et changez également la couleur. Je vais utiliser ici 359 98 pour LinkedIn. Utilisons la couleur de fond 007, BB six. Très bien, donc les trois icônes ont les couleurs d' arrière-plan appropriées Allons-y et ajoutons quelques styles plus courants au wrapper Nous avons besoin ici d'un rayon frontalier d'une valeur de 50 %. Parce que nous devons l' arrondir. Utilisez ensuite flexbox. Je vais parfaitement centrer les icônes. Utilisons donc Display Flex. Justifiez ensuite le centre de contenu. Pour un centrage horizontal. En ce qui concerne le centrage vertical, nous devons utiliser aligner les éléments au centre, puis créer de l'espace sur le côté droit en utilisant la valeur de la marge droite pour exécuter OK, donc l'emballage est prêt, tout semble bon, et je vais devoir ajouter des étoiles aux icônes Alors sélectionnons-les. Je vais augmenter la taille de la police. Faisons en sorte qu'il fonctionne. Et changez également la couleur, rendez-la blanche. Très bien, passons aux détails de contact. Nous devons personnaliser le titre et le paragraphe. Je vais commencer par le titre. Sélectionnons-le. Tout d'abord, changeons la famille de polices. Je vais utiliser à nouveau des doses serif. Modifiez ensuite la taille de la police, faites-en 1,6 RAM. Créez un espace entre les lettres. Je veux dire 0,1 RAM. Et créez également de l'espace en bas en utilisant la marge inférieure avec la valeur 0,5 run. C'est à cela que ressemblent les titres en ce moment. Nous devons leur donner des couleurs différentes. Je vais donc les sélectionner séparément. Commençons par l'e-mail. Réglons la couleur sur d. D pour B39. Ensuite, dupliquons ce code deux fois, changeons le nom de la classe en FB et changeons également la couleur, soit 359 98s pour LinkedIn Je vais utiliser la couleur zéro 076. OK, donc une fois que nous en avons terminé avec les titres, passons à autre chose et occupons-nous des paragraphes Allons-y et sélectionnons-les. Tout d'abord, changeons la famille de polices. Utilisez les doses serif. Ensuite, je vais régler la taille de la police à un point pour la RAM. Changez la couleur, faites-en 444, puis créez un espace entre les lettres. Faites-le tourner à 0.1. Très bien, donc en fait, avec ce carrelage, nous avons presque terminé Le seul élément que nous devons personnaliser est cette petite flèche ici. Allons-y et sélectionnons-le car il s'agit des éléments de la plage. Tout d'abord, je veux le placer sur le côté droit de la boîte. Pour cela, nous pouvons utiliser la marge gauche. Et nous devons le régler sur automatique. En fait, ça ne fonctionne pas. Les éléments de travée doivent être placés sur le côté droit. Je pense que nous avons une petite erreur dans le fichier HTML. Alors vérifions-le. Les éléments de la plage doivent donc se trouver en dehors des coordonnées. Réglons ça rapidement. Et modifiez également ici le sélecteur. Nous avons besoin du panier social, suivi du span. Ensuite, je vais augmenter la taille de la police, adapter à Ram, modifier l'épaisseur de la police , la mettre en gras. Et je vais aussi régler la couleur sur 999. Enfin, avec le style, nous avons terminé. Nous devons maintenant passer à autre chose et nous occuper de la fonctionnalité de la carte. Je vais te rappeler ce que nous allons faire. Regardons donc le projet terminé. Par défaut, nous masquerons donc la section Contactez-moi et les coordonnées des réseaux sociaux. Ensuite, une fois que nous avons cliqué sur le bouton, il changera de forme, de position et de contenu. Et les éléments apparaîtront ici. Très bien, allons-y et occupons-nous de ça. Tout d'abord, je vais ajouter un écouteur d'événements de clic au bouton Passons donc au fichier script.js et sélectionnons le bouton que je vais utiliser ici pour la méthode de sélection de requêtes Nous devons spécifier le nom de la classe entre parenthèses Nous avons besoin ici d'un nom appelé btn. Ensuite, nous devons nous attacher à chaque écouteur d'événements. Utilisons une méthode appelée ajouter un écouteur d'événements. Cette méthode prend deux paramètres. Le premier concerne le type d'événement. Comme nous l'avons dit, nous allons utiliser le clic. Suivant. Nous devons passer l' année, la fonction flèche, qui sera réellement exécutée une fois que nous aurons cliqué sur l'élément. Très bien, alors laissez-moi vous expliquer ce que nous allons faire. En fait, nous allons créer une nouvelle classe et un nouveau CSS appelés change. Nous allons ajouter cette classe au conteneur. Ensuite, en utilisant huit, nous appliquerons de nouveaux styles aux éléments. Allons-y et sélectionnons un conteneur à l'aide une méthode de sélection de requêtes de jeu Spécifiez ici le conteneur de classe. Ensuite, nous devons utiliser la propriété appelée liste de classes. Cette propriété nous donne toutes les classes que possède l'élément Enter. Nous devons maintenant utiliser la méthode appelée toggle La méthode toggle nous permet d'ajouter la classe à l'élément s'il ne l'inclut pas , et de supprimer la classe Si l'élément inclut huit entre parenthèses, nous devons mettre ici un changement de classe Très bien, c'est tout pour JavaScript. Nous devons maintenant utiliser le changement de classe en CSS. Avant cela, je vais cacher ici quelques éléments. Comme vous connaissez le titre, contactez-moi et ces trois cases devraient être masquées par défaut. Nous devons donc attribuer une transformation de contact à deux cartes. Avec la fonction translate y. Cela nous permettra de déplacer les éléments vers le haut. Passons ici à -100 %. Comme vous pouvez le voir, l' élément a été déplacé vers le haut, mais il s'est retrouvé en haut de la biographie de la fiche. En fait, nous n'en avons pas besoin. Je veux le placer derrière la biographie de la voiture. Pour ce faire, je vais utiliser la propriété d'indice Z Mettons-la sur, disons, 100. Alors maintenant, le problème est résolu. L'élément s'est retrouvé derrière la biographie de la voiture. Allons-y et prenons soin des contextes des réseaux sociaux. Nous devons les cacher, et nous devons également les déplacer légèrement vers le haut. Utilisons donc à nouveau transform avec la fonction translate y. Et dans ce cas, arrêtons-nous ici : -50 %. Les boîtes sont donc déplacées vers le haut et nous devons maintenant les cacher. Afin de masquer les éléments. Je vais utiliser l'opacité zéro et également la visibilité cachée. Très bien, donc tout est prêt. Allons-y et faisons en sorte que l'événement de clic fonctionne. Lorsque nous cliquons sur le bouton , ces éléments cachés devraient apparaître. Commençons par la rubrique « contactez-moi ». Nous devons utiliser le changement de classe, suivi du contact de la carte de classe. Ensuite, nous devons effectuer la transformation à l'aide de la fonction translate y. Et dans ce cas, nous devons passer ici à zéro. En plus de cela, utilisons des valeurs de transition, toutes 0,5 s. Si je clique sur le bouton, l' élément apparaîtra bien. Je veux ajouter ici un petit effet. Je vais réduire l'échelle du texte à zéro, puis la ramener à 100 % une fois que nous aurons cliqué sur le bouton. Nous devons donc effectuer une transformation à l' aide de la fonction d'échelle. Cela nous permet de modifier la taille des éléments. Mettons-le à zéro. Sélectionnez ensuite les éléments de titre. Mais dans ce cas, en changeant de classe. Ensuite, utilisez Transform. Avec la fonction d'échelle. Nous devons établir la valeur de l'échelle 1. Ensuite, utilisez à nouveau la transition. Insérez ici 0,5 s. D'accord ? Maintenant, une fois que nous cliquons sur le bouton, l'échelle du titre augmente. Hein ? En un coup d'œil, il semble que la direction de la transformation soit de droite à gauche. Je pense qu'il serait préférable de le changer et de le faire de gauche à droite. Pour cela, nous devons utiliser la propriété appelée origine de la transformation et nous devons la laisser à gauche. Maintenant je trouve que ça a l'air mieux. Allons-y et affichons le reste des éléments. Je suis dans les contacts sur les réseaux sociaux. Nous devons donc utiliser à nouveau le changement de classe, puis la classe sociale. Ainsi, pour déplacer des éléments vers le bas, nous avons dû les transformer avec la fonction translate y et avec une valeur de zéro. Ensuite, pour afficher les éléments, nous avons besoin d'une opacité et d'une visibilité visible Ensuite, nous avons dû utiliser la transition, mais avec un délai différent pour chaque boîte. Sélectionnons l'e-mail affecté à la transition avec les valeurs 0,5 s et avec le temps de retard 0,3 s. Dupliquons ce code deux fois. Le second sera F B avec un délai 0,5 s. Et ensuite, pour LinkedIn, nous avons besoin d'un délai de 0,7 s. D'accord, comme vous pouvez le voir, tout fonctionne bien jusqu'à présent La seule chose à faire est de prendre soin du bouton. Nous devons faire deux choses. Par défaut, nous devons afficher le texte, contactez-moi. Une fois que nous avons cliqué sur le bouton, il devrait passer au support angulaire. Nous devons également modifier la largeur du bouton et le rayon de la bordure. Alors tout d'abord, centrons le contenu. Je veux dire, les deux éléments sont parfaitement à l'intérieur du bouton. Nous devons sélectionner une carte, pas un comportement. Et puis l'icône Font Awesome, nous avons besoin des cartes VT et I. Tout d' abord, réduisons la largeur à cent pour cent. Changez ensuite la position, faites un maximum absolu. Nous devons définir les propriétés du haut et de la gauche, toutes deux à 50 %. Enfin, nous devons utiliser la fonction Transform Translate. Nous avons deux parties ici, -50 % deux fois. Cette technique est donc utilisée pour envoyer parfaitement à l'élément. OK, donc le contenu est centré. Nous devons maintenant masquer le support angulaire par défaut. Sélectionnons l'élément et lui attribuons une opacité nulle et une visibilité masquée Donc, une fois que nous avons cliqué sur le bouton, nous devons masquer la taxe, me contacter et afficher le crochet angulaire. Donc, dans ce cas, nous devons utiliser le changement de classe suivi de la carte de classe btn contact nous avons besoin d'une opacité nulle Visibilité cachée. Afin d'afficher les crochets. Nous avons besoin à nouveau d'un changement de classe, suivi de l'élément I. Et dans ce cas, nous avons besoin d'une opacité avec la valeur un, puis d'une visibilité visible Très bien, comme vous pouvez le voir, tout fonctionne bien. Nous devons maintenant prendre soin de la forme du bouton. Lorsque nous cliquons dessus, nous devons réduire la largeur du bouton. Nous allons donc sélectionner un bouton avec le changement de classe. Je vais le faire avec six RAM. Changez ensuite la bonne position. Faisons-en trois RAM. De plus, je vais légèrement changer la position inférieure, faire moins trois RAM. Enfin, utilisez border-radius avec la valeur 50 %. Donc, si nous cliquons sur le bouton, il changera de forme. Très bien, tout fonctionne bien comme gaz. La seule chose que nous devons faire est d' ajouter les effets de transition. Allons-y et commençons par le bouton. Je vais attribuer à la transition la valeur 0 et la durée 0,5 s. Ensuite, nous devons ajouter la transition à la carte btn conduct Insérons ici toutes les 0,5 s et un petit délai de 0,1 s. Ensuite, nous devons passer, encore une fois, à un contrat écrit sur carte, mais avec la classe de modification, nous vous transmettrons toutes 0,1 s. Et enfin, utilisez la transition avec l'élément I. Je veux dire que je fais un élément avec la direction du changement de classe 2,5 s. Très bien, comme vous pouvez le voir, tout fonctionne parfaitement et en fait nous en avons terminé avec ce petit projet 17. Projet 14 - Menu grille CSS: Dans cette vidéo, nous allons créer une page de destination simple avec un menu en forme de grille CSS. Le projet sera construit sur la base de technologues. Nous utiliserons du HTML, CSS et un peu de JavaScript. Très bien, allons-y et décrivons d'abord le projet. Il se compose de deux parties principales. La première sera une simple page de destination. Je n'ai pas mis beaucoup d'éléments ici car l'objectif principal du projet sera la mise en page en grille CSS. Nous avons ici la bannière avec quelques textes et l'image de fond en plein écran Dans le coin supérieur gauche se trouve une icône de menu. Si je clique dessus, ces lignes se déplaceront vers la droite dans l'ordre. Le menu de la grille apparaîtra avec de jolis effets. Nous avons ici quelques éléments de menu bien alignés. Dans le coin supérieur gauche, nous voyons également le bouton de fermeture x. Si je clique dessus, le menu se ferme. Le projet va s' adapter à différentes tailles d'écran. Si j'inspecte la page et vérifie sur des tailles d'écran plus petites, vous verrez qu'elle est réactive et qu'elle a une belle apparence. Une chose à noter ici, est que nous allons utiliser l'approche du bureau d'abord. Nous allons créer le projet pour la taille d'écran plus grande que celle dans laquelle je me trouve. Cela coïncide avec la largeur de 1920 pixels hauteur de 1080 pixels. Si vous comptez utiliser cette taille d'écran plus petite lors de la création de ce projet, il se peut que cela ne soit pas bon. Mais ne vous inquiétez pas, à la fin de la journée, nous l'adapterons à différentes tailles d'écran. En attendant, vous pouvez utiliser des outils de développement. Je suis en mode réactif et je spécifie la largeur comme 1920 pixels et la hauteur comme 108 semaines. Je pense que nous sommes prêts à partir. J'ai créé un nouveau dossier sur le bureau appelé menu CSS Grid, dans lequel vous pouvez trouver un autre dossier pour les images. Vous pouvez télécharger les pièces source à partir du lien figurant dans la description. Je vais ouvrir ce dossier dans VS Code. Ensuite, nous allons créer trois fichiers HTML différents. Je vais l'appeler index.html. Ensuite, nous avons besoin de style.css. Et ils tombent sous le charme de JavaScript, script.js. Ensuite, nous allons créer le document HTML de base dans le fichier index.html. Pour cela, je vais utiliser Emmet. Nous devons placer un point d' exclamation, puis appuyer sur Entrée ou sur Tab. Alors on y va. Allons-y et changeons le titre. Je vais mettre ici le menu CSS Grid. Ensuite, je vais créer des liens pour les fichiers CSS et JavaScript. Ouvrons la balise link et indiquons ici le chemin du fichier. Nous avons besoin du nom du fichier style.css en tant que fichier JavaScript public. Je vais ouvrir la balise de script. Ensuite, dans l'attribut source, nous allons spécifier le nom du fichier. Très bien, donc les trois fichiers sont connectés. Ensuite, je vais ajouter quelques polices Google. Tout au long de ce didacticiel, nous allons utiliser deux polices différentes. Allons-y et visitons le site Web de Google Fonts. Je vais taper ici Google Fonts. Voici donc le site de Google Fonts. Je vais chercher un script de danse. Alors le voici. Ensuite, cherchons Joséphine Slab. Je vais personnaliser cette police car nous utiliserons ce téléphone avec un poids de police différent. Alors vérifions ici. Quelques boîtes. Enfin, prenons le lien et collez-le dans l'élément principal. Très bien, nous sommes donc presque prêts à commencer à coder. Enfin, je souhaite exécuter le projet dans le navigateur. Pour cela, utilisons l'un des packages de code Views qui s' appelle Live Server. Cela nous permet d'exécuter le projet dans le navigateur et d'effectuer des mises à jour sans actualiser la page à chaque fois. Je recommande donc d'installer et d'utiliser ce package. OK, plaçons l' éditeur et le navigateur. Comme ça. Et lancez-vous. Donc, dans un premier temps je vais créer le balisage HTML pour l'ensemble du projet, puis nous allons commencer à écrire du CSS et du JavaScript Allons-y et créons le balisage pour la première partie du projet, qui sera le débarquement Ouvrons la balise div. Il englobera l'ensemble du contenu des projets. Je vais lui donner un conteneur de classe. Ensuite, dans le conteneur, je vais insérer l'icône du menu du hamburger Il sera construit en utilisant les développements. Ouvrons donc le développement et attribuons le menu hamburger à la classe L'icône du menu sera composée de deux parties. Le premier sera l'icône du hamburger. Quant à la deuxième partie, ce sera le bouton de fermeture x. Tout d'abord, ouvrons un élément div avec des lignes de classe Il enroulera les trois lignes Je suis dans la première partie de l'icône. Insérons donc ici trois éléments div avec quelques classes Je parle de la ligne et de la première ligne. Ensuite, je vais dupliquer cette ligne de code deux fois et changer les noms des classes avec les lignes deux et trois. Ensuite, je vais ouvrir un autre div, qui sera une enveloppe des lignes de boutons de fermeture en X. Je veux lui donner une classe X btn. Ensuite, insérons ici l'élément div avec les classes x line et x line one Ensuite, dupliquez-le et modifiez le nom de la classe. Très bien, c'est tout pour le menu des hamburgers. Ensuite, je vais m' occuper de l'en-tête. Ouvrons-le et attribuons-le à l'en-tête de la classe. Ensuite, nous avons besoin de la bannière. Insérons donc ici un nouveau développement avec la bannière de classe. La bannière sera composée de deux éléments différents. Le premier sera le titre. Quant au second, ce devrait être le paragraphe comme le premier. Insérons ici H1, et insérons ici du texte Il s'agit d'une page de destination. Ensuite, nous avons besoin d'un paragraphe avec un texte avec un. En fait, je vais insérer ici le texte avec un menu de grille CSS, mais je souhaite utiliser différents styles pour la grille CSS. Par conséquent, encapsulons ces deux mots avec des éléments de span , puis écrivons le menu. Très bien, voyons la première partie du balisage. Allons-y et créons le menu de navigation. Je vais ouvrir les éléments de navigation affectés à la navigation de classe. Le menu de navigation sera donc représenté par une liste. Je vais lui donner un menu de navigation de classe. Dans ces éléments de liste, je vais mettre quelques éléments de liste. Ouvrons les éléments LI. Il doit contenir un élément de menu de navigation de classe. Ensuite, l'élément de liste inclura un élément de lien avec le lien du menu de navigation de classe. Donc, comme premier élément de navigation je vais insérer votre page d'accueil. Au total, il y aura 11 articles. Je vais donc dupliquer un élément lumineux dix fois. Ensuite, je vais rapidement changer les articles. Le second va porter sur. Ensuite, nous aurons des projets. Blogue. La prochaine sera Gallery. Il y aura également des prix de portefeuille que des événements. Clients. La prochaine sera celle des offres. Enfin, je vais mettre ici des contacts. D'accord, c'est donc tout à propos du balisage HTML. Tous les éléments ont été créés et nous sommes maintenant prêts à commencer à les styliser. Passons au fichier style.css. Tout d'abord, je vais créer des styles de réinitialisation. Je souhaite supprimer la marge et le rembourrage par défaut de chaque élément Pour sélectionner chaque élément, nous devons utiliser un astérisque Ensuite, pour supprimer la marge et le rembourrage par défaut, je vais les mettre tous les deux à zéro D'accord ? Donc, tout au long de ce tutoriel, je vais utiliser la RAM comme unité de mesure. Par défaut, 1 g est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Je souhaite convertir une RAM en dix pixels car je pense que ce serait plus pratique à utiliser et à calculer. Nous devons donc réduire la taille de police de l'élément HTML et la porter à 62,5 %. Dans ce cas, une rampe doit être égale à dix pixels. Donc, à l'heure actuelle, la taille des éléments a diminué et ils sont devenus plus petits. Très bien, allons-y et prenons soin de l'en-tête. Je veux qu'il occupe la totalité de la fenêtre d'affichage. Nous allons donc le sélectionner et définir sa largeur et sa hauteur. La manière suivante. Je vais le faire à 100 %. Pour ce qui est de la hauteur, je vais la mettre à cent pour la hauteur de la fenêtre d'affichage Cela signifie qu'il occupe cent pour cent de la totalité de la fenêtre d'affichage Ensuite, définissons l' image comme arrière-plan en plein écran Tout d'abord, je vais utiliser un dégradé linéaire. Et je vais mettre ici trois valeurs RGBA différentes. Le premier sera de 884 170,7. L'opacité. Ensuite, je vais utiliser 1887190 et une opacité Pour ce qui est de la troisième couleur, utilisons ici la couleur noire. Nous avons besoin de 03 fois et d'une opacité de 0,2. Ensuite, nous allons spécifier l'URL. Je parle de la partie de l'image. Nous avons un dossier appelé images et nous devons sélectionner PG point JPG. Ensuite, nous avons besoin de Center et pas de répétition. Enfin, faisons en sorte que la taille de l'arrière-plan soit de couverture. D'accord, l'arrière-plan est prêt pour l'en-tête et vient ensuite la bannière. Je veux le placer au centre du prêt. Pour cela, nous pouvons utiliser plusieurs méthodes. Mais pour moi, la meilleure solution est Flexbox. Nous devons attribuer quelques propriétés flexbox à l'élément d'en-tête Le premier sera Display Flex, car nous devons créer un conteneur Flex d'en-tête. Ensuite, nous devons changer de direction. Nous devons en faire une colonne. Ensuite, pour centrer les éléments à l'intérieur du conteneur, nous devons justifier le centre de contenu et aligner les éléments au centre. Très bien, donc la bannière est centrée. Nous devons maintenant personnaliser le titre et le paragraphe. Allons-y et commençons par le titre. Sélectionnons-le. Tout d'abord, je vais modifier la famille de polices. Utilisons ici l'un des scripts de danse de Google Fonts. Ensuite, nous avons besoin de mesures coercitives. Ensuite, je vais augmenter la taille de la police. Faisons-en huit RAM. Modifiez également l'épaisseur de la police. Faites-en 400. Après cela, je vais changer de couleur. Imaginons par exemple qu'il créer un espace entre les lettres en utilisant l' espacement des lettres, 0,5 rem. En plus de cela, je vais créer de l'espace au bas de l'élément en utilisant la marge, les trois derniers rem. Enfin, utilisons l'ombre du texte avec les valeurs 0,2, 0,4 RAM. Et la couleur noire RGB a, trois zéros et l'opacité Très bien, donc le titre semble plutôt bon. Passons au paragraphe. Allons-y et sélectionnons cet élément. Je vais créer sa famille de polices. Encore une fois, script dansant, cursif. Ensuite, augmentez la taille de la police, créez-la pour la RAM. Changez également la couleur. Dis-le. Je vais créer un espace entre les lettres. Mais dans ce cas, parlons de la RAM. Enfin, utilisez à nouveau l'ombre du texte. En fait, je vais récupérer cette ligne de code à partir d'ici et la coller pour le paragraphe. Très bien, ensuite, je veux placer le paragraphe sur le côté droit. Pour cela, nous pouvons utiliser text-align, non ? N'oubliez pas que nous avons encapsulé la grille CSS des mots avec un élément span car nous avons besoin d'un style différent pour ces deux mots. Allons-y donc et appliquons-le. Je vais sélectionner l'élément span. Réglons la famille de police sur Josephine Slab Serif. Augmentez ensuite la taille de la police, faites-en cinq rems. Modifiez l' épaisseur de la police, mettez-la à 700. Enfin, transformez le texte en majuscules. Très bien, nous avons enfin terminé le paragraphe et nous avons fini de travailler sur la bannière Ensuite, il est temps de personnaliser l'icône du menu. Je suis dans la première partie, qui se compose de trois lignes blanches. Allons-y et sélectionnons les développements rapides, qui proposent un menu de hamburgers haut Tout d'abord, je vais le rendre visible. Nous devons donc définir la largeur et la hauteur. Faisons en sorte que les deux rampes soient de 3,5. Et je vais aussi lui attribuer une couleur de fond temporaire. Faisons en sorte qu'il soit rouge. l'heure actuelle, l'icône est placée dans le coin supérieur gauche du prêt. Cette position n'est pas tout à fait correcte. Définissons donc la position de l'icône et fixons-la. Et aussi, je vais spécifier les positions supérieure et gauche. Je vais faire en sorte que les deux soient 3,5 rem d' accord, donc pour le moment l' icône est correctement positionnée. Enfin, je souhaite modifier le type du curseur et le faire pointer. OK, je vais maintenant afficher les lignes. Tout d'abord, sélectionnons le développement du wrapper, qui contient les lignes de nom de classe, et attribuons-lui quelques vignettes Je vais régler la largeur et la hauteur, toutes deux à 100 %. Dans ce cas, l'élément héritera de la largeur et hauteur de son élément parent, le menu hamburger Et maintenant, occupons-nous des lignes. Sélectionnez-les à l'aide d'une ligne de nom de classe commune. Je vais me contenter cent pour cent. Pour ce qui est de la hauteur. Parlons de la RAM. Modifiez également la couleur d'arrière-plan. Faites-le blanc. Et je vais aussi arrondir légèrement les coins des lignes. Pour cela, utilisons border-radius avec le point de valeur à exécuter Bien, maintenant les lignes sont visibles, mais comme vous l'avez deviné, nous devons prendre soin de leur position Pour cela, je vais utiliser à nouveau des livres flexibles. Attribuons donc aux lignes. Écran flexible. Suivant. Nous devons changer de direction. Je vais en faire une colonne. Ensuite, nous devons créer un espace entre les lignes. Et pour cela, nous devons utiliser le contenu de justification avec l'espace de valeur de manière uniforme. Et enfin, nous devons aligner les éléments, les centrer. D'accord ? À l'heure actuelle, les lignes sont donc correctement positionnées. Si nous supprimons le fond rouge, vous les verrez mieux. Très bien, en fait, la première partie du projet est terminée L'en-tête est stylé, il est plutôt joli. Nous devons maintenant passer à la navigation. Je vais concevoir le menu de navigation, puis je vais le faire fonctionner. Donc, pour continuer, je vais masquer l'en-tête pendant un moment et les lignes, puis commencer à travailler sur la navigation Allons-y et attribuons à l'en-tête et à l'affichage des lignes. Non. Très bien, nous n'avons ici qu'une liste de navigation. Allons-y et commençons à personnaliser la navigation. Je vais sélectionner suffisamment d'éléments. Tout d'abord, définissons sa largeur et sa hauteur. Les deux à 200 %. Et je vais changer la couleur de fond. Utilisons votre couleur d, d, d. Donc, pour l'instant , la navigation commence dans le coin supérieur gauche. Cela se produit parce que l' en-tête est masqué pendant un certain temps. Je souhaite donc également définir la position actuelle manuellement. Pour cela, nous avons besoin d'une position absolue. Ensuite, définissez les propriétés supérieure et gauche, toutes deux à zéro. La navigation occupe désormais toute la largeur et la hauteur de la page. Je pense qu'il est temps de personnaliser un peu les objets. Tout d'abord, sélectionnons les éléments LI et supprimons les puces par défaut heure actuelle, ces puces ne sont pas visibles car nous avons réglé le rembourrage sur En fait, si je l'allume à l'arrière, vous verrez les balles Débarrassons-nous d'eux. Je vais sélectionner les éléments LI qui leur sont assignés, ou du moins aucun style. Ensuite, je vais sélectionner les éléments du lien. Tout d'abord, éliminons le sous-jacent par défaut en utilisant la décoration du texte, aucune. Ensuite, je vais définir la famille de police sur Josephine Slab Augmentez également la taille de la police, faites-en 2,5 RAM. Modifiez ensuite l'épaisseur de la police. Je vais le rendre légèrement plus audacieux. Utilisez 700. Transformez ensuite le texte en majuscules Ensuite, je vais créer un espace entre les lettres. Mettons un point d'honneur à louer. OK. Les articles sont donc bien plus beaux, mais je vais leur ajouter d'autres styles. Changeons la couleur de fond. Dans ce cas, je vais utiliser la couleur jusqu'à cinq. Voir C7. Rendons ensuite le texte en blanc. Et créez également les angles des éléments qui l'entourent en utilisant le radius de la frontière avec la valeur 0,5 loyer Très bien, c'est pour le moment en ce qui concerne les éléments de lien Ensuite, nous devons commencer à utiliser la grille CSS En fait, je vais exécuter le projet sur Mozilla Firefox car il possède actuellement les meilleurs outils de développement pour la grille CSS. Je veux dire, il est beaucoup plus facile de travailler dans Mozilla Firefox lorsque vous gérez la disposition de la grille CSS. Si nous n'avons pas Mozilla Firefox, je recommande de le télécharger et de l'installer. Allons chercher l'URL. Ouvrez ensuite le navigateur et collez-le ici. Nous avons donc ici notre projet en cours d'exécution. Je vais inspecter la page. Vous pouvez donc voir ici les outils de développement. C'est un peu similaire aux outils de développement de Google Chrome, mais vous verrez certaines différences lorsque nous commencerons à utiliser la grille CSS, n'est-ce pas ? Donc, tout d'abord, je vais créer le conteneur d'accueil à éléments nuls. Pour cela, nous devons lui attribuer une grille d'affichage. Ensuite, nous devons définir les colonnes et les lignes. Dans le cas des éléments de navigation, nous allons avoir trois colonnes et trois lignes. Nous devons donc utiliser des colonnes du modèle de grille. La taille de la première colonne doit être exprimée en RAM, alors nous avons besoin d'une unité fractionnaire Et puis encore une fois jusqu'à la rampe. En ce qui concerne les rangées, comme nous l'avons dit, nous en avons besoin de trois. La taille de la première ligne doit être de dix RAM. Puis encore une unité fractionnaire. Et ensuite pour courir. Nous avons donc défini les colonnes et les lignes. Et pour mieux les voir, je vais cocher cette petite case. Et je vais également afficher les numéros de ligne. Alors on y va. Notre grille est maintenant visible. Malheureusement dans Google Chrome. À l'heure actuelle, nous n'avons pas une telle opportunité. Très bien, laissez-moi vous expliquer ce que signifient ces colonnes et ces lignes. Ces petites colonnes suivront ce rythme. Ensuite, dans la première rangée, il y aura le bouton de fermeture x. En tant que menu pliable lui-même. Il va être placé ici, au milieu. Allons-y et définissons la position du menu des écrous. Sélectionnons-le. Ensuite, définissez la colonne de la grille avec les numéros de ligne 2.3 et la ligne de la grille. Les numéros de ligne 2.3. Encore une fois. Comme vous le voyez, le menu est correctement placé dans la deuxième colonne, et il est maintenant temps de placer les éléments correspondants. Tout d'abord, nous devons créer suffisamment de menu, un conteneur de grille, une grille d'affichage. Ensuite, nous devons définir les colonnes et les lignes. Utilisons donc les colonnes du modèle de grille. Au total, je vais créer 12 colonnes. Utilisons la fonction de répétition. Spécifiez ensuite le nombre de colonnes 12 et cette taille, une unité fractionnaire Ensuite, définissons les lignes du modèle de grille. Utilisez la fonction de répétition. Nous aurons quatre lignes, chacune égale à une unité fractionnaire Et en plus de cela, je vais également créer l'espace entre les cellules de la grille en utilisant un écart de grille égal à la rampe. Très bien, alors tout d'abord, affichons les lignes de la grille du menu de navigation Comme vous le voyez, nous avons 12 colonnes et quatre rangées. l'heure actuelle, la mise en page est un peu confuse, mais nous nous en occuperons bientôt Avant de commencer à positionner les différents éléments, je souhaite utiliser à nouveau Flexbox. À l'aide de quelques propriétés de flexbox, nous allons étirer les éléments dans les cellules et centrer le contenu de chaque élément Nous devons donc utiliser Display Flex. Justifiez ensuite le centre de contenu. De plus, nous devons aligner les éléments au centre. Et je vais faire en sorte que la taille soit égale à 100 %. OK, alors maintenant les articles sont plus beaux et en position standard que séparément. Pour le sélectionner, je vais utiliser le sélecteur de nième enfant Nous avons donc besoin d'un élément du menu de navigation suivi du nième sélecteur enfant Et nous devons spécifier ici le numéro de l'article. Et nous avons gagné. Les premiers éléments doivent être placés dans les deux premières rangées et occuper les trois premières colonnes. Nous avons donc besoin d'une colonne de grille où la ligne est numérotée 1.4 et du rôle de sortie avec les numéros de ligne 1.3. Le premier élément est donc la position. Passons à la seconde. En fait, je vais copier ce code, puis modifier le numéro dont nous avons besoin. Le deuxième élément sera également placé dans les deux premières lignes, les colonnes. Il sera placé entre les numéros de la quatrième et de la septième ligne. Nous avons donc besoin de la colonne 4.7 de la grille et de la ligne 1.3. Laissons donc les choses telles qu'elles sont. C'est tout pour le deuxième élément. Allons-y et passons au point suivant, qui sera au nombre de trois. Le troisième élément sera donc positionné dans la première rangée. Quant aux colonnes, elles seront placées à partir du numéro de la septième ligne jusqu'à la fin du conteneur de la grille. Nous avons donc besoin d'une colonne de grille avec une ligne numéro sept et moins un. Selon la grille, la ligne sera 1.2. Comme vous le voyez, le troisième élément est également placé correctement. Vient ensuite le quatrième élément. Je vais le placer au deuxième rang. Et il occupera deux colonnes, les colonnes situées entre les numéros de la septième et de la neuvième ligne. Nous avons donc besoin de la colonne 79 de la grille. Quant à la ligne de la grille, elle sera 2.3. D'accord ? Ensuite, nous avons le cinquième élément. Il va être placé dans la deuxième rangée. En ce qui concerne les colonnes, je vais les placer entre les numéros de la neuvième et de la onzième ligne. Changeons donc ici les valeurs dont nous avons besoin ici, colonne 911 de la grille et la ligne 2.3 de la grille. OK, donc étape par étape, nous allons de l'avant et créons la disposition de la grille. Passons au point suivant, qui sera le sixième. Il doit donc être replacé dans la deuxième rangée. Quant aux colonnes, elles occuperont deux colonnes à la fin du conteneur de la grille. Nous avons donc besoin de quitter la colonne contenant les numéros de ligne 11, n moins un. Aucune ligne de grille. Encore une fois avec les numéros de ligne 2.3. C'est bon, c'est ça. À propos du sixième article. Ensuite, il y a la même chose à une heure. Le septième élément va donc être placé dans la troisième rangée et occupera six colonnes à partir du début du récipient à liquide. Nous avons besoin d'une colonne de grille avec une ligne numérotée 1.7. Quant à la ligne de la grille, elle devrait être 3.4. D'accord, c'est donc tout à propos du septième élément. Passons au suivant, qui est l'article. Il sera donc replacé dans la troisième rangée. En ce qui concerne les colonnes, je veux les placer de la ligne numéro sept la ligne numéro sept jusqu'à la fin du conteneur. Nous avons donc besoin d'une colonne de grille avec une ligne numéro sept moins un et une ligne de grille trois moins un. D'accord ? Il ne reste donc que trois éléments. Allons-y et définissons rapidement leurs positions. Je sais que ce processus est un peu ennuyeux, mais c'est ainsi que fonctionne la grille CSS. Passons au neuvième point. Le neuvième élément va donc être placé dans la dernière rangée, puis dans la quatrième. Quant aux colonnes, je vais les placer entre les numéros de la première et de la troisième ligne afin qu'elles occupent les deux premières colonnes. Nous avons besoin de la colonne 1.3 de la grille. En ce qui concerne la ligne de la grille, nous en avons besoin de quatre et moins un. Très bien, nous avons ensuite le 10ème article. Il va être replacé au quatrième rang. Et il devrait occuper deux colonnes de la ligne numéro trois à la ligne numéro cinq. Nous avons donc besoin de la colonne 3.5 de la grille et quittons à nouveau le rôle, quatre et moins un. Très bien, enfin, le terme des derniers articles. Je vais le placer dans la dernière ligne ainsi que pour les colonnes. Il va être placé entre la ligne numéro cinq et la ligne numéro sept. Nous avons donc besoin de la colonne 5.7 de la grille. Rangez à nouveau la grille pour n moins un. Très bien, c'est tout pour le menu de navigation. Il est bien positionné, il a l'air plutôt bien. Maintenant, il est temps de passer à autre chose et de s' occuper du reste. Je pense que nous pouvons revenir à Google Chrome car nous n'avons plus besoin l'aide des numéros de la grille. Donc, une fois que nous aurons terminé la mise en page du menu de navigation, je vais passer à autre chose et m' occuper de la fermeture du x. Mais tout d'abord, affichons les lignes. Pour cela, nous devons sélectionner la ligne x. Définissons la largeur et la hauteur. Je vais régler la largeur à 3,5 mètres. En ce qui concerne la hauteur, mentionnons la RAM. Changez ensuite la couleur d'arrière-plan. Utilisons votre couleur, 307bd F. Et je vais également utiliser le rayon de la bordure avec un point de valeur à louer Pour le moment, les lignes ne sont donc pas visibles car elles se sont retrouvées derrière la navigation. Pour les afficher, nous devons utiliser l'une de ces propriétés CSS appelée index Z. Et nous devons l'attribuer au menu des hamburgers lui-même, car le bas en fait partie Réglons donc l'indice sur, disons, 100. Comme vous pouvez le voir, les lignes sont affichées en ce moment. Ils n'ont pas la forme d' X et nous devons nous en occuper. Donc, pour les faire ressembler à x, je vais utiliser des transformations CSS, puis elles font pivoter et traduire les fonctions. Allons-y et sélectionnons x ligne 1. Utilisez ensuite Transform avec la fonction de rotation. Je vais faire pivoter la ligne de -45 degrés. Ensuite, dupliquons ce code, changeons le nom de la classe. Nous avons besoin de la ligne deux de x et nous débarrassons également du signe moins à partir d'ici. D'accord ? Donc, pour le moment, nous n' avons pas le x parfait. Nous devons utiliser la fonction Translate. De plus, cela nous permet de déplacer l'élément horizontalement ou verticalement selon les axes x et y. Donc, dans ce cas, nous devons traduire y avec la valeur 0,3 RAM S4 Sur la deuxième ligne, nous devons à nouveau traduire Y, mais avec des points négatifs, trois rampes. Maintenant, nous avons le x parfait. La seule chose que je vais faire est déplacer légèrement le bouton vers le bas. Nous pouvons le faire de différentes manières. Dans ce cas, je vais utiliser des positions. Je veux le centrer parfaitement dans le menu des hamburgers. Allons-y et sélectionnons x btn. Définissez ensuite ses propriétés de position, absolue, définie, supérieure et gauche, toutes deux à 50 %. Utilisez ensuite Transform Translate. -50 %. Encore une fois -50 %. En fait, cette technique est utilisée pour centrer parfaitement l'élément à l'intérieur du récipient. Très bien. Voilà pour le bouton de fermeture x. Il est maintenant temps de faire fonctionner le menu des hamburgers. Tout d'abord, je vais l'afficher à nouveau dans la fenêtre de prêt et masquer le menu de navigation. Alors allons-y et débarrassons-nous de l'affichage, pas d'ici. Je vais également afficher l'icône du menu. Allons-y et masquons la navigation. Dans ce cas, je vais le faire en utilisant opacité avec une valeur nulle et une visibilité masquée De plus, nous avons également besoin des mêmes propriétés pour le bouton X, car nous devons le masquer. Utilisons-les donc pour X BTN. Très bien, donc tout est prêt pour que le menu des hamburgers fonctionne. La première chose à faire est de créer l'événement de clic. Pour cela, je vais utiliser JavaScript. Ouvrons le fichier script.js , puis sélectionnons le menu hamburger. Je vais le faire en utilisant la méthode de sélection de requêtes. Nous devons le joindre au document, puis entre parenthèses, nous devons spécifier le nom de la classe, dans ce cas le menu hamburger Ensuite, nous devons y associer un écouteur d'événements. Pour cela, nous devons utiliser une méthode appelée add event listener. Il faut deux arguments. Le premier sera le type d'événement. Comme nous l'avons dit, nous allons utiliser l'événement click. Passons donc cela ici en partie comme deuxième argument. Ce devrait être la fonction qui sera ensuite exécutée une fois que nous aurons cliqué sur l'élément. Dans ce cas, je vais utiliser une fonction de flèche. Très bien, nous devons maintenant passer ici le bloc de code que nous devons exécuter une fois que nous avons cliqué sur les icônes et que l'événement se déclenche Laissez-moi vous expliquer ce que nous allons faire. Je vais créer une nouvelle classe et un nouveau CSS appelés change. Nous ajouterons cette classe au conteneur onclick. Pour être plus précis, nous allons utiliser la méthode toggle, ce qui signifie que nous ajouterons la classe au conteneur s'il ne l'a pas Et nous allons supprimer la classe. Si le conteneur prend de l'habitude La méthode toggle nous permettra d'éviter d' utiliser deux méthodes différentes à distance Vous vous demandez peut-être pourquoi ajoutons-nous la classe au contenant et non au menu des hamburgers La raison en est qu'une fois que le conteneur aura la classe, nous pourrons l'utiliser pour tous ses descendants. Très bien, allons-y et sélectionnons le conteneur. Je vais utiliser à nouveau la méthode de sélection de requêtes. Spécifiez ensuite ici le conteneur ClassName. Ensuite, je vais utiliser l'une des propriétés appelées liste de classes. Cela nous donne en fait toutes les classes de l'élément. Après cela, nous devons ajouter à cette propriété, ils changent de méthode Et entre parenthèses, allons spécifier le nom de la classe que nous allons créer Changer. D'accord, c'est tout pour le JavaScript. Nous devons maintenant créer un changement de classe dans le fichier CSS. Ainsi, une fois que nous avons cliqué sur l'icône, nous devons masquer l'en-tête, afficher la navigation et également afficher le x se fermant, mais ce sont probablement les lignes de l'icône du menu. Je ne vais pas les cacher simplement parce que nous allons créer un effet différent. Très bien, masquons l'en-tête. Nous avons besoin d'un changement de classe, suivi de l'en-tête de classe. Donc, si cette sélection est valide, nous devons appliquer les styles suivants. Nous avons besoin d'une opacité nulle et d'une visibilité cachée. Ensuite, affichons la navigation. Utilisez à nouveau les modifications avec la navigation. Et dans ce cas, nous avons besoin d'une opacité avec la valeur un et une visibilité visibles. En plus de cela, nous devons également afficher le bouton X. Utilisons donc change, suivi de la classe x BTN. Et utilisez ici opacité 1 et visibilité visible. Très bien, donc si je clique sur l'icône, l'en-tête se masquera et le menu contextuel et le bouton X apparaîtront Jusqu'à présent, tout fonctionne bien. Je vais maintenant ajouter de jolis effets à notre projet. Je souhaite masquer l'en-tête et afficher la navigation avec quelques effets de fondu. Nous allons les créer à l'aide de transitions CSS. Je vais donc attribuer aux valeurs de transition d'en-tête toutes et 0,5 s, ce qui est une durée. Nous avons besoin de la même chose pour la navigation, mais nous devons utiliser la propriété de transition avec le changement de classe. Donc, si je clique sur l'icône que la navigation affichera avec un effet de fondu, et qu'il en sera de même au clic suivant, le prêt apparaîtra avec un faux. Hein ? Ensuite, je vais m' occuper des éléments de navigation. Jetons un coup d'œil au projet terminé. Comme je l'ai dit, les éléments apparaissent de gauche à droite. Nous devons donc les déplacer et les placer sur le côté gauche. Ensuite, nous devons déplacer les éléments vers la droite OnClick Je vais donc utiliser Transform avec la fonction de traduction. Dans ce cas, nous devons traduire x car nous devons déplacer l'élément, donc selon l'axe X, insérons ici moins cent pour cent l'instant, la mise en page est erronée, mais ce n'est pas un problème car par défaut, nous masquerons les éléments. Pour ça. Je vais utiliser l'une de ces propriétés CSS appelée overflow hidden Et nous devons l' attribuer à l'élément LI. Comme vous pouvez le constater, les objets ne sont pas complètement cachés. On en voit les bords. Augmentons la valeur de la fonction de traduction. Je vais le porter à 105 %. Très bien, maintenant c'est mieux. Nous devons afficher les éléments une fois que nous avons cliqué sur l'icône du menu. Mais pour rendre cet effet plus agréable, nous devons également définir certains délais Donc, pour afficher à nouveau les éléments de navigation, nous avons besoin d'un changement de classe, suivi du lien, je veux dire le lien du menu de navigation. Ensuite, nous devons effectuer la transformation à l'aide de la fonction translate x. Et dans ce cas, nous devons passer ici à zéro. En plus de cela, je vais utiliser transformation de transition plutôt que la durée de 0,7 s. Le temps de retard est de 1 s. D'accord, donc comme vous le voyez, nous avons ici un bel effet sympa Pour l'instant, tout fonctionne plutôt bien. Je vais maintenant vous parler des icônes. Je veux dire l'icône du menu sur le palier et les actes de fermeture. Mais ce que je vais faire, c'est déplacer les lignes de l'icône de gauche à droite en commençant par celle du haut. Donc pour ce faire, je vais utiliser à nouveau la fonction Transform with Translate, puis les transitions. Nous devons donc utiliser le changement de classe suivi de la ligne de classe dont nous avons besoin pour transformer Again translate x function et je vais passer ici 120 pour cent. D'accord ? Nous avons maintenant besoin d'une transition pour les trois lignes séparément car nous devons leur attribuer un temps de retard différent. Commençons par la première ligne. Utilisez une transformation de transition d'une durée de 0,5 s et d'un point de retard de 1 s. Dupliquons-la deux fois, puis changeons les noms des classes. Et aussi les délais. Nous avons besoin de 0,3 s pour cette deuxième ligne et de 0,5 s pour la troisième ligne. Très bien, si je clique sur l'icône, les lignes se déplaceront de gauche à droite dans l'ordre Mais en fait, ce n'est pas ce que nous voulons. Je souhaite que le prêt reste affiché jusqu'à ce que les lignes aient terminé le transfert. Nous devons également utiliser un certain délai pour l'en-tête et la navigation. Pour l'en-tête, je vais utiliser 0,7 s. C'est probablement de la navigation. Utilisons le même temps. Comme vous pouvez le constater, le problème est résolu. Ok, c'est bon. Mais tu dois aussi t'occuper d'autres choses. Nous devons masquer les lignes une fois qu'elles se déplacent vers la droite. Allons-y et utilisons Overflow. Caché. Très bien, c'est tout à propos de l'icône du menu. Passons à autre chose et travaillons sur le bouton de fermeture X. Nous devons également utiliser des transitions avec cet élément. Nous avons donc besoin ici de faire la transition toutes les 0,5 s. Et ensuite nous devons utiliser la transition avec le changement de classe. Parce que nous devons spécifier ici le délai, 1,3 s. Donc si je clique sur l'icône, tout fonctionnera parfaitement. Nous pouvons donc dire que nous avons terminé la construction de nos projets. Tout semble bon. Et la seule chose à faire est de rendre le projet réactif aux différentes tailles d'écran. Tout au long de cette partie du didacticiel, nous utiliserons des requêtes multimédia CSS. Allons-y, inspectons la page et activons le mode réactif. Comme nous l'avons déjà défini, le projet est construit sur une taille d'écran plus grande que celle dans laquelle je me trouve. Cela correspond à une largeur de 1920 pixels et à une hauteur de 1080 pixels. Allons-y et trouvons le premier point d'arrêt. Je suis dans la taille de l'écran sur laquelle nous de 18. Projet 15 - Navigation CSS: Dans cette vidéo, nous allons créer un menu de navigation en HTML et CSS. Cela va pouvoir être projeté, mais vous pourrez en apprendre davantage sur certains effets de transition intéressants créés par le CSS. Je pense donc que le projet sera intéressant. Avant de commencer à créer le menu, allons-y et décrivons-le. Comme vous pouvez le constater, nous avons un texte. Suivez-nous au centre de la page. Si je passe la souris dessus, le menu apparaîtra avec de belles transitions Nous avons une ligne horizontale sur le côté droit du texte, qui augmente de gauche à droite. Les éléments du menu apparaissent également dans l'ordre après un certain délai. Et si nous les survolons, nous obtiendrons des arrière-plans colorés avec une transition fluide En fait, il s'agit d'une liste de réseaux sociaux et chaque élément possède sa propre couleur d'arrière-plan d'origine. Très bien, alors c'est ça, ce que nous allons construire. Commençons. J'ai créé un nouveau dossier sur le bureau dans lequel j'ai préparé deux fichiers différents pour HTML et CSS. Allons-y et ouvrons le dossier dans le VS Code. À l'heure actuelle, le fichier CSS est vide. En ce qui concerne le code HTML, j'ai préparé la structure de base du document HTML. J'ai deux liens différents dans l'élément principal, l'un pour les polices Google et le second pour le fichier CSS. Vous pouvez télécharger les fichiers source à partir du lien figurant dans la description. Allons-y et exécutons le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages appelé Live Server. Ce package nous permet d'exécuter le projet dans le navigateur et d'effectuer les mises à jour sans actualiser la page à chaque fois. C'est un excellent package, je vous recommande donc de le télécharger avec style depuis le gestionnaire d'extensions et de l'utiliser. OK, Enfin, plaçons l'éditeur et le navigateur comme suit et commençons à créer le balisage HTML Je vais ouvrir un développement qui sera l' enveloppe du menu. Ensuite, nous avons besoin d'un autre développement avec le menu des classes. Cet élément inclura tous les éléments du menu. Nous allons donc avoir un texte qui nous suivra, suivi de la ligne. Ensuite, nous aurons cinq éléments de menu différents. Ouvrons donc un développement avec le nom de la classe. Suivez un encart, vous le contenu. Suivez-nous. Ensuite, nous avons besoin d' un autre div pour la ligne Après cela, je vais créer suffisamment de menu. Ouvrons donc le développement avec le menu de navigation des classes et insérons ici quelques éléments de navigation. Ils doivent être représentés par les éléments de lien. Il s'ouvre donc avec le lien du menu de classe. Le premier élément sera donc Facebook. Dupliquez ensuite le lien quatre fois et modifiez les noms des réseaux sociaux. Le second sera Instagram. Ensuite, nous aurons Twitter, LinkedIn. Et le dernier sera YouTube. D'accord, c'est donc tout à propos du balisage HTML. Nous devons maintenant commencer à écrire du CSS. Tout d'abord, je vais créer des styles réinitialisés et communs pour chaque élément. Pour sélectionner chaque élément, nous devons utiliser un astérisque Débarrassons-nous de la marge et du rembourrage par défaut. Je vais les mettre tous les deux à zéro. Puis modifiez la famille de polices. Faisons en sorte que ce soit des sables mouvants. OK, donc tout au long du projet, je vais utiliser la RAM comme unité de mesure. heure actuelle, une rampe est égale à 16 pixels, car la taille de police du code HTML est égale à 16 pixels. Je souhaite modifier et convertir un rond en dix pixels parce que je pense que c'est beaucoup plus pratique à calculer et à utiliser pour convertir une rampe en dix pixels Nous devons réduire la taille de police du code HTML et la porter à 62,5 % Comme vous pouvez le constater, les éléments ont changé de taille et sont devenus plus petits. OK, passons à autre chose et commençons à travailler sur l'emballage. Tout d'abord, je vais définir la largeur et la hauteur. Mettons-nous à 200 %. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Par conséquent, nous devons utiliser 100 vh et également changer la couleur d'arrière-plan Utilisons ici la couleur ou 262626. Très bien. Je vais maintenant placer le menu au centre de la page. Et pour cela, utilisons une flexbox. Nous avons besoin ici de Display Flex. Ensuite, pour centrer le menu horizontalement, utilisons le centre de contenu de justification Pour le centrage vertical, nous devons utiliser aligner les éléments au centre D'accord ? Donc, pour le moment, le menu est placé au centre, mais les éléments ne sont pas tout à fait visibles. Allons-y et réglons ça. Je vais sélectionner des articles. Les deux nous suivent et suivent les plats du menu. Parce que nous avons besoin de styles similaires pour eux. Augmentons la taille de la police, mettons-la en RAM. Modifiez ensuite l'épaisseur de la police . Faites-en 600. De plus, je vais les rendre blancs. Transformez ensuite le texte en majuscules. Créez un espace entre les lettres en utilisant l' espacement des lettres, 0,1 rem. Enfin, je vais créer de l'espace sur le côté droit des objets en utilisant margin-right pour les rats Donc, pour le moment, les articles sont bien plus beaux. Ils sont visibles et je vais passer à autre chose et m' occuper du menu. Je vais placer les objets côte à côte horizontalement que je souhaite utiliser La flexbox. Encore une fois, nous avons besoin de Display Flex. Et puis pour le centrage vertical, nous devons aligner les éléments au centre Et enfin, changez le type du plus grossier, faites-le pointer Très bien, c'est tout pour les objets pour le moment. Je vais passer à autre chose et personnaliser la ligne. Allons-y et sélectionnons les développements qui portent le nom de la classe. Tout d'abord, définissons la largeur et la hauteur. Je vais faire dix rampes de largeur. Quant à la hauteur, faisons-la 0,1 rem. Enfin, créez de l'espace sur le côté droit en utilisant la marge, n'est-ce pas ? Avec une valeur de cinq tours. À l'heure actuelle, rien ne se passe ici. La ligne n'est pas visible et je vais l'afficher en utilisant les pseudo-éléments after. Nous allons donc sélectionner la ligne après. Videz ensuite le contenu. Et définissez également la position en la rendant absolue. Maintenant, pour positionner la ligne en fonction de son élément parent, nous devons attribuer au développement une position relative. Définissez ensuite la largeur et la hauteur. Nous devons les fabriquer tous les deux à cent pour cent. Et enfin, changeons la couleur de fond, rendons-la blanche. Maintenant, la ligne est visible et il est temps de faire fonctionner le menu. Nous devons sélectionner Non le menu assigné à l'affichage du flex. Sélectionnez ensuite le lien. Débarrassez-vous des styles par défaut à l'aide de la décoration de texte. Aucune. Peut-être qu'il est positionné par rapport à l'autre. Ensuite, je vais placer les objets ci-dessous. Pour cela, nous avons besoin de cinq tours avec une valeur maximale. À présent, les éléments sont positionnés à leur emplacement par défaut. Ensuite, nous devons les masquer et les afficher en survol. Donc, pour masquer les éléments, utilisons l'opacité zéro Sélectionnez ensuite le menu avec le pointeur de la souris, puis cliquez sur le lien du menu Ici, nous devions sélectionner le menu car nous devions placer le pointeur sur le menu Si nous sélectionnons les textes Suivez-nous, nous aurons des problèmes à l'avenir. Parce que finalement, nous devons également passer la souris sur les éléments pour changer les couleurs d'arrière-plan Rendons donc les objets visibles et remettons-les à leur place. Par conséquent, nous avons besoin ici du top zéro et de l'opacité un. Les éléments sont maintenant masqués par défaut, et si nous survolons le bouton Suivez-nous , ils apparaîtront Mais là, nous avons le problème. Si je passe la souris sur l'ensemble du menu, les éléments apparaîtront Quoi qu'il en soit En fait, nous n'en avons pas besoin. Nous devons afficher les éléments une fois que nous avons survolé le bouton Suivez-nous Pour ce faire, nous devons désactiver les événements du pointeur pour le menu. Je veux dire, lorsque nous survolons le menu, éléments ne doivent pas apparaître Je vais donc utiliser l'une de ces propriétés CSS appelées événements de pointeur. Et je vais le régler sur aucun Maintenant, si je passe la souris sur l'ensemble du menu, les éléments ne s'afficheront pas En fait, ce n'est toujours pas le résultat que nous voulons obtenir. L'étape suivante consiste à activer les événements du pointeur pour le retour du menu. Mais nous devons le faire en vol stationnaire. Nous allons donc sélectionner le menu avec le pointeur de la souris et créer des événements de pointeur. Et en plus de cela, nous devons également activer les événements de pointage pour nous suivre. Sinon, ça ne marchera pas. Sélectionnons donc les éléments div avec la classe follow et créons ses événements de pointeur Alors maintenant, lorsque je passe la souris sur Suivez-nous, les éléments s'affichent Si je passe la souris dessus, ils s'afficheront toujours. Mais si je passe la souris sur les éléments alors qu'ils sont masqués, ils ne s'afficheront pas car pour le moment , la propriété des événements du pointeur est désactivée. Nous devons donc absolument passer la souris sur les abonnés. J'espère que cela a du sens pour vous. Maintenant que nous avons réussi à afficher les éléments, il est temps de s'occuper des effets de transition. Nous devons également faire fonctionner la ligne. Je vais donc utiliser la transition pour les éléments mais avec un délai différent. Allons-y et sélectionnons l'élément séparément en utilisant la nième pseudo-classe enfant Nous avons donc besoin du lien du menu suivi de la fonction nième enfant. Nous devons spécifier ici le nombre d'articles. Nous devons commencer par un et passer par cinq. Parce qu'au total , nous avons cinq articles. Nous devons maintenant effectuer la transition avec les valeurs suivantes. Nous avons d'abord besoin d'un top avec une durée de 0,5 s et avec un temps de retard de 0,1 s. Ensuite, nous avons besoin d'une opacité de 0,5 s. Et encore une fois avec un délai de 0,1 s. Dupliquons ce code quatre fois , puis changeons le nombre des éléments ainsi que le montant du délai de retard Pour le second élément, nous avons besoin de 0,2 s. Je veux dire le délai. Pour le suivant, nous avons besoin de 0,3 s, puis de 0,4 s. Enfin, pour le dernier élément, nous avons besoin de 0,5 s. Donc si je passe la souris sur le texte, les éléments apparaîtront correctement avec un certain temps de retard D'accord ? Maintenant je vais faire fonctionner cette ligne. Par défaut. Il doit être caché. Et lorsque nous survolons le texte, il doit s'afficher de gauche à droite Je vais mettre sa largeur à zéro par défaut. Ensuite, je vais sélectionner le menu avec le pointeur de la souris, suivi de la ligne avec les pseudo-éléments après Et nous devons atteindre la largeur à cent pour cent. Enfin, utilisons à nouveau la transition. Nous en avons besoin ici avec, d'une durée de 0,5 s. Très bien, comme vous pouvez le voir, la ligne fonctionne bien et nous avons presque terminé notre projet La dernière chose que je vais faire est de changer les couleurs d'arrière-plan lorsque nous survolons les éléments Allons-y et sélectionnons à nouveau les éléments séparément en utilisant la nième pseudo-classe enfant Mais maintenant c'est fini. Nous avons donc besoin d'un lien vers le menu. Ensuite, nous devons utiliser nth-child one. Puis suivi du survol. Le premier élément est Facebook. Changeons donc la couleur de fond. Utilisez ici la couleur originale de Facebook. C'est 35998. Dupliquez ensuite ce code quatre fois et modifiez les chiffres et les couleurs. Le second sera de trois F, de sept à neuf. Le prochain devrait être 55 ACE. Ensuite, nous avons 0077, B5. Enfin, nous avons besoin de cd to 01. Ensuite, ajoutons les transitions aux éléments. Je vais utiliser ici, le multicolore plus grossier. Insérez ensuite la couleur d'arrière-plan, le point de durée ou le second. Ainsi, comme vous pouvez le constater, lorsque nous survolons l'état de l'élément, la couleur d'arrière-plan change en douceur La seule chose que je n'aime pas ici, c'est la forme des arrière-plans. Je vais le rendre légèrement arrondi et je veux aussi créer de l'espace à l'intérieur. Nous avons donc besoin de rembourrage. Nous valorisons 0,5 rem et le borderradius avec la valeur 0,5 gramme également. Très bien, maintenant tout fonctionne parfaitement et en fait, nous avons terminé notre projet 19. Projet 16 - Menu déroulant: Dans cette vidéo, nous allons créer un menu déroulant avec le HTML, le CSS et le JavaScript. La liste déroulante aura des effets de survol intéressants. Le projet va être un petit projet, mais vous allez apprendre à créer de jolis effets en utilisant HTML, CSS et JavaScript. Très bien, allons-y et examinons les projets. Nous avons ici une image de fond en plein écran avec un titre au centre Vous pouvez également voir trois éléments de navigation différents en haut de la page. Si nous les survolons, un menu déroulant s' affichera avec de jolis effets de transition OK, alors c'est ça, ce que nous allons construire. J'ai créé un nouveau dossier sur le bureau appelé Menu déroulant. Allons-y et ouvrons ce dossier dans le code VS. Comme vous pouvez le constater, j'ai ici quelques dossiers différents. Je veux dire des fichiers pour HTML, CSS et JavaScript. Et j'ai également préparé le fichier texte dans lequel je stocke une certaine confiance en ce qui concerne les moyens de liste déroulante. En plus de cela, j'ai un dossier pour l'image de fond. Très bien, allons-y et exécutons le projet dans le navigateur. Pour cela, je vais utiliser un package appelé Live Server, qui nous permet d' ouvrir un projet dans le navigateur et d'effectuer mises à jour sans actualiser la page à chaque fois. Vous pouvez donc télécharger et installer ce package. Vous pouvez également télécharger les fichiers source de démarrage à partir du lien dans la description. OK, Enfin, plaçons l'éditeur dans le navigateur. Comme ça. Et commencez à créer le balisage HTML. J'ai déjà préparé le document HTML de base ici. J'ai deux liens différents et j'ai eu des éléments. Un pour la police Google et le second pour le fichier CSS. De plus, j'ai une balise de script pour le fichier JavaScript ci-dessous. Allons-y et ouvrons les développements, qui seront le conteneur de l'ensemble du contenu. Ensuite, je vais ouvrir un élément de section avec le wrapper Class Cette section sera composée de deux parties différentes. La première sera une bannière avec un titre. Quant au second, il devrait s'agir de la navigation. Nous allons donc l'insérer ici lors du développement avec le nom de classe binaire. Ensuite, dans le développement, ouvrons le titre H1 avec le texte de la bannière de la classe avec le menu déroulant du contenu Très bien, ensuite je vais ouvrir un élément nul, à navigation du nom de la classe Nous aurons donc au moins un élément principal avec trois éléments de liste différents dans la barre de navigation. Et chacun d'eux aura son propre menu déroulant. Ouvrons les éléments d'URL avec un nom de classe. Au moins maintenant. Ensuite, nous avons besoin de l'élément LI, qui devrait avoir la classe nav item. Il sera suivi du lien avec le lien navigation de la classe et mettra le texte « développement Web ». Ainsi, comme nous l'avons dit, chaque élément de navigation doit avoir son propre menu déroulant. Par conséquent, insérons ici une nouvelle liste dans la liste déroulante des noms de classe Dans le premier menu déroulant, nous aurons six éléments de liste différents Ouvrons le premier. L' élément de la liste déroulante des classes qui insère ici le lien avec le lien déroulant du nom de la classe Nous allons donc insérer ici quelques noms de technologies avec les descriptions. Le premier sera du HTML. Ouvrez ensuite l'élément P. Et maintenant je vais récupérer la description dans le fichier texte. Nous avons besoin ici de la description du code HTML. Collons-le ici. Comme je l'ai dit, dans l'ensemble, nous aurons six points. Dupliquons donc cinq fois le mensonge. Le second sera du CSS. Reprenons sa description dans le fichier texte. La prochaine étape devrait être de réagir. Ensuite, nous aurons le nœud suivi de l'express. Le dernier sera mongodb Très bien, voyons le premier menu déroulant Dupliquons deux fois l' intégralité du premier article du roman avec sa liste déroulante. Le deuxième élément sera le front-end. Dans ce cas, au total, nous aurons quatre éléments différents. Je vais laisser ici le HTML et le CSS au lieu de dupliquer le CSS. Et insérez ici le JavaScript avec sa description. Je vais partir d'ici, réagir et me débarrasser du reste des atomes. Très bien, c'est tout pour le deuxième point. Le troisième élément sera le back-end. Et je ne vais laisser ici que les trois derniers points. D'accord ? La dernière chose à faire dans un fichier HTML est donc de créer un développement, qui sera utilisé pour l'arrière-plan du menu déroulant Nous allons l'insérer juste au-dessus la balise de navigation de fermeture et lui attribuer le nom de classe, Dropdown PG. Très bien, c'est tout à propos du code HTML des éléments qui sont créés et préparés Ensuite, nous devons commencer à écrire du CSS. Tout d'abord, je vais créer des styles de réinitialisation pour tous les éléments. Pour les sélectionner, nous devons utiliser un astérisque Débarrassons-nous de la marge et du rembourrage par défaut. Mettons-les tous les deux à zéro. Je vais également supprimer le soulignement par défaut des affichages et les puces par défaut des éléments de la liste afin que nous devions utiliser décoration de texte avec la valeur none ainsi que le style de liste Enfin, modifiez la famille de polices. Tout au long de ce projet, nous allons utiliser des polices appelées EB, Garamond, groupe de polices serif Très bien, voyons maintenant que le contenu s'affiche différemment. Tout au long de ce projet, nous allons utiliser la RAM comme unité de mesure. Par défaut, 1 g est égal à 16 pixels car la taille de police du code HTML est égale à 16 pixels. Je veux convertir une RAM en dix pixels. Et pour cela, nous devons réduire la taille de police du code HTML. Et nous devons le porter à 62,5 %. OK, allons-y et commençons à travailler sur l'emballage. Je vais étendre le wrapper à toute la page. Pour cela, définissons sa largeur à cent pour cent. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Par conséquent, nous avons besoin ici de 100 pH. Après cela, définissons l'image comme arrière-plan en plein écran Tout d'abord, utilisons dégradé linéaire avec des couleurs blanches, mais avec une opacité différente Dans le premier cas, je vais utiliser le point d'opacité pour. le second cas, utilisons le point d'opacité vers. Après ça. Nous devons spécifier l'URL de l'image. Comme vous le savez, nous avons un dossier appelé images dans lequel je stocke une image appelée BG point JPG. Ensuite, nous avons besoin de Center et pas de répétition. Enfin, nous devons définir la taille de l' arrière-plan avec la valeur de couverture. Très bien, comme vous pouvez le voir, nous avons défini l'image en plein écran comme arrière-plan Ensuite, je vais m' occuper du panel. Allons-y donc et sélectionnons-le. Je vais régler sa largeur à 200 %. Également. Nous devons le positionner. Et pour cela, rendons sa position absolue. Ensuite, je vais le déplacer vers le bas avec la position supérieure. Réglons-le à 35 %. D'accord, la position de la bannière est modifiée et nous devons maintenant travailler sur le titre lui-même. Je vais le placer au centre de la page, et je vais aussi le rendre plus beau. Allons-y et sélectionnons le texte de la bannière. Placez-le au centre en utilisant le centre d'alignement du texte. Augmentez ensuite sa taille de police, faites-en sept RAM. Changez également la couleur je vais la rendre blanche. Ensuite, transformons le texte en majuscules à l'aide de la propriété de transformation du texte Je souhaite également créer un espace entre les lettres en utilisant l' espacement des lettres avec le point de valeur par rapport à une rampe. Enfin, je vais utiliser un effet d'ombre. Nous allons vous insérer les valeurs 0,2, 0,5 RAM. Et comme couleur, utilisons 888. Très bien, en fait, avec la première partie, nous avons terminé. Je suis sur la bannière. Nous devons maintenant nous occuper de la navigation. Allons-y et sélectionnons la liste principale, qui contient la classe. Et pas des moindres. Je vais placer les éléments de la liste horizontalement dans une rangée. Et pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, afin de les centrer horizontalement, utilisons le centre du contenu de la justification. Ensuite, je vais travailler sur l'élément LI. Nous allons donc le sélectionner avec l'élément de navigation de classe. Tout d'abord, créons de l'espace en haut des éléments en utilisant la marge supérieure avec une valeur en grammes Ensuite, je vais placer le texte au en utilisant le centre d'alignement du texte. Enfin, définissons la largeur. Je vais le régler sur une largeur de 26 fenêtres d'affichage. Cela signifie que nous avons défini la largeur à 26 % de la fenêtre d'affichage Enfin, personnalisons les liens, sélectionnons-les, augmentons la taille de la police, convertissons-en en béliers Je vais également modifier l'épaisseur de la police. Réglons-le à 600. Transformez ensuite le texte en majuscules. Changez la couleur. Dans ce cas, je vais utiliser la couleur pour quatre ou cinq F9 FBI et créer un espace entre les lettres Réglons l' espacement latéral à 0,1 RAM. Enfin, je vais utiliser Shadow avec des valeurs de zéro point pour atteindre 0,5 RM. Et la couleur soit 888. Très bien, donc avec les éléments de la liste principale, nous en avons terminé. Maintenant, je dois m'occuper des listes déroulantes. Allons-y et sélectionnons-les dans la classe Dropdown. Créons de l'espace en haut en utilisant la RAM Margin Top One. Et je vais aussi changer la couleur d'arrière-plan la liste pendant un moment. Faisons en sorte qu'il soit blanc. Hein ? Ensuite, je vais passer à autre chose et personnaliser l'élément déroulant. Nous allons donc le sélectionner. l'heure actuelle, le texte est placé au centre, mais nous devons le placer sur le côté gauche. Utilisons donc des textes alignés sur la valeur à gauche. Je vais également créer de l'espace en utilisant du rembourrage. Réglons ça sur deux tours. En haut, deux segments sur le côté droit, zéro en bas et 2 g sur le côté gauche. Droite. En fait, nous avons également besoin de la même quantité d'espace à la fin de la liste. Je veux dire, après le dernier article. Pour cela, utilisons une pseudo-classe appelée last-child et sélectionnons le dernier élément Nous avons besoin de l'élément déroulant, suivi de la dernière pseudo-classe enfant Afin de créer de l' espace en bas, utilisons padding-bottom pour la valeur deux rampes. Très bien. C'est donc tout pour les éléments LI. Allons-y et personnalisons les liens. Sélectionnez le lien déroulant. Je vais changer la taille de la police, en faire 1,6 RAM. Rendez également l'épaisseur de la police plus audacieuse. Transforme le texte en majuscules. Et enfin, changez de couleur. Je vais utiliser à nouveau la couleur 245, F9. Ok avec les liens, c'est terminé. Enfin, je vais commencer les descriptions. Ils sont représentés par les éléments P. Alors sélectionnons-les. Je vais augmenter la taille de la police. Faisons-la arrondir de 1,6 et changeons de couleur. Utilisons ici F5, F6, 061, Très bien, donc pour le moment, les listes déroulantes sont bien meilleures listes déroulantes Et en fait, nous en avons presque fini avec le style. Comme vous pouvez le voir, le titre « Menu déroulant » est placé au-dessus des menus Je veux le placer derrière eux. Et pour cela, je vais utiliser la propriété z-index. Tout d'abord, définissons la position de la liste déroulante, sinon l'index ne fonctionnera pas Rendons la position relative, puis utilisons la valeur de l'indice. Disons 100. Très bien, considérons que le titre est placé derrière les menus Et maintenant je vais créer un effet de survol. Nous allons masquer les menus par défaut et les afficher lorsque vous passez la souris. Donc, pour les masquer, utilisons l'opacité zéro et la visibilité cachée Sélectionnez ensuite l'élément de navigation avec le pointeur de la souris, suivi de la liste déroulante Ainsi, pour afficher les spécifications du menu, nous avons besoin d'opacité 1 et d'une visibilité visible Alors maintenant, si je passe la souris sur l'élément, les menus s'afficheront Mais en fait, nous avons ici un petit problème. n'est pas nécessaire de survoler l'élément lui-même, car si nous le survolons vers le bas, les menus s'afficheront de Donc, pour résoudre ce problème, nous devons régler la hauteur à zéro. Par défaut. Nous devons le rendre automatique lors du survol. Alors maintenant, le problème est résolu. Enfin, ajoutons ici une transition avec des valeurs toutes et 0,1 s. D'accord ? Il s'agit donc d'une simple liste déroulante standard sans aucun effet supplémentaire Jetons à nouveau un coup d'œil à la version finale de nos projets. Lorsque nous survolons les éléments l'arrière-plan apparaît d'un endroit différent Pour être plus précis depuis l'endroit où nous l'avons survolé la dernière fois. De plus, cet arrière-plan est un élément différent et pas seulement la couleur de fond. Comme vous vous en souvenez, nous avons créé le développement avec un nom de classe, Dropdown BG en HTML Allons-y, sélectionnons ces éléments et définissons sa largeur et sa hauteur. Je vais régler la largeur à 40 pistes. Pour ce qui est de la hauteur, je vais la porter à 60 g. En fait, nous avons défini ces propriétés et ces valeurs de manière temporaire. Finalement, nous les définirons à partir du JavaScript. Maintenant, afin de rendre l'arrière-plan visible, je vais définir la couleur de fond. Je veux que l'arrière-plan soit légèrement transparent. Utilisons donc ici la valeur RGBA 243, encore une fois, 243243, avec Et en fait, supprimez le fond blanc de la liste déroulante. Très bien, on considère donc que le contexte est faisable. Arrondissons-le légèrement en utilisant border-radius avec la valeur 0,3 run. Et créez également des effets d' ombre en utilisant Box Shadow avec la valeur 0,5 RAM, une RAM et la couleur 757575 Ensuite, je vais créer une petite flèche. Je veux dire la forme littérale, que vous voyez ici. Pour cela, utilisons l'un de ces pseudo-éléments appelés précédemment. Sélectionnez Dropdown VG avec les pseudo-éléments avant. Tout d'abord, je vais vider le contenu. Nous devons ensuite rendre sa position absolue afin de la positionner correctement. Et en plus de cela, nous devons définir la position de son élément parent. Rendons-le également absolu. Ensuite, je vais donner la forme à placer avant les pseudo-éléments. Je vais le faire en utilisant quelques propriétés de bordure. Je vais commencer par la bordure gauche. Attribuons-lui les valeurs d'une RAM, solide et de couleur transparente. Ensuite, je vais le dupliquer deux fois. La deuxième propriété va être médiocre. La droite, avec les mêmes valeurs que pour la troisième, sera la bordure inférieure comme couleur. Utilisons le rouge D'accord, pour que la flèche soit réalisable et nous devons maintenant prendre soin de sa position Je veux le placer parfaitement au centre de l'arrière-plan. Et il doit également être placé en haut de celui-ci. Je vais donc le placer en première position zéro. Il faut également que nous restions à 50 %. En plus de cela, nous devons utiliser Transform. Avec la fonction de traduction. Nous devons transmettre ici les valeurs -50  % puis -100 OK, la dernière chose à faire est de changer la couleur. Utilisons ici la même couleur de lumière au lieu du rouge. Copions-le et collez-le ici. Comme je l'ai dit, nous définissions temporairement la largeur et la hauteur, et maintenant je vais m'en débarrasser. Et nous devons également masquer l'arrière-plan par défaut. Nous avons donc besoin ici d'une opacité nulle et d'une visibilité cachée Très bien, avec le CSS, nous avons presque terminé. Il est maintenant temps d'écrire du JavaScript. Passons au fichier script.js. Tout d'abord, je vais créer une variable dans laquelle nous allons stocker un élément DIV avec la classe Dropdown PG Créez donc une nouvelle variable, appelez-la Dropdown PG. Sélectionnez ensuite l'élément à l' aide de la méthode de sélection de requêtes. Nous devons spécifier ici le nom de la classe, qui sera Dropdown BG. D'accord, nous devons maintenant associer à chaque élément de navigation un gestionnaire d'événements passant la souris dessus Pour cela, nous devons sélectionner tous les éléments et les parcourir en boucle. Allons-y et sélectionnons les éléments de navigation l'aide du sélecteur de requêtes, toutes les méthodes Nous devons spécifier ici l'élément Class Name now, en fait, le sélecteur de requête, tous les retours de méthodes et un objet de type tableau appelé Et nous devons le transformer en un tableau. Pour cela, je vais utiliser la méthode array point from. Ensuite, utilisons l'une des méthodes d' aide au tableau appelées pour chacune Cela nous permet d' exécuter la fonction pour chaque élément du tableau séparément. Nous devons passer ici une fonction de flèche qui prend le paramètre qui sera l' élément actuel lors du bouclage du tableau Nous devons maintenant attacher à l' élément le pointeur de la souris sur le gestionnaire d'événements Nous avons donc besoin de votre propre souris. En fait, l'événement de survol de la souris est similaire au survol en CSS. Donc, en survolant, nous devons rendre l'arrière-plan visible. Par conséquent, nous devons insérer dans votre menu déroulant opacité de point de style PG égale à un Ensuite, je vais dupliquer cette ligne de code. Nous en avons besoin ici. Visibilité. Nous dévalorisons heure actuelle, l'arrière-plan n' est pas visible car il n'a ni la largeur ni la hauteur. Comme nous l'avons dit, nous allons définir la largeur et la hauteur à partir de JavaScript. Alors allons-y et faisons-le. Définissez une largeur pour la liste déroulante. Je veux dire, nous avons besoin d'une largeur de point de style Dropdown PG. Nous allons donc faire en sorte que la largeur de l'arrière-plan égale à la largeur du menu déroulant lui-même. Je veux dire la liste déroulante qui devrait s'afficher lorsque vous survolez. Pour ce faire, je vais utiliser l'une des méthodes JavaScript appelée get computed style. Cette méthode nous donne toutes les propriétés CSS et les valeurs réelles calculées de l'élément spécifié Utilisons donc cette méthode. À l'intérieur de la parenthèse. Nous devons spécifier que l' élément sera une liste déroulante. Et afin d'atteindre un élément bidimensionnel, faisons une pause ici, l'élément point dernier élément enfant Parce que si nous regardons le fichier HTML, nous constaterons que Dropdown est le dernier élément enfant du jeu maintenant, n'est-ce pas ? OK, enfin, nous devons choisir la propriété. Ensuite, nous avons également besoin de la même chose pour la hauteur. Dupliquons donc cette ligne de code et changeons la largeur en hauteur. Donc, si je passe la souris sur les éléments, arrière-plan s'affichera Il a changé de largeur et de hauteur en fonction de l'élément que nous survolons Mais le problème ici est que arrière-plan a une mauvaise position. Nous devons donc nous en occuper. Avant cela, ajoutons une transition à l'arrière-plan, il faut lui attribuer du CSS, les valeurs se terminent toutes à 0,3 s. Très bien, nous avons maintenant un effet de transition fluide et il est temps de prendre soin de la position de l'arrière-plan Je vais le définir dynamiquement à partir du JavaScript. Définissons d'abord la première position. Utilisez la liste déroulante, en forme de point G en haut. Maintenant, je vais utiliser des modèles ES6, des chaînes. Ouvrons les backticks. Ensuite, il nous faut le signe du dollar avec les bretelles bouclées. Nous devons donc définir la position supérieure comme étant décalée en haut de la liste déroulante. En fait, la propriété offset top renvoie la position supérieure par rapport au haut de l'élément parent. Et cela nous donne la valeur en pixels. Nous devons donc insérer ici item.name, last elements, child Comme nous devons accéder à la liste déroulante, elle doit être suivie du haut décalé Ensuite, nous devons spécifier Px car nous avons besoin de pixels. En fait, nous avons également besoin de la même chose pour la position gauche. Dupliquons donc cette ligne de code et changeons le haut vers la gauche. Maintenant, si je passe la souris sur les éléments, l' arrière-plan s' affichera dans les bonnes positions Donc tout fonctionne bien sauf une chose. Si je place la souris hors de l'élément, le contenu du menu déroulant se masquera L'arrière-plan lui-même conservera cet avion. Nous devons donc le masquer lors de l'événement Souris Out. Nous avons donc besoin de item.name lorsque la souris sort. Reprenons ensuite ces deux lignes à partir d'ici, collez-les et modifions les valeurs. Pour l'opacité, nous avons besoin de zéro. Quant à la visibilité, elle doit être chauffée. D'accord ? Maintenant, le problème est résolu. Tout fonctionne bien. Mais en fait, nous avons ici un petit problème. Nous avons besoin d'un peu de temps avant que les éléments du menu déroulant ne s'affichent Et je vais aussi les afficher de droite à gauche. Pour cela, utilisons Transform avec la fonction de traduction. Je veux dire traduire selon l'axe X en tant que valeur. Insérons ici dix pour cent. Ensuite, en survolant, nous devons rendre la valeur de fonction Translate X nulle Enfin, utilisons ici la transition avec un certain délai. Nous devons attribuer à tout cela une durée de 0,1 s et un temps de retard de 0,2 s. Bon, maintenant tout fonctionne parfaitement, ce qui est assez étrange avec ce petit projet. J'espère que c'était intéressant car nous avons utilisé ici différentes techniques et j'espère que vous apprendrez de nouvelles choses. 20. Projet 17 - Navigation: Dans cette vidéo, nous allons créer un menu créatif désormais supérieur avec du HTML, du CSS et du JavaScript. Très bien, allons-y et décrivons le projet. Nous avons un bouton au centre de la page avec trois points. Si je clique dessus, ces points se transformeront en x avec une transition fluide. Et aussi la barre de navigation, que nous afficherons avec quelques éléments de navigation. Si je clique sur le X , le menu se fermera à nouveau avec quelques effets de transition. Et nous allons également récupérer trois points au lieu de x. Voilà , c'est tout. Ce projet va être un petit projet, mais j'espère qu'il sera intéressant. Alors commençons. J'ai créé un nouveau dossier sur le bureau dans lequel j'ai trois fichiers différents pour HTML, CSS et JavaScript. Allons-y et ouvrons ce problème dans le code VS. En fait, les fichiers CSS et JavaScript sont vides pour le moment. En ce qui concerne le fichier index.html, j'ai préparé le document HTML de base. J'ai deux liens dans les éléments principaux, un pour les icônes Font Awesome et un autre pour le CSS. J'ai aussi ici une balise de script pour le fichier JavaScript. Vous pouvez télécharger les fichiers de démarrage à partir du lien figurant dans la description. Très bien, allons-y et exécutons le fichier dans le navigateur. Pour cela, je vais utiliser un package appelé Live Server. Cela nous permet en fait d' exécuter le projet en direct dans le navigateur et d'effectuer des mises à jour sans actualiser la page chaque fois afin que vous puissiez l' installer et l'utiliser. Enfin, plaçons l' éditeur et le navigateur côte à côte et commençons à créer du balisage HTML Je vais ouvrir un élément div qui sera le conteneur Ensuite, nous avons besoin d'éléments de navigation HTML5. Attribuons-lui un nom de classe, navbar. Cela encapsulera toute la barre de navigation, je veux dire le bouton et les éléments de navigation. Ensuite, je vais créer un bouton. Il sera représenté par un développement. Attribuons-lui la classe BTN. Nous aurons donc trois points. Créons-les à l'aide de développements. Attribuons-la à différentes classes. Le premier sera composé de quatre points de style courants. Et le second concernera les styles individuels à points 1. Dupliquez ensuite cette ligne de code et modifiez les noms des classes. Nous avons besoin de. Point deux, point trois. D'accord ? le moment, le bouton n' est pas visible car les développements sont vides et nous n'avons aucun style. Ensuite, je vais créer le menu lui-même. Ouvrons un autre développement avec le nom de la classe, Nav Menu. Donc, dans l'ensemble, nous aurons quatre articles différents. Chacun d'entre eux sera créé avec le lien et les icônes Font Awesome. Ouvrons donc l'élément de lien avec le lien du menu de navigation du nom de la classe. Insérez ensuite vos éléments oculaires avec des classes. Fas, FA Dash, entier. Dupliquez ensuite l'élément de lien trois fois et modifiez les noms de classe. Pour le second, nous avons besoin de FAB, FA dash Blogger. Le prochain sera le tiret FAS, le diagramme en tirets du projet Et pour le dernier, utilisons FAS, FA, Dash Actors, car Très bien, nous avons donc ici les quatre icônes et en fait, avec le HTML, nous avons terminé Tous les éléments sont créés et préparés. Allons-y, ouvrons le fichier CSS et commençons à écrire du CSS. Tout d'abord, je vais créer des styles de réinitialisation. Débarrassons-nous de la marge et du rembourrage par défaut pour chaque élément Pour sélectionner tous les éléments, nous devons utiliser des astérisques, puis mettre marge et le remplissage à zéro. Tout au long de ce projet, je vais utiliser une mémoire vive comme unité de mesure. Par défaut, un rem est égal à 16 pixels car la taille de police de l' élément HTML est égale à 16 pixels. Je vais convertir une RAM en dix pixels car je pense que ce sera plus confortable et pratique. Pour ce faire, nous devons donc réduire la taille de police du code HTML. Et nous devons le porter à 62,5 %. Comme vous pouvez le constater, les icônes sont devenues plus petites. Très bien, passons à autre chose et prenons soin du conteneur. Je vais l'étendre à l'ensemble de la page. Allons-y et sélectionnons-le Définissez sa largeur à 100 %. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Par conséquent, nous avons besoin ici de 100 vh. Changez ensuite la couleur de fond, mettez-la en gris clair à l'aide de E. Ensuite, je vais envoyer les icônes correspondantes. Je vais utiliser Flexbox. Nous devons créer un conteneur flexible de développement à l'aide de Display Flex. Ensuite, pour centrer les éléments horizontalement, nous devons utiliser justify-content En ce qui concerne le centrage vertical, nous avons besoin d'un élément linéaire au centre, non ? C'est tout pour le conteneur. Ensuite, je vais m' occuper du menu lui-même. Allons-y et sélectionnons le menu de navigation. Tout d'abord, définissons ce qui en fait 46 RAM. Pour ce qui est de la hauteur, je vais la régler à 3,5 rem. Changez ensuite la couleur d'arrière-plan. Dans ce cas, je vais utiliser la couleur 2578. Ensuite, je vais créer de l'espace dans le menu à l'aide d'un rembourrage Réglons-le sur deux REM, en haut et en bas, et sur trois rampes sur les côtés gauche et droit. De plus, je vais arrondir le menu. Pour cela, nous devons utiliser border-radius avec une valeur de cinq rem Enfin, créons un effet d' ombre à l'aide de box-shadow, qui aura les valeurs suivantes Nous avons besoin de 10 remparts, trois rampes. En ce qui concerne la couleur, je vais utiliser la valeur RGBA 37172120 et l'opacité 0,4 et Très bien, l'arrière-plan est prêt pour les icônes. Ensuite, je vais personnaliser les icônes. Alors sélectionnons-les. Nous avons besoin du lien du menu de navigation, suivi de l'île. Augmentons la taille de la police, faisons-la 4M. Pour ce qui est de la couleur, je vais les rendre blanches. heure actuelle, je peux donc bien mieux paraître et nous devons prendre soin de leurs positions. Nous devons définir leurs positions individuellement, mais avant cela, nous devons leur ajouter des styles communs. Nous allons donc sélectionner l'élément de lien et rendre sa position absolue. Je vais me positionner, je peux le dire en fonction de la barre de navigation. Et pour cela, nous devons relativiser la position du nanopore Allons-y donc, sélectionnons-le et attribuons-lui une position relative. Après cela, je vais centrer les éléments spécialement pour cela. Fixons la première position à 50 %. Et nous devons également utiliser la fonction Transform with Translate. Je veux dire traduire y avec la valeur -50 pour cent. Nous devons maintenant définir les positions gauche et droite pour tous les éléments individuellement. Pour cela, je vais utiliser l'une de ces pseudo-classes CSS. C'est ce qu'on appelle un enfant. Nous allons sélectionner le premier élément. Pour ça. Vous devez sélectionner les éléments du lien qui doivent être suivis de la nième pseudo-classe enfant C'est en fait la fonction. Et entre parenthèses, nous devons spécifier le nombre. Dans ce cas, nous avons besoin du premier élément, nous devons donc en transmettre un ici. Faisons la position gauche du premier élément pour la RAM. Ensuite, je vais dupliquer ce code trois fois car nous avons quatre icônes. Pour la deuxième icône, nous avons besoin position gauche avec la valeur 13 loyers. Définissons ensuite la position du troisième élément. Dans ce cas, nous devons utiliser la bonne propriété avec la valeur 13 rampes. En ce qui concerne le quatrième élément, nous avons besoin de la bonne position avec une valeur pour n. D'accord ? Ainsi, tous les articles sont positionnés. Comme vous pouvez le constater, nous avons de l'espace au centre du menu, qui appartient en fait au bouton. Allons-y donc et commençons à travailler dessus. Je vais sélectionner le développement dont le nom de classe est point btn. Alors allons-y et rendons cela possible. Je vais régler la largeur et la hauteur, toutes deux pour dix pièces. Et changez également la couleur d'arrière-plan. Portez à cinq sur 78. L'élément div est donc visible, mais pour le moment, il a perturbé toute la mise en page Nous devons donc nous en occuper. Je vais le placer au centre du menu. Définissons donc cette position comme absolue Ensuite, afin de la centrer parfaitement, je vais utiliser les propriétés et valeurs suivantes. Nous devons fixer les positions du haut et de la gauche, les deux à 50 %. Et nous devons également utiliser Transform avec la fonction de traduction. Et nous devons passer votre -50 % deux fois. Comme vous pouvez le voir maintenant, il est placé au centre. Ensuite, je vais l' arrondir. Et pour cela, comme vous le savez, nous avons dû utiliser borderradius avec une valeur de 50 %. Créez également un effet d'ombre. Utilisez box-shadow avec les valeurs 01 RAM. Trois rems. C'est probablement la couleur. Utilisons les valeurs RGBA 13, 83, 57 et l'opacité 0,4 Enfin, changeons le type du curseur, le faisant pointer vers le bouton prêt. Maintenant je vais m' occuper des points. Allons-y et sélectionnons-les en utilisant un nom de classe courant, point. Et attribuez-lui largeur et hauteur. Je vais les régler tous les deux sur une seule RAM. Modifiez également la couleur d'arrière-plan, mettez-la en blanc, puis tracez des points autour de celle-ci l'aide du rayon de bordure dont la valeur est de 50 %. Comme vous pouvez le voir maintenant, points se sont retrouvés à l'extérieur du bouton. Nous devons prendre soin de leurs positions. Je vais les centrer à l'aide de Flexbox. Nous avons besoin de Display Flex. Ensuite, je vais utiliser le contenu de justification avec la valeur espacée de manière uniforme. En fait, l' espacement régulier nous permet de créer un espace uniforme entre les éléments flexibles. Enfin, pour le centrage vertical, je vais utiliser aligner les éléments au centre Très bien. Comme vous pouvez le constater, tout est prêt pour que la barre de navigation fonctionne Encore une fois. Une fois que j'ai cliqué sur le bouton, ces points, je veux dire que le premier et le troisième devraient se transformer en x. Quant au second, il devrait être masqué. Et le menu doit également se masquer et s'afficher au clic. Donc tout d'abord, je vais transformer les points en x, puis nous allons le faire fonctionner en utilisant JavaScript. Allons-y et sélectionnons le premier. Il a une classe avec des points un Faisons en sorte que sa largeur soit de 0,8 RAM. Pour ce qui est de la hauteur, faisons-en sept points. Et utilisez également border-radius, quelle valeur ? Un loyer. Ensuite, je vais dupliquer ce code et je vais changer le nom de la classe. Nous avons besoin ici du point trois. C'est à peu près le troisième point. Ensuite, nous devons nous occuper du second. Comme nous l'avons dit, nous devons masquer ce deuxième point. Allons-y et sélectionnons-le. Et attribuez-lui une opacité nulle. Très bien, maintenant je vais créer le x en utilisant ces deux lignes Pour cela, je vais utiliser les fonctions de rotation et de translation. Tout d'abord, faisons pivoter les lignes de 45 degrés. Utilisez Transform. Avec la fonction de rotation. Dans le cas des premiers points, nous devons utiliser 45 degrés, mais avec le signe moins. Copions ensuite cette ligne de code. Collez-le pour le troisième point et supprimez le signe moins. Comme vous pouvez le voir, les lignes sont pivotées, mais nous n'avons pas de x. Nous devons donc également utiliser la fonction Translate pour résoudre ce problème La fonction Translate déplace en fait l'élément selon l'axe x ou y. Je veux dire selon les directions horizontale et verticale. Utilisons la traduction avec des valeurs en RAM. Et encore à louer. Copiez-le et collez-le ensuite pour la troisième ligne. Dans le cas de la troisième ligne, nous devons donner à la première valeur une valeur négative. D'accord ? Donc, pour l'instant, nous avons un x parfait et il est temps de le faire fonctionner. Je vais donc créer une nouvelle classe et du CSS. Ensuite, en utilisant la méthode toggle, nous ajouterons et supprimerons cette classe des points à l'aide de JavaScript Utilisons donc un multicœur et ajoutons aux trois points un cluster appelé changement Ouvrez ensuite le fichier JavaScript et sélectionnez le bouton. Ensuite, je vais utiliser la méthode appelée sélecteur de requête Nous devons spécifier ici le nom de la classe. Ce sont des points d'ailleurs. Attachons-nous ensuite à un écouteur d'événements à l' aide d'un événement de clic, suivi de la fonction flèche Nous devons donc ajouter et supprimer le changement de classe du conteneur, qui est l'enveloppe de l'ensemble du contenu Allons-y et sélectionnons-le en utilisant à nouveau la méthode QuerySelector Insérons ici le conteneur ClassName. Nous devons maintenant utiliser la propriété de liste de classes, qui stocke en fait toutes les classes du conteneur. Enfin, nous devons utiliser la méthode toggle, qui, en général, renvoie la classe à l'élément s' il n'existe pas, et le supprimer. S'il existe. Hein ? Maintenant, si je clique sur l'icône , les points se transformeront en x et vice versa. Cette transformation s'effectue sans aucune transition. Allons-y donc et ajoutons aux points une transition dont les valeurs se terminent toutes à 0,3 s, ce qui correspond à la durée. Maintenant, si je clique, nous obtiendrons un bel effet de transition fluide. D'accord ? La dernière chose à faire est de masquer et d'afficher le menu lui-même. Pour cela, tout d'abord, faites x avec zéro. Ensuite, je vais cacher les objets. Pour ça. Utilisons l'opacité zéro et la visibilité cachée. Maintenant, encore une fois, nous devons utiliser le changement de classe car nous voulons masquer et afficher les éléments lorsque nous cliquons sur le bouton. Allons-y, sélectionnons Modifier avec le menu de navigation et définissons avec 246 RAM Et utilisez également la transition avec la largeur de la valeur. Et avec une durée de 0,3 s. Puis sélectionnez à nouveau modifier avec un lien. Nous devons maintenant rendre l'article réalisable. Pour cela, nous devons définir l'opacité 1 et la visibilité sur visible. Et utilisez également la transition. Avec une opacité de 0,3 s. Très bien, nous avons presque terminé La seule chose qu'il fallait faire était d'ajouter un peu de délai. Lorsque nous affichons l'icône. Pour cela, nous devons utiliser à nouveau la transition, mais avec le changement de classe. Nous avons donc besoin ici de la durée de 0,3 s, puis de la quantité de retard, 0,3 s également. Très bien, maintenant tout fonctionne parfaitement et en fait, nous en avons terminé avec ce projet de pixels 21. Projet 18 - Barre de navigation arrondie: Dans cette vidéo, nous allons créer un menu de barre de navigation avec du HTML, CSS et un peu de JavaScript Ce type de barre de navigation est un peu différent parce que je pense qu' il est plus moderne et créatif que les autres numéros standard. Allons-y et décrivons le projet. Nous avons un fond noir foncé avec l'icône au centre. Si je clique dessus, les éléments de navigation s' afficheront avec un bel effet de rotation. OK, allons-y et commençons à le construire. J'ai créé le dossier sur le bureau. Ouvrons-le donc dans VS Code. Je vais créer trois fichiers différents. Le premier sera index.html. Ensuite, nous avons besoin de style.css et de scripts point js. Accédez ensuite au fichier index.html et insérez ici le document HTML de base. Pour cela, je vais utiliser une image. Nous devons placer un point d' exclamation et appuyer sur Entrée. Très bien, allons-y et changeons le titre. Je vais insérer votre barre de navigation. Ensuite, je vais également lier les fichiers CSS et JavaScript. Pour cela, nous devons ouvrir la balise de lien et indiquer le chemin du fichier, dans ce cas le nom du fichier style.css. En ce qui concerne le JavaScript, ouvrons la balise script, juste au-dessus de la balise body de fermeture. Et dans l'attribut source, spécifiez le nom du fichier. En plus de cela, nous allons utiliser quelques icônes Font, Awesome. Nous devons donc obtenir un lien CDN pour cela. Allons-y et recherchons Font Awesome. Cdn, États-Unis. Prenez le premier lien et collez-le dans l'élément principal. Très bien, c'est tout à propos de cette configuration. Enfin, je vais exécuter le fichier dans le navigateur. Pour cela, je vais utiliser Live Server, qui est un package de code VS. Cela nous permet d'effectuer les mises à jour sans actualiser la page à chaque fois. Vous pouvez donc l' installer et vous pourrez exécuter vos projets comme dans le navigateur. Mettons l' éditeur de texte et le navigateur côte à côte et commençons à créer du balisage HTML Ouvrons les développements et attribuons-lui le wrapper FirstName Nakba Cet élément va encapsuler le nombre entier. Ouvrez ensuite un autre élément div avec la barre de navigation des classes. En fait, il inclura tous les liens et les icônes. Je vais donc ouvrir la balise link avec le nom de la classe navbar link Et ici, nous devons insérer la première icône Font, Awesome. Ce sera FAS, FA Dash Home. Au total, nous aurons donc six articles. Dupliquons l' élément de lien cinq fois , puis changeons les noms de classe pour les icônes. La seconde sera la ville où nous aurons besoin de l'école. Landmark, hôtel. Et enfin, il nous faut ici, magasiner, partir en courant. Très bien, c'est tout pour les objets de navigation. Enfin, nous devons créer le bouton. Il sera représenté par le développement et une icône Font Awesome. Allons-y et ouvrons div avec le nom de classe Nakba dash Ensuite, insérez votre icône Font Awesome avec les classes FAS, f, dash plus Très bien, c'est tout à propos du balisage HTML ou les éléments sont créés et nous sommes prêts à commencer à écrire du CSS. Tout d'abord, créons quelques styles de réinitialisation. Je vais supprimer la marge et le rembourrage pour chaque élément Pour sélectionner chaque élément, nous devons utiliser un astérisque Ensuite, réglons marge et le remplissage à zéro. Tout au long de ce projet, nous allons utiliser RAM comme unité de mesure. heure actuelle, par défaut, une rampe est égale à 16 pixels car la taille de police du code HTML est égale à 16. Je vais faire en sorte qu' un rem soit égal à dix pixels parce que je pense que c'est plus pratique et plus facile à calculer. Ainsi, pour convertir une mémoire vive en dix pixels, nous devons réduire la taille de police du code HTML. Sélectionnons-le et ajustons sa taille de police à 62,5 %. D'accord, comme vous pouvez le voir, la taille des icônes a diminué et maintenant une RAM est égale à dix pixels Allons-y et sélectionnons les éléments du wrapper div. Définissons sa largeur et sa hauteur Je vais définir la largeur comme 100 % S pour la hauteur. Faisons-en cent pour cent de la fenêtre d'affichage. Nous avons besoin de 100 Vh. Modifiez également la couleur d'arrière-plan. Nous allons utiliser ici. Trois B, trois B39. Très bien, voyons pour l' instant que les icônes ne sont pas tout à fait visibles. Alors allons-y et réglons ce problème. Je vais sélectionner les icônes de la barre de navigation. Augmentons la taille de la police, mettons-la à 2,5 rem, et changeons la couleur, rendons-la blanche. En plus de cela, je vais également sélectionner le signe plus. Augmentons sa taille de police, utilisons-la en RAM et rendons également la couleur blanche. Très bien, les icônes sont maintenant visibles. La prochaine chose que je vais faire est de les placer au centre à l' aide de Flexbox. Nous avons besoin ici de Display Flex. Ensuite, pour centrer les éléments horizontalement, nous devons utiliser justify-content En ce qui concerne le centrage vertical, nous devons aligner les éléments au centre OK, allons-y et commençons à travailler sur la barre de navigation. Sélectionnons-le et définissons sa largeur et sa hauteur. Je vais les régler tous les deux à 20 répétitions. Modifiez également la couleur d'arrière-plan. Utilisons votre couleur facilement pour, pour, pour. Ensuite, je vais m' occuper du bouton du signe plus. Allons-y et sélectionnons la barre de navigation BTN. En fait, si nous rendons sa position absolue, nous placerons l'icône au centre du nanopore car elle sortira du flux normal de la page Et la flexbox, nous la centrerons parfaitement. Définissons ensuite sa largeur et sa hauteur. Je vais les régler tous les deux à six tours. Modifiez également la couleur d'arrière-plan. Je vais utiliser votre couleur 1 pour le C095. Très bien, à part ça, je vais envoyer le message au signe plus à l'intérieur de la boîte. Pour cela, je vais utiliser à nouveau Flexbox. Nous avons besoin d'afficher des drapeaux, justifier le centre de contenu et d'aligner les éléments au centre Arrondissez ensuite le cadre à l'aide du rayon de bordure avec la valeur 50 %. Et enfin, changez le curseur, faites-le pointer. Très bien, c'est tout à propos du signe plus. Nous devons maintenant centrer tous les éléments. Dans un premier temps. Changeons leur position et rendons-la absolue. Comme vous pouvez le constater, les icônes sont placées les unes sur les autres. Nous devons également modifier la position de son élément parent, qui est la barre de navigation. Faisons en sorte que ce soit relatif. Une fois que nous aurons rendu la position relative, nous pourrons positionner les icônes en fonction de leur élément parent. Hein ? Je vais maintenant envoyer les icônes. Et pour cela, utilisons à nouveau Flexbox. En fait, je vais récupérer ces trois lignes à partir d'ici et les coller pour la barre de navigation Les icônes ne sont désormais plus visibles car elles se sont retrouvées derrière le bouton. Je vais donc le commenter pendant un moment. Et puis une fois que nous aurons positionné les éléments, nous les afficherons à nouveau. Enfin, il est temps de positionner chacun des éléments séparément. Pour cela, je vais utiliser une pseudo-classe appelée nth child. Allons-y donc et commençons par le premier élément. Sélectionnez le lien de la barre de navigation, suivi de la nième pseudo-classe enfant En fait, il s'agit d'une fonction et nous devons spécifier le numéro de l' élément entre parenthèses Donc, pour le premier point, nous avons besoin d'une opposition pour ramper. Alors allons-y et dupliquons ce code cinq fois. Pour le second élément, nous devons définir les positions supérieure et droite. Pour la première place, nous avons besoin de six rampes. Quant à la bonne position, nous devons la régler à 2 g. Ensuite, nous avons le troisième élément dont nous avons besoin ici, la position inférieure. Réglons-le sur six essais. Position correcte avec une valeur de deux rems. Ensuite, nous avons le quatrième élément Pour le premier élément, nous devons utiliser uniquement la position inférieure avec la valeur deux béliers Ensuite, nous avons le cinquième article. Réglons ses positions inférieure et gauche. Je vais mettre le moins de temps à six mois. Pour ce qui est de la gauche, nous devons louer. Enfin, pour le dernier élément, nous avons besoin des positions supérieure et gauche. Pour la première position, nous avons besoin de six rampes et pour la gauche, nous devons louer Très bien, les icônes sont donc positionnées. Raffichons le bouton et arrondissons également le nombre. Utilisons ici le rayon de bordure avec une valeur de 50 pour cent. Ensuite, je vais créer un petit effet de survol. Je vais changer la couleur des icônes lorsque nous les survolons Allons-y et sélectionnons maintenant par lien avec le pointeur de la souris. Ensuite, nous devons sélectionner, je vais changer la couleur. Utilisez ici la couleur 12095. Et utilisez également la transition avec la propriété de couleur d'une durée de 0,3 s. D'accord ? En fait, tout est prêt pour faire la sieste ou travailler. Par défaut. Je vais masquer les icônes et les faire pivoter. Je vais les masquer en utilisant la fonction d'échelle. Une fois que nous avons cliqué, l'icône du signe plus devrait s'afficher, puis au clic suivant, elle sera masquée. Nous allons donc utiliser une méthode de bascule. Je vais créer une nouvelle classe en CSS. Nous allons ajouter et supprimer cette classe du napa à l'aide de JavaScript Tout d'abord, masquons et faisons pivoter les éléments par défaut. Lorsque vous vous transformez. Avec la fonction d'échelle, nous devons insérer ici zéro. Ensuite, je vais faire pivoter icônes de cent 80 degrés, mais avec le signe moins. Créez ensuite une nouvelle classe et appelez-la change. Sélectionnez ensuite la barre de navigation. Nous devons utiliser Transform avec à nouveau des fonctions de mise à l'échelle et de rotation. Ainsi, lorsque nous cliquons sur l'icône, nous devons donner aux objets. Il s'agit de la taille par défaut. Nous devons donc utiliser la valeur K 1. Et nous devons également tourner avec zéro. Hein ? Nous devons maintenant écrire du JavaScript. Passons au bouton de sélection du fichier script.js. Ensuite, je vais utiliser la méthode QuerySelector. Nous devons spécifier ici le nom de la classe, qui est navbar btn Puis attaché à cet écouteur d'événements avec l'événement de clic. Et nous devons également passer ici la fonction flèche. Nous devons maintenant ajouter un nouveau changement de nom de classe au wrapper napa Donc, tout d'abord, nous devons sélectionner cet élément, utiliser à nouveau la méthode QuerySelector et spécifier le nom de la classe dans le wrapper Napa entre parenthèses Nous devons maintenant utiliser la propriété de liste de classes, qui stocke en fait toutes les classes de l'élément. Et puis nous devons changer de méthode avec le changement de classe. Maintenant, si je clique sur l' icône, les éléments seront affichés. Mais dans ce cas, sans aucun effet. Nous devons donc effectuer la transition avec Transform. Et avec une durée de 0,5 s. Maintenant, si je clique à nouveau, les icônes s'afficheront avec une transition agréable et cool. Très bien, enfin, je vais ajouter quelques effets au signe plus lui-même. Je veux le faire pivoter OnClick. Allons-y et sélectionnons un gain pour changer de classe, suivi de la barre de navigation p t n i. Je vais donc faire pivoter le signe plus de 45 degrés. Utilisons la fonction de rotation. Également. Pour un effet doux. Utilisons la transition. Nous avons besoin ici de nous transformer. Et comme la durée est indiquée ici 0,5 s. Très bien, maintenant tout fonctionne parfaitement et en fait nous en avons terminé avec ce projet 22. Projet 19 - Menu de barre latérale: Dans cette vidéo, nous allons créer un menu latéral pour le tableau de bord d'administration Ces types de barres latérales sont très populaires aujourd'hui. Je pense donc que ce petit projet vous sera intéressant et utile avant que nous ne commencions à construire notre projet. Et je vais le parcourir et le décrire. Comme vous le voyez, nous avons ici une image d'arrière-plan en plein écran, et dans le coin supérieur gauche, nous avons une icône de menu Si je clique dessus, ces lignes seront changées en x avec une belle transition. Et aussi la barre latérale, nous l'afficherons de gauche à droite Comme vous pouvez le constater, la barre latérale se compose de deux parties différentes En haut, nous avons un avatar pour admin avec un nom complet et un sous-titre d'administrateur Elle est suivie de la barre de recherche. Ensuite, nous avons une liste avec des icônes Font, Awesome. Chacun des éléments de la liste possède son propre sous-menu. Ils sont représentés sous forme de menus déroulants. Enfin, en bas de la barre latérale, nous avons quelques icônes Si je clique sur le bouton X, la barre latérale se ferme En fait, le projet répondra à toutes les tailles d'écran. Nous allons le créer pour une taille d'écran plus grande. Taille d'écran avec 1920 pixels de largeur et 1080 pixels de hauteur. Donc, si vous nous suivez avec une taille d' écran relativement plus petite, je vous recommande d' ouvrir les outils de développement. Passez en mode réactif et définissez la largeur et hauteur sur 1920 pixels et 1080 pixels. Quoi qu'il en soit, à la fin de la journée, nous apporterons les réponses au projet. D'accord ? C'est ce que nous allons développer dans cette vidéo. Alors commençons. J'ai créé un dossier sur le bureau appelé barre latérale, dans lequel j'ai un autre dossier pour les images Allons-y et ouvrons le dossier dans VS Code. La première chose que je vais faire est de créer nos fichiers de travail. Dans l'ensemble, nous aurons trois fichiers différents. Index.html, style.css, ainsi que des scripts dot js. Ouvrez ensuite le fichier index.html et insérez le document HTML de base. Pour cela, je vais utiliser des amides. Plaçons ici un point d' exclamation et appuyons sur Entrée ou peut-être sur la touche Tab. Changeons le titre. Je vais insérer votre barre latérale. Également. Je vais lier les fichiers CSS et JavaScript. Pour ça. Ouvrons la balise de lien. Indiquez ici le nom du fichier, style.css. Ensuite, en bas, nous ouvrons la balise de script. Et dans l'attribut source spécifiez le nom du fichier script.js. En outre, nous avons besoin de deux autres liens, un pour les icônes Font Awesome et un autre pour les polices Google. Allons-y et recherchons Font Awesome, CDN GIS. Ensuite, récupérez le premier lien à partir d' ici et collez-le dans l'élément principal. Ensuite, je vais rechercher les polices Google. En fait, nous allons utiliser deux téléphones différents. Le premier sera Roboto Slab. Je vais le personnaliser parce que nous allons utiliser une police un peu plus audacieuse. Nous allons donc vérifier la police semi-grasse. En ce qui concerne le second, nous utiliserons une dalle de plus de 27 Récupérons le lien et collez-le également dans l'élément principal. C'est tout à propos de la configuration. Enfin, je vais exécuter le fichier dans le navigateur. Pour ça. Je vais utiliser Live Server. Il s'agit de l'un des packages de code VS. En fait, nous utilisons ce package presque toujours, mais quoi qu'il en soit, je vais vous rappeler qu'il nous permet lancer le projet dans le navigateur et d'effectuer des mises à jour sans actualiser la page à chaque fois afin que vous puissiez le télécharger et l'installer. Enfin, il s'agit d'environnements organisés ou de travail. Je vais placer un éditeur de texte et un navigateur similaires pour faciliter notre processus de travail. D'accord, allons-y et commençons à créer le balisage HTML. Ouvrons un élément div, qui sera un conteneur Ensuite, nous devons ouvrir les éléments de navigation, qui envelopperont toute la barre latérale. Assignons-lui donc la barre latérale ClassName. Comme nous l'avons dit, la barre latérale sera composée de deux parties différentes La première sera une icône de menu Ouvrons donc les développements avec le nom de la classe, menu hamburger. L'icône du menu sera composée de trois lignes. Je vais donc transmettre ici les développements avec les cours. Wine, qui sera le nom de classe commun aux trois lignes. Et nous devons également faire la première ligne. Pour le carrelage des particuliers. Dupliquons la ligne deux fois et changeons les noms des classes. Nous avons besoin de la ligne deux et de la ligne trois. Très bien, c'est tout à propos de l'icône du menu. Ensuite, nous devons créer une carte qui inclura l'avatar de l'abdomen, nom complet et l'administrateur des sous-titres Ouvrons donc un développement avec la carte nominative de classe. Ensuite, nous avons besoin d'un autre div, qui encapsulera l' image de l'administrateur Attribuons-lui une carte nominative de classe, IMG. Insérez ensuite l'élément d'image. Je vais écrire dans l'image d'administration de l'attribut alt. Précisons ensuite que le chemin de l'image dans l'attribut source sera images, folder slash admin point JPG Enfin, utilisez ici l'attribut de classe avec une image d'administration de valeur. Nous avons donc ici l'image. Allons-y et insérons le nom complet et le sous-titre. Et nous allons ouvrir un autre développement avec le corps de la carte de nom de classe. Insérez-y ensuite des éléments de titre H2 avec le titre de la fiche de classe En tant que contenu, écrivez le nom complet. John Smith. Ensuite, nous avons besoin d'un paragraphe qui devrait avoir une carte de nom de classe, un sous-titre Et comme contenu, insérons l' administrateur utilisateur. OK, c'est tout à propos de la carte. Viennent ensuite les champs de saisie de recherche. Ouvrons donc un élément de formulaire avec le formulaire de recherche par nom de classe. Dans l'ensemble, nous aurons donc deux éléments. Le premier va être saisi avec un type de texte. Nous avons également besoin d'une entrée de recherche par classe et de l' attribut d'espace réservé avec recherche par valeur Outre l'élément de saisie, nous avons également besoin d'un bouton qui représentera l'icône de recherche. Ouvrons donc l'élément bouton. Il doit avoir le type de bouton car lorsque l'élément du bouton est placé dans le formulaire, par défaut, la page sur l'Afrique sera chargée. Pour l'éviter, nous devons donc utiliser le type de bouton. Nous avons également besoin ici du bouton de recherche du nom de classe. L'icône de recherche sera représentée par l'icône Font Awesome. Insertons donc votre élément oculaire dans les classes. Fas, FA Dash, recherchez. Très bien, c'est tout pour les éléments formés. Ensuite, nous devons nous occuper de la liste. Allons-y et ouvrons les éléments UL avec le nom de classe novelist. Ce sera donc la liste principale sur le trottoir. Il comportera cinq éléments de liste différents, chacun d'entre eux ayant son propre menu déroulant. Ouvrons donc les éléments LI avec le nom de la classe. Maintenant article. Ensuite, il doit être suivi du lien avec le lien de navigation de classe. Je vais donc insérer ici trois éléments différents. La première sera l'icône Font Awesome. Les noms des classes, FAS, FA, dash, taco, meter, dash, Alt Ensuite, nous avons besoin d'un élément span avec les textes des liens de navigation de la classe. Ensuite, en tant que contenu, le tableau de bord Let's Institute. Enfin, nous avons à nouveau besoin de l'icône Font Awesome pour afficher la flèche. Il devrait donc y avoir des classes, FAS, f, dash, dash, non ? Très bien, c'est tout pour le premier élément de la liste. Comme nous l'avons dit, dans l'ensemble, nous en avons besoin de cinq. Je vais donc le dupliquer quatre fois , puis modifier les noms des classes ainsi que le contenu des éléments. Le second sera Fas, un panier d'achat, un commerce électronique Le suivant sera F, F h, m avec l'élément Composants. Ensuite, nous avons les graphiques linéaires de la FASFA. Enfin, nous avons besoin d'une carte FASFA, baliser avec les marques des éléments Très bien, c'est tout pour la liste principale. Nous devons maintenant créer un menu déroulant pour chaque élément de la liste. Je vais donc insérer une nouvelle liste juste avant la balise LI de fermeture. Il devrait y avoir un sous-romancier de classe. Le premier menu déroulant sera composé de trois éléments de liste différents. Ouvrons le premier élément LI avec le nom de classe subnav item. Ensuite, nous avons besoin d'éléments de lien avec le lien de sous-réseau de classe. Ainsi, chaque élément de la liste renverra à l'icône Font Awesome et au contenu représenté par un élément span. Insérons votre élément oculaire avec les classes FAR F en forme de cercle pointillé Elle ne doit pas être suivie de cette poêle. Avec celui du tableau de bord textuel. Allons-y, dupliquons les éléments LI deux fois et modifions simplement le contenu. Nous avons besoin d'un tableau de bord à l'autre. Nous avons donc ici le premier menu déroulant. Nous en avons également besoin pour le reste des articles. Allons-y, saisissons-le et collez-le avant les balises LI de fermeture. Modifiez ensuite le contenu de tous les éléments du menu. Nous avons besoin ici de produits, commandes et de cartes de crédit. Ensuite, nous avons besoin d' icônes et de tableaux généraux. Ensuite, nous avons besoin d'un graphique circulaire, d'un graphique linéaire et d'un graphique à barres. Pour le dernier menu déroulant, nous avons juste besoin de deux éléments. Je vais donc ne laisser ici que deux éléments avec la consonne suivante Nous avons besoin de Google Maps et d'Open Street Map. Comme vous pouvez le constater, nous en avons terminé avec la liste principale. Ensuite, nous devons nous occuper de la liste inférieure. Alors ouvrons à nouveau. Répertoriez les éléments avec la classe. Liste inférieure. La liste inclura quatre icônes différentes. Nous avons donc besoin de quatre éléments de liste. Ouvrons l'élément LI, qui doit avoir le nom de la classe et l'élément inférieur de la liste. Ensuite, nous devons relier les éléments avec un nom de classe, un lien vers le bas de la liste. Chacun des éléments de la liste aura une icône ainsi que des notifications. Par conséquent, je vais vous insérer les éléments de la plage avec un certain nombre, disons cinq. Et nous avons également besoin d'une icône Font, Awesome. Cela devrait être FAS. Belle. Dupliquons l'élément de liste trois fois. Modifiez ensuite le nombre de notifications ainsi que les noms des classes. Pour le second, je vais insérer ici sept. En ce qui concerne le nom de la classe, nous avons besoin de l'enveloppe FASFA. Pour le prochain, il nous en faut un. Le nom de la classe, FASFA Coke. Pour le dernier élément, je vais supprimer complètement la notification. Il suffit de laisser ici l'icône Font Awesome avec les classes, FAS, FA, dash, dash off. Très bien, c'est tout à propos de la barre latérale. Nous en avons presque terminé avec le balisage HTML. La seule chose à faire est de prendre soin de la section principale dans laquelle nous n'aurons en fait que le titre avec l' image de fond en plein écran Donc, juste après les éléments de navigation, ouvrons cette section et attribuons-la à la section principale du nom du cluster. Ensuite, à l'intérieur, nous avons besoin d'éléments d'en-tête avec l'en-tête de classe. Ainsi, à l'intérieur de l' en-tête, nous n'aurons qu'un seul titre avec le nom de la classe, titre avec le tableau de bord textuel. Très bien, enfin, nous en avons terminé avec le balisage HTML des éléments nécessaires et il est maintenant temps d'écrire du Ouvrons le fichier style.css. Tout d'abord, créez des styles réinitialisés et réellement courants. Sélectionnons tous les éléments à l'aide d'un astérisque. Je vais donc réinitialiser la marge et le rembourrage. Mettons-les tous les deux à zéro. De plus, nous avons de nombreux éléments de liste et liens. Je vais donc me débarrasser de leurs styles par défaut avec aucun style de liste et aucune décoration de texte Ensuite, définissons la famille de police pour chaque élément Je vais utiliser une police appelée slideshow 27 pixels serif. Enfin, éliminons le plan par défaut. Très bien, c'est tout pour les styles courants. Tout au long du projet, nous allons utiliser une ROM comme unité de mesure. Par défaut, une rampe est égale à 16 pixels car la taille de police du code HTML est égale à 16 pixels. En fait, je veux convertir une RAM en dix pixels parce que je pense que c'est plus pratique et plus facile à calculer. Pour y parvenir, nous devons réduire la taille de police du code HTML et la porter à 62,5 % Désormais, la taille de police du code HTML est égale à dix pixels. Par conséquent, une rampe est également égale à dix pixels. D'accord ? Tout au long de ce projet nous allons utiliser différentes couleurs à plusieurs reprises. Et en fait, pour rendre ce processus plus dynamique, je vais utiliser des variables CSS. Nous allons stocker les valeurs de couleur dans des variables CSS. Et nous allons utiliser ces noms de variables. Afin de créer les variables pour une portée globale, nous devons sélectionner un itinéraire. Ensuite, nous devons définir noms de variables avec les valeurs appropriées. Le premier sera de pêche, couleur de fond Donc ça devrait être tui, tui, tui. Ensuite, je vais dupliquer cette ligne de code plusieurs fois et modifier les noms et les valeurs. La seconde sera la couleur primaire. Avec la valeur de couleur cinq à quatre, le quatre t. La couleur suivante sera la couleur secondaire avec les valeurs 777171 Ensuite, nous aurons la couleur du texte 99393. Nous avons également besoin de survoler la couleur du texte avec la valeur p db88. Et la dernière sera la couleur de l'icône active avec une valeur de 77. D'accord ? Je vais maintenant vous montrer comment utiliser ces couleurs. Supposons que nous voulions changer la couleur d'arrière-plan du corps. Nous devons sélectionner le corps. Ensuite, nous devons lui attribuer une couleur de fond. Nous devons maintenant utiliser la fonction var, qui signifie variable. Entre parenthèses, nous devons spécifier le nom de la variable Disons la couleur d'arrière-plan principale. Je veux dire la couleur pêche principale. Comme vous pouvez le constater, arrière-plan de l' élément du corps est modifié. C'est ainsi que fonctionnent les variables CSS. OK, débarrassons-nous de ce code car nous n'en avons plus besoin. Allons-y et ajoutons quelques styles à la barre latérale. Je vais le sélectionner. Définissons sa largeur et sa hauteur. En fait, comme unité de mesure, je vais utiliser la largeur de la fenêtre d'affichage Définissons la largeur de la barre latérale 15 % de la fenêtre d'affichage Nous avons besoin de 15 V W S pour la hauteur. Je vais le faire correspondre à 100 % de la fenêtre d'affichage. Nous avons donc besoin de 100 vh. Changez ensuite la couleur d'arrière-plan. Vous voyez votre couleur BG principale. Et je vais aussi corriger la position de la barre latérale Très bien, maintenant la barre latérale est réalisable. Et en fait je trouve que l'image est assez grande. Et je vais maintenant réduire sa taille par rapport au code HTML. À la fin de la journée, nous nous occuperons de l'image à partir du CSS. Passons au fichier index.html et attribuons à l'attribut Image appelé width avec la valeur 50. Cela signifie que nous avons défini la largeur de l'image à 50 pixels. La prochaine chose que je veux faire est de occuper de la section principale. Je veux dire, la deuxième partie de la page, qui est placée en bas après la navigation. Allons-y et sélectionnons-le. La section principale doit occuper le reste de la page. Je suis du bon côté. Par conséquent, je vais définir ses grincements comme une largeur de fenêtre d'affichage de 85 Nous devons également définir sa position car la barre latérale et la section principale doivent être placées côte à côte Faisons donc en sorte que la position soit relative. Réglez ensuite la propriété de gauche sur 15 pour la largeur de la fenêtre d'affichage. Maintenant, comme vous pouvez le voir, le tableau de bord textuel est visible. Cela signifie que ces deux parties sont placées côte à côte. Définissons l' arrière-plan en plein écran pour l'en-tête. Sélectionnons-le. Tout d'abord, définissons sa largeur et sa hauteur. Je vais hériter des éléments parents. Attribuons donc à la propriété de largeur, héritons. Quant à la hauteur, faisons en sorte qu'elle corresponde à 100 % de la fenêtre d'affichage. Enfin, définissons l'arrière-plan. Je vais l'utiliser ici. Dégradé linéaire avec des couleurs blanches, mais avec une opacité différente La première couleur doit avoir une opacité de 0,3. Quant au second, il sera de 0,5. Ensuite, nous devons spécifier l'URL. Nous avons un dossier appelé images. Nous devons sélectionner par point PNG. Ensuite, nous avons besoin du centre. Pas de répétition. Enfin, nous devons définir la taille de l'arrière-plan comme couverture. Très bien, comme vous pouvez le voir, l'image est définie comme arrière-plan en plein écran Et la seule chose à faire était de m'occuper des éléments de titre. Allons-y donc et sélectionnons-le. Je vais le placer au centre. Pour ça. Définissons cette position comme absolue. Réglez ensuite la première position à 5 %. Ensuite, il nous faut laisser 50 %. Enfin, nous devons utiliser Transform avec la fonction de traduction afin d'envoyer parfaitement vers l' élément. Nous devons ici traduire x car nous devons déplacer les éléments selon l'axe X. Et c'est la valeur que nous devons transmettre ici, -50 %. Très bien, donc le titre est centré, et maintenant je vais le rendre plus beau Allons-y et augmentons sa taille de police. Ça fait 12 Rahm. Changez la couleur, faites-la blanche. Enfin, créez un espace entre les lettres. Utilisez un espacement entre les lettres avec la valeur 1 rem. Très bien, voyons à propos de la section principale. Nous devons maintenant revenir à la barre latérale. Allons-y et créons de l'espace à l'intérieur de la boîte à l'aide d'un rembourrage Je vais régler le rembourrage à 1,5 rem haut et en bas et à un rem sur les côtés gauche et droit De plus, afin de conserver la même taille de la boîte, nous devons utiliser la taille de la boîte avec la valeur Très bien, la barre latérale est donc composée de plusieurs parties. Et je vais commencer par une carte dans laquelle nous avons une image, un titre et un sous-titre Nous allons sélectionner une carte et en faire un conteneur flexible. Pour cela, nous avons besoin de Display Flex. Maintenant je vais m' occuper de l'image. Comme vous le savez, nous définissons sa largeur à partir du code HTML. Et en fait je vais m'en débarrasser. Sélectionnez ensuite le nom de la classe d'images (image d'administration). Définissez sa largeur sous forme de paramètres phi. Et je vais aussi l'arrondir légèrement en utilisant rayon de bordure avec la valeur 0,5 rem Très bien, c'est tout à propos de l'image. Passons à autre chose et sélectionnons le corps de la carte, qui inclut en fait le nom complet du sous-titre Je vais donc créer un espace sur le côté gauche en utilisant la marge. Attribuons deux à un rem. Ensuite, je vais utiliser à nouveau Flexbox pour aligner ces deux éléments Fabriquons un contenant flexible à corps de carte à l'aide de drapeaux d'affichage. Ensuite, nous devons changer de direction. Nous avons besoin d'une colonne. Afin de laisser de l'espace entre les éléments. Nous devons justifier le contenu. De l'espace autour. Le nom complet et le sous-titre sont alignés. Allons-y et rendons-les plus beaux. Je vais commencer par le titre de la carte. Alors sélectionnons-le. Changez la taille de la police, mettez-la en RAM. De plus, nous avons besoin d'un peu d'espace sur le côté droit. Créons-le en utilisant la marge droite. Trois rems. Changez ensuite la couleur. Vous voyez la couleur de votre taxe. Enfin, utilisez l' espacement des lettres avec la valeur 0,1 ligne avec le titre, nous avons terminé. Et enfin, occupons-nous du sous-titre. Sélectionné. Changez la taille de la police, faites-en 1,8 RAM et changez également la couleur. Je vais utiliser ta couleur secondaire. Très bien, c'est tout pour la carte des éléments. Ayez l'air bien. Vient ensuite la recherche terminée. Alors allons-y et prenons-en soin. Nous allons sélectionner un élément de formulaire. Il dispose d'un formulaire de recherche par nom de classe. Dans un premier temps, je vais créer de l'espace en utilisant la marge. Réglons la marge sur, pour la placer au-dessus. Zéro sur le côté droit. Un rem en bas et zéro sur le côté gauche. Ensuite, afin d'aligner correctement l'entrée et le bouton , créons un conteneur flexible d'éléments de formulaire à l'aide de Display Flex. Et centrez également les éléments verticalement en les alignant au centre. Très bien, allons-y et stylisons les deux éléments. Je vais commencer par l'entrée. Il est donc sélectionné. Définissez sa largeur et sa hauteur. Je vais régler la largeur à 200 %. Quant à la hauteur, faisons-la à quatre béliers et changeons la couleur de fond Utilisez votre couleur principale. Très bien, ajoutons d' autres styles à l'entrée Je vais supprimer la bordure par défaut. N'utiliser aucune bordure. Utilisez également un rayon de bordure arrondi avec une valeur de 0,5 rem Ensuite, créons de l'espace à l'intérieur des entrées à l' aide d'un rembourrage Je vais le mettre à zéro en haut et en bas et un rem sur les côtés droit et gauche. Augmentez ensuite la taille de la police, faites-en 1,6 RAM. Changez la couleur, utilisez la couleur de votre texte. Enfin, créez un espace entre les lettres en utilisant l' espacement des lettres, une rampe de 0,1. Très bien, comme vous pouvez le voir, l'entrée semble bonne et nous en avons fini avec elle Ensuite, nous devons prendre soin de l'icône de recherche. Je vais le placer dans les entrées, je veux dire, dans le coin droit de celui-ci. Allons-y et sélectionnons le bouton Rechercher. Tout d'abord, éliminons ses styles par défaut. Je vais rendre la couleur de fond transparente. Et supprime également la bordure par défaut sans bordure Maintenant, pour déplacer l' icône vers la gauche, je vais utiliser Transform avec la fonction Translate X. Insérons ici moins 150 %. OK, donc l'icône est placée correctement et la seule chose à faire est de styliser l'élément I. Allons-y donc et sélectionnons-le. Je vais augmenter sa taille en fonction de la taille de la police. Faisons en deux tours et changeons également la couleur Vous voyez votre couleur secondaire. Hein ? C'est tout à propos de l'élément de formulaire. Nous devons maintenant passer à autre chose et commencer à travailler sur la liste. Allons-y et sélectionnons la liste principale avec le nom de la classe. Enfin et surtout, je vais créer cet espace en haut en utilisant la marge. Faisons trois mètres. Sélectionnez ensuite les éléments LI et créez un espace dans les marges supérieure et inférieure, attribué à deux rampes Et puis zéro sur les côtés gauche et droit. Hein ? C'est tout à propos des éléments LI. Maintenant, il commence à personnaliser le lien. Allons-y et sélectionnons-le. Je vais définir sa largeur à cent pour cent. Alors. Faites-en un conteneur flexible à l'aide de Display Flex. Centrez également les éléments verticalement en les alignant au centre. Et enfin, changez de couleur. Utilisons votre colonne de texte. Étape par étape. Nous allons de l' avant en ce moment. Les éléments sont beaucoup plus petits car leur taille n'est que de dix pixels. Allons-y et sélectionnons les éléments de la plage, qui contiennent du texte du lien de navigation en cluster Je vais augmenter la taille de la police. Faisons-en 1,8 RAM. Et créez également de l'espace sur le côté gauche en rembourrant un rem gauche Comme vous pouvez le constater, les flèches et les objets sont placés trop près les uns des autres. Nous devons déplacer les flèches vers la droite. En fait, nous pouvons le faire de différentes manières, mais la meilleure méthode pour nous est d'utiliser les propriétés flexbox appelées flex grow, qui doivent être égales à un En utilisant cette propriété, l'élément occupera tout l'espace disponible à l'intérieur du conteneur flexible. Très bien, allons-y et prenons soin des icônes Font Awesome, qui sont placées devant les éléments Alors sélectionnons-les. Nous devons sélectionner le lien de navigation suivi par les ions. Et nous devons utiliser des pseudo-classes CSS appelées first-child. Réglons la largeur et la hauteur, toutes deux à deux mètres. Et changez également la couleur d'arrière-plan. Je vais utiliser votre colonne principale. Comme vous pouvez le constater, nous devons centrer les icônes à l'intérieur de la boîte. Pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, nous devons également centrer les éléments horizontalement et verticalement. Utilisons donc le centre de contenu justify-et alignons les éléments au centre Bien, comme vous pouvez le voir, les icônes sont parfaitement centrées La seule chose que je veux faire est de créer de l'espace à l'intérieur de la boîte et de les arrondir. Utilisons donc du rembourrage. Nous dévaluons le point en RAM et en border-radius, quelle valeur ? 0,3 points. Après cela, créons un petit effet de survol. Lorsque nous survolons l'élément, je voulais changer la couleur de l'icône Alors sélectionnons-le. Nous devons maintenant survoler le lien. Encore une fois, j'utilise la première pseudo-classe enfant. Changeons la couleur, rendons-la active, je peux les appeler. Utilisez également la transition pour rendre l'effet plus intelligent. Nous devons transmettre votre couleur avec une durée de 0,2 seconde. OK, donc si nous survolons les objets, ils changeront de couleur Enfin, je veux m' occuper des flèches. Je vais les déplacer vers la gauche et également augmenter leur taille. Alors sélectionnons-les. Nous avons encore besoin d'un lien de navigation. Ensuite, j'élement, suivi de la pseudo-classe appelée last-child Créons un espace sur le côté droit en utilisant la marge droite, 2,5 rem. Et augmentez également la taille de la police, arrondissez-la à 1,6. Très bien, avec les éléments de la liste principale, nous avons terminé et nous devons maintenant nous occuper des menus déroulants Dans un premier temps, stylisons-les. Sélectionnez les éléments de la liste à l'aide du sous-romancier ClassName. Définissons la largeur, faisons-la 90 %. Et j'ai également placé les éléments sur le côté droit utilisant la marge gauche, la valeur R0 OK, ensuite je vais créer un espace entre les objets. Nous allons donc sélectionner les éléments LI à l'aide d'un élément de sous-intervalle de clustering Je vais définir la marge comme 0,5 RAM en haut et en bas et zéro sur les côtés gauche et droit. Ensuite, nous devons prendre soin de l'élément de lien. Allons-y donc et sélectionnons-le. Modifiez la taille de la police. Je vais le porter à 1,5 rem. Et changez également la couleur. Utilisez ici la colonne de texte. Les articles sont donc bien plus beaux. Ensuite, je vais créer un effet de survol. En survol. Je souhaite modifier la couleur des articles. Alors sélectionnons le lien, passez la souris. Changez ensuite la couleur. Utilisons ici la couleur du texte avec le pointeur de la souris. Et nous avons également besoin d'une transition avec la couleur et d'une durée de 0,2 s. D'accord, donc avec les éléments déroulants, nous avons presque terminé Il suffit d'ajouter quelques étoiles aux cercles. Allons-y et sélectionnons les éléments. Vous avez besoin d'un lien vers le sous-roman. I. Modifiez ensuite la taille de la police. Faites-en une seule RAM. Créez également un espace sur le côté droit en utilisant une marge avec une valeur de 0,5 rem. Ensuite, nous devons créer notre effet. Sélectionnez le lien avec le pointeur de la souris, suivi de l'élément I, et changeons suivi de l'élément I, la couleur À utiliser ici, actif, je peux appeler. Enfin, nous devons à nouveau faire la transition entre la couleur et la durée de 0,2 seconde. Très bien, certains C'est tout à propos de la liste. Ils sont stylés, beaux. Et maintenant, nous devons passer à autre chose et personnaliser la dernière partie de la barre latérale, qui est une liste inférieure Allons-y et sélectionnons les éléments UL. Il a un clustering dans la liste inférieure. Tout d'abord, définissons sa largeur. Je vais le faire à 100 %. Et changez également la couleur d'arrière-plan. Utilisez votre couleur, couleur primaire. La liste doit-on placer en bas de la barre latérale ? Nous devons donc définir sa position. Je vais le rendre absolu. Ensuite, pour le placer en bas, nous devons mettre la propriété d'un bouton à zéro. D'accord ? La liste est donc positionnée de la bonne manière. Ensuite, je vais créer de l'espace à l'intérieur de la boîte. Et nous devons également placer les éléments dans une rangée horizontalement. Nous avons donc besoin d'un rembourrage en haut et en bas, 0,5 rem et de zéro sur les côtés gauche et droit Ensuite, nous devons utiliser Flexbox Nous avons besoin de Display Flex. Et également afin de créer un certain espace entre les éléments flexibles, utilisons la justification du contenu en fonction du rythme des valeurs. D'accord ? Les éléments sont donc bien alignés, mais comme vous pouvez le voir, nous avons de l'espace sur le côté gauche de la liste. Je vais donc déplacer la liste complète vers la gauche. Pour cela, utilisons Transform avec la fonction translate x. Et comme valeur, prenons moins une répétition. D'accord ? C'est donc tout pour l' alignement de la liste. Je vais maintenant personnaliser les icônes ainsi que les éléments de ce modèle qui sont créés pour les notifications. Alors allons-y et commençons par les icônes. Sélectionnez le lien du bas de la liste, suivi de l'élément I. Augmentons la taille de la police, lui donnons 1,6 RAM et changeons également la couleur. Vous voyez votre couleur secondaire. Maintenant, les icônes sont bien meilleures. Je vais ajouter ici un petit effet de survol. Je souhaite changer la couleur des icônes lorsque vous passez la souris. Nous allons donc sélectionner le lien avec le pointeur de la souris. Et puis j'ai des éléments. Changez la couleur. La couleur de votre icône active s'affiche. Et utilisez également la transition avec la couleur. Et avec une durée de 0,3 s. Donc si nous survolons les icônes, elles changeront de couleur Donc, en fait, avec les icônes, c'est terminé. Je vais maintenant prendre ici certains de ces éléments d'intervalle. Allons-y et sélectionnons-les en utilisant la barre de liens du bas de la liste. Tout d'abord, je vais modifier la famille de polices. Utilisons ici la police appelée Roboto Slab Serif. De plus, je vais augmenter le poids de la police parce que je veux rendre span un peu plus audacieux Utilisez ici 600. Modifiez ensuite la taille de la police, faites-en une seule RAM. Et enfin, changez la couleur, faites-la blanche. D'accord ? Ces chiffres doivent donc être placés dans le coin supérieur droit des icônes. Alors allons-y et prenons soin de leur position. Je vais le rendre absolu. Ensuite afin de définir la position en fonction de l'élément parent, qui dans notre cas est un lien. Nous devons relativiser la position des parents. Allons-y, sélectionnons le lien lui-même et attribuons-lui une position relative. Ensuite, définissons les propriétés supérieures et appropriées. Faites en sorte que la position supérieure soit de -100 %. Pour ce qui est de la bonne position, fixons-la à -50 %. Très bien, les éléments de la travée sont positionnés et je veux maintenant créer un arrière-plan différent pour chacune des nitrifications Pour cela, définissons les propriétés de largeur et de hauteur. Je vais faire valoir un point sur les deux pour la RAM. Et ajoutez également ici une couleur de fond temporaire, disons le rouge. Nous devons maintenant arrondir ces arrière-plans. Et je veux aussi placer ces chiffres au centre afin de les arrondir. Utilisons un rayon de bordure dont la valeur est de 50 %. En ce qui concerne le centrage, les chiffres, utilisez flexbox Nous avons besoin d'une flexibilité d'affichage , puis d'un centre de contenu justifié et d'un centre d'alignement des éléments Très bien, en fait, nous presque terminé avec les notifications La seule chose que nous avons à faire est de changer la couleur de fond et rendre différente pour chaque hauteur. Débarrassons-nous donc du fond rouge. Ensuite, pour sélectionner l'élément séparément, je vais utiliser un sélecteur d'enfants, qui est une pseudo-classe Nous allons donc sélectionner l'élément du bas de la liste suivi du nième enfant En fait, c'est une fonction. Donc, à l'intérieur de la parenthèse en tant qu'argument, je vais insérer le numéro de l'élément, un Ensuite, il doit être suivi de span. Comme couleur de fond. Je vais utiliser CFA 012. Dupliquons ce code deux fois. Changez le nombre dont nous avons besoin ici en tant que couleur. Utilisons 54154 En ce qui concerne le troisième élément, nous devons couvrir E, deux à sept à sept Très bien, donc c'est tout avec un design. Enfin, nous avons terminé. Ensuite, nous devons nous occuper de la fonctionnalité. Et tout d'abord, je vais travailler sur le menu des hamburgers. Allons-y et ajoutons quelques étoiles à l'icône du menu. Pour l'instant, ce n'est pas visible. Alors sélectionnons-le. La première chose à faire était de le rendre visible. Définissons donc la largeur et la hauteur. Faites des deux 3,5 rem. Et changez également la couleur, la couleur de fond la rend blanche. Comme vous pouvez le voir par défaut, il est placé dans le coin supérieur gauche. Et pour le moment, nous devons placer dans le coin supérieur droit. Définissons donc sa position et définissons-la de manière absolue. Ensuite, réglez les positions droite et supérieure, toutes deux à zéro. OK, donc l'icône est placée de la bonne façon. Ensuite, je vais afficher les lignes. Sélectionnons-les donc avec un nom de classe commun, une ligne, une largeur et une hauteur définies. Je vais régler la largeur à 2,5 g. Quant à la hauteur, faisons en sorte qu'elle soit de 0,3 rem et changeons également la couleur de fond. Dans ce cas, je vais utiliser une couleur secondaire. D'accord, comme les lignes Z, elles sont toutes visibles, mais pour le moment elles sont placées trop près les unes des autres Nous avons besoin d'un peu d'espace entre eux. Et nous devons également les placer au centre de la boîte. Pour ce faire, je ne vais pas utiliser Flexbox. Je veux faire de même en utilisant des positions. Attribuons donc une position absolue à deux lignes. Ensuite, je vais sélectionner chacune des lignes séparément. Commençons par la première ligne. Mets-le en première position. Un point pour la RAM. Ensuite, je vais le dupliquer deux fois. Nous avons besoin ici de la ligne S4, la première position. Faisons-en 1,8 RAM. En ce qui concerne la troisième ligne, nous devons placer la position 2.4. Comme vous pouvez le voir, il y a maintenant de l'espace entre les lignes. Et pour les centrer, je vais utiliser du rembourrage En fait, la taille de l'espace est égale à une RAM car la largeur de l'icône est de 3,5 rem et la largeur de la ligne est de 2,5 tours. Pour que les lignes soient parfaitement centrées, nous devons régler le rembourrage à 0,5 rem À l'heure actuelle, la taille de la boîte est augmentée. Et pour résoudre ce problème, nous devons utiliser le format des boîtes. Borderbox. Enfin, débarrassez-vous de la couleur de fond blanche. Très bien, l'icône du menu est donc conçue et nous devons maintenant la faire fonctionner Je veux dire, lorsque nous cliquons dessus, nous devons le transformer en x. Pour une meilleure démonstration, je souhaite définir certains styles pour les trois lignes séparément. Je veux dire, nous allons remplacer les styles actuels, mais nous finirons par utiliser une nouvelle classe qui sera ajoutée à l'aide de l'événement JavaScript on click Très bien, écrivons le code et il deviendra beaucoup plus clair Sélectionnons à nouveau la première ligne. Ligne 1 et ligne. Nous échangerons leurs places qu'ils alterneront. Quant à la ligne à, elle sera masquée. Pour la première ligne, nous devons définir 23. Projet 20 - Hamburger Menu: Dans cette vidéo, nous allons créer le menu des hamburgers avec de jolis effets Ce projet sera construit sur la base du HTML, CSS et d' un peu de JavaScript. Comme vous pouvez le voir, nous avons ici une page de destination avec une image de fond en plein écran Et dans le coin supérieur droit se trouve l'icône du menu hamburger Si je clique dessus, l'icône sera transformée en x. Et maintenant, une partie sera affichée du côté droit. Nous avons ici quelques éléments de navigation et si je les survole, nous obtiendrons de beaux effets de survol Dans cette vidéo, vous allez découvrir comment créer tout cela. Allons-y et commençons à construire notre projet. Dans le code VS. J'ai quelques fichiers pour HTML, CSS et JavaScript. Et nous avons également ici un dossier appelé images dans lequel nous avons une image pour l' arrière-plan de la page de prêt. Vous pouvez télécharger les fichiers de démarrage à partir du lien figurant dans la description. D'accord, allons-y et ouvrons le fichier index.html. J'ai préparé la structure de base du document HTML. À l'intérieur des éléments de tête, j'ai deux maillons. Une pour les polices Google, je vais utiliser une police appelée doses, et une autre pour le fichier CSS. En plus de cela, j' ai inséré ici balise de script afin de lier le fichier JavaScript. Très bien, commençons à créer du balisage HTML, à ouvrir des développements, qui seront un conteneur Il est donc affecté à sa classe conteneur. Ensuite, à l'intérieur du conteneur, je vais ouvrir des éléments qui envelopperont tout le contenu de la barre de navigation Attribuons-lui la classe navbar. Ensuite, à l'intérieur, je vais d' abord créer une icône de menu pour hamburgers Ouvrez donc le développement et attribuez-lui un nom de classe, un menu hamburger. Ensuite, à l'intérieur de ces éléments div, je vais insérer trois éléments div pour trois lignes d'une icône Attribuons à son nom de classe la ligne de style courante. Et nous avons également besoin ici d' un autre nom de cluster pour style individuel. Ligne 1 à droite. Dupliquez ensuite cette ligne deux fois et modifiez les noms des classes. Nous avons besoin de la ligne deux, de la ligne trois. D'accord, c'est tout à propos de l'icône du menu pour le moment, ce n'est pas faisable car nous n'avons que des éléments div vides sans aucun style Ensuite, je vais créer une navigation. Il sera représenté par des éléments UL. Attribuons-lui une classe, notamment. Insérez-y ensuite des éléments LI. Il doit contenir un élément de classe. Enfin, nous avons besoin de vos éléments de lien. Attribuons-lui le nom de la classe, le lien de navigation, et insérons également votre premier élément. Au total, je vais avoir sept éléments de navigation. Dupliquons-le six fois, puis modifions rapidement le contenu qui nous concerne. Cette nouvelle. La prochaine sera Gallery Than Events. Tarification. Et pour la dernière, insérez votre contenu. Très bien, c'est donc tout à propos du HTML. Il est temps de commencer à coiffer. Passons au fichier style.css. Dans un premier temps, je vais créer des styles de réinitialisation. Débarrassons-nous de la marge et du rembourrage par défaut de chaque élément Sélectionnez-les à l'aide d'un astérisque. Ensuite, passez votre marge zéro et votre marge intérieure zéro également. Ensuite, je vais changer la famille de police pour l'élément du corps. Nous allons donc le sélectionner. Et puis insérez ici les doses de la famille de polices, san-serif. Ensuite, prenons soin du conteneur. Définissez sa largeur et sa hauteur en tant que largeur. Écrivons ici à 100 %. En ce qui concerne la hauteur. Je vais le définir comme 100 % de la fenêtre d'affichage. Donc oui, 100 pH plutôt que comme fond. Je vais créer une image. Donc, le bon fond est celui dont nous avons besoin ici, un dégradé linéaire. Je vais utiliser trois couleurs différentes. Le premier sera le RGBA 000 et l'opacité 0,4. Ensuite, écrivons RGBA 14848, à nouveau 48 et l'opacité Ensuite, insérez RGBA 167-60-7607 et opacité 0,4. Ensuite, l'URL intérieure indique une partie des images l' image et sélectionnez l'image appelée bg point JPG comme position de l'arrière-plan. Nous avons besoin du Centre et aussi de passer ici, pas de répétition. Enfin, je vais utiliser la propriété de taille d'arrière-plan avec la valeur de couverture. Très bien, la page de destination est prête. Nous avons ici une image de fond en plein écran. Et maintenant, je vais prendre ici le menu des hamburgers Comme vous le savez, il se composera de trois lignes et devrait être placé dans le coin supérieur droit de la page Dans un premier temps, sélectionnons le développement rapide, qui comporte un ClassName, un menu hamburger Définissons sa largeur et sa hauteur. Je vais régler avec 35 pixels. Quant à la hauteur, attribuons-lui 30 pixels. Pour l'instant, l'icône n'est toujours pas visible. Et pour résoudre ce problème, attribuons-lui un arrière-plan temporaire, disons rouge. OK, alors maintenant l' icône qui s'affiche par défaut est placée dans le coin supérieur gauche. Mais comme je l' ai dit, je vais le placer en haut à droite de la page. Pour cela, définissons cette position comme étant fixe. Ensuite, nous avons besoin de la position supérieure, définie sur 50 pixels et la droite sur 50 pixels. Maintenant, je peux le déplacer dans le coin supérieur droit. Enfin, je vais changer de curseur. Mettons-le au clair. Très bien, pour l'instant avec l'élément div parent, nous avons terminé. Il est temps de travailler sur les lumières. Allons-y et sélectionnons-les en utilisant la ligne de nom de classe courante. Réglez ensuite sa largeur sur 100 %. Cela signifie que cette ligne occupera toute la largeur de son élément parent , soit 35 pixels. Ensuite, je vais définir la hauteur. Faisons-en trois pixels et changeons également la couleur d'arrière-plan. Tu vois ta couleur chocolat. D'accord, maintenant les lignes sont visibles, mais elles sont collées les unes aux autres et nous devons les séparer. Pour y parvenir, je vais utiliser Flexbox. Faisons un conteneur flexible pour le menu Hamburger. Pour cela, nous avons besoin de Display Flex. Changez ensuite la direction de flexion. Nous devons placer les lignes sous forme de colonne. Nous avons donc besoin d'une colonne à direction de flexion. Enfin, afin de libérer de l'espace entre eux, utilisez la fonction de justification des contenus. Les valeurs évoluent. OK, maintenant les lignes sont séparées et nous pouvons réellement nous débarrasser de ce fond rouge. Très bien, donc l'icône du menu est déjà créée et avant de la faire fonctionner, je vais personnaliser la barre de navigation Nous devons le placer du bon côté. Allons-y et sélectionnons l' élément de navigation avec le nom de classe navbar. Dans un premier temps, définissons sa largeur et sa hauteur. Je vais définir sa largeur à 300 pixels. Pour ce qui est de la hauteur, faisons-la à 100 %. Changez ensuite la couleur d'arrière-plan. Utilisons votre couleur 26262. OK, donc pour placer maintenant la barre sur le côté droit, définissons cette position comme fixe. Ensuite, mettez à zéro les propriétés du haut et de la droite. Très bien, la barre de navigation est donc positionnée de la bonne manière. Je vais maintenant m'occuper de la position des éléments de navigation. Je veux les placer parfaitement au centre de la barre de navigation. Et pour cela, utilisons Flexbox ici. L'écran est flexible. Que pour centrer les éléments horizontalement, utilisez justify-content Centre. S pour le centrage vertical Utilisez Alignez les objets, centrez. OK, les objets sont donc placés au centre. Et la dernière chose que je souhaite faire concernant barre de navigation est de personnaliser sa forme Et je vais le faire en utilisant le rayon de la frontière. En fait, cette propriété peut prendre quatre valeurs différentes correspondant aux quatre coins. Je suis dans le coin supérieur gauche, haut à droite, en bas à droite et en bas à gauche Nous sommes donc en mesure de définir un rayon de bordure différent, quatre colonnes différentes. Dans ce cas, je vais personnaliser les coins supérieur gauche et inférieur gauche. Quant aux autres coins, nous ne les toucherons pas. Donc, comme valeur du rayon de bordure du coin supérieur gauche, je vais insérer ici 20 %. Ensuite, comme nous l'avons dit, les coins supérieur droit et inférieur droit ne seront pas modifiés. Nous devons donc insérer deux fois des zéros ici. Et pour le coin inférieur gauche, je vais utiliser 60 %. Très bien, la forme de la barre de navigation est personnalisée et je vais maintenant styliser les éléments de navigation Allons-y et sélectionnons les éléments UL. Il porte le nom de la classe. Et pas des moindres. Je vais placer le texte sur le côté droit. Utilisons donc l'alignement droit du texte. Ensuite, sélectionnons les éléments LI. Il a un nom de classe, pas un élément. Débarrassons-nous d'abord des puces par défaut en utilisant le style de liste none. Créez ensuite de l'espace en utilisant la marge. 25 semaines. Très bien, nous devons maintenant sélectionner les éléments du lien, dont le nom de classe Nav Link Débarrassons-nous des styles par défaut. Utiliser la décoration de texte. Aucune. Ensuite, augmentez la taille de la police, faites-la 22 pixels. Changez de couleur. Vous voyez votre couleur E. De plus, je vais rendre la police plus claire en utilisant font-weight 300. Crée ensuite un espace entre les lettres à l'aide de l'espacement des lettres. Un pixel. Enfin, mettez le texte en majuscules à l'aide de la transformation de texte en majuscules. Très bien, c'est tout pour les éléments de navigation. Comme vous vous en souvenez dans le projet terminé, nous allons créer des effets de survol Lorsque vous passez la souris, nous devons afficher des lignes en haut et en bas des éléments. Il s'affichera avec une transition fluide. Et dans les directions opposées. En fait, nous allons créer ces lignes en utilisant des pseudo-éléments avant et après. Les deux auront des styles communs. Allons-y et sélectionnons les deux pseudo-éléments, droite, le lien de navigation avant. Dupliquez ensuite cette ligne et modifiez-la avant et après. Nous devons donc d'abord définir le contenu comme étant vide. Ensuite, je vais définir la largeur et la hauteur. Mettons-nous à 100 % avec nous. Ajustez ensuite la hauteur en pixels et modifiez également la couleur d'arrière-plan. Tu vois ta couleur chocolat. Pour l'instant, les lignes ne sont pas visibles car il s' agit d'éléments intégrés auxquels la largeur et la hauteur ne sont donc pas appliquées Ainsi, si nous définissons leur position comme absolue, puis si nous attribuons aux éléments parents qui n'est pas relative à la position du lien, les deux lignes seront affichées. En un coup d'œil Nous ne voyons ici qu'une seule ligne, mais en fait, les deux lignes sont placées côte à côte OK, ensuite je vais définir une position gauche pour les deux éléments comme zéro. Maintenant, les deux lignes prennent le même emplacement et pour les séparer, nous devons définir une position inférieure pour les pseudo-éléments suivants et nous devons la mettre à zéro. Copions donc ce sélecteur et attribuons-lui le zéro inférieur Maintenant, les deux lignes sont séparées. Comme vous le savez, par défaut, la première position est définie sur zéro. Donc, si nous ne le définissons pas manuellement, cela ne posera pas de problème. Quoi qu'il en soit, je vais le définir. Dupliquons donc ce code. Changez ensuite après en avant. Et au lieu d' en bas, à droite, en haut. Très bien, la dernière chose que nous voulons ici est de créer rembourrage car la ligne inférieure est trop proche de l'article Attribuons donc au remplissage des liens de navigation en haut et en bas droite trois pixels, puis zéro sur les côtés gauche et droit Très bien, c'est tout. Les lignes doivent maintenant créer un effet de survol Par défaut, je vais masquer ces lignes. Et lorsque nous survolons les éléments, ces lignes s'affichent de manière fluide dans les directions opposées Pour masquer les lignes, je vais utiliser Transform. Ensuite, échelle x. Nous devons le mettre à zéro. Alors maintenant, en survol, nous devons augmenter l' échelle et en faire une seule Allons-y et sélectionnons le lien de navigation avec le pointeur de la souris. Ajoutez ensuite ici avant. Dupliquez ce sélecteur et modifiez-le avant et après. Ensuite, insérez votre Transform, Scale x avec l'argument un. Enfin, afin de rendre l'effet plus intelligent, utilisons la transformation de transition de 0,5 s. Très bien, donc si nous survolons les éléments lignes s'afficheront Mais comme vous pouvez le voir, par défaut, ils commencent à apparaître à partir du centre. Cela se produit parce que la propriété d'origine de la transformation est définie comme capteur par défaut. Nous devons donc le modifier pour les deux lignes. Assignons après les pseudo-éléments l'origine de la transformation. Fais les choses correctement. Copiez ensuite ce code et collez-le avant les pseudo-éléments. Et au lieu de droite, insérons ici la gauche. Si nous survolons les éléments, tout fonctionnera parfaitement Nous avons ici un bel effet de survol. OK, donc avec la navigation, c'est terminé. Suivant. Ce que nous devons faire, c'est faire en sorte que le menu Hamburger fonctionne. Tout d'abord, je vais transformer l'icône du menu en x. Pour cela, nous devons changer la position première et de la troisième ligne. Quant au second, il doit être chauffé. Allons-y et sélectionnons la première ligne. Nous devons faire pivoter la ligne 1 de 45 degrés selon l'axe Z. Pour être plus précis, pour la première ligne, nous devons utiliser Rotate Z -45 degrés. Dupliquons ce code. Changez le nom de la classe à droite, ligne 3. Et débarrassez-vous également du signe moins à partir d'ici. Comme nous l'avons dit, nous devons masquer la deuxième ligne. Sélectionnons-le et utilisons votre opacité zéro. Comme vous pouvez le voir, les lignes sont pivotées, mais nous n'avons pas de x. Nous devons prendre soin de la position des lignes C'est pour ça. Je vais ajouter ici la traduction. Alors comme valeur de la direction x, non ? Moins huit pixels, S4, axe Y. Nous devons passer tes six semaines. Copions-le et collons-en quatre lignes trois Au lieu de six pixels, il nous faut ici juste moins six pics. Maintenant est considéré. Le problème est résolu et nous avons ici x. En fait, ce n'est pas l'état par défaut de l'icône. Nous devons le faire x lorsque nous cliquons dessus. Pour y parvenir, je vais utiliser un peu de JavaScript. Mais avant d'écrire du JavaScript, je vais ajouter deux lignes. Nouveau nom de classe, appelons-le changement. Ensuite, nous ajouterons cette barre de navigation de classe 2 en utilisant JavaScript. Et tout cela se produira lorsque nous cliquerons sur l'icône. Passons au fichier script.js et tout d'abord, créons une nouvelle variable, appelons-la icône du menu. Ensuite, sélectionnez les développements qui ont un menu hamburger avec nom de classe Pour cela, nous devons écrire des documents, des points, une requête, sélecteur et transmettre le menu hamburger du nom de votre classe Ensuite, attachez l'écouteur d'événements à l'icône du menu, à droite, l'icône du menu, au point, ajoutez un écouteur d'événements Comme premier argument, nous devons transmettre votre nom d'événements, qui est clique. Que nous devons transmettre votre fonction, qui sera une fonction en forme de flèche. Nous devons maintenant ajouter deux nouvelles classes qui sont modifiées en premier. Créons une nouvelle variable, appelons-la barre de navigation. Il doit être égal à documents, points, QuerySelector. Insérons la barre de navigation du nom de votre cluster. Ensuite, à l'intérieur de la fonction, de la droite, barre de navigation et d'une propriété plus simple appelée liste de classes Vous pensez peut-être que nous devons utiliser votre méthode d'ajout, mais dans ce cas, cela ne fonctionnera pas car lorsque nous cliquons sur l'icône, le changement de classe doit être ajouté à Napa Mais au clic suivant, il doit être supprimé. Et pour y parvenir, au lieu d'ajouter, nous devons utiliser la méthode appelée Toggle Insérons le changement de nom de votre classe. Donc, si nous cliquons sur l'icône, elle sera transformée en x. Et au clic suivant, elle retrouvera son état par défaut. Pour que cela affecte le moteur, revenons au fichier style.css et attribuons à la transition de ligne des valeurs de 0,8 s. Maintenant, un fait est devenu plus intelligent, mais je pense que nous pouvons le rendre encore plus agréable Au lieu de faire pivoter les lignes de 45 degrés seulement, nous pouvons les laisser faire une rotation complète, rotation de 360 degrés, puis une nouvelle rotation de 45 degrés. Donc, comme les valeurs que nous devons insérer ici, la somme de 360,45, soit finalement 405 degrés Alors maintenant, vous convenez que ça a l'air beaucoup mieux. Très bien, nous y sommes presque. L'autre chose à faire est de masquer suffisamment de ports par défaut, en l' affichant OnClick Pour cela, changeons la valeur de la bonne position et fixons-la à -300 pixels. Alors maintenant, la barre de navigation est masquée. Pour le déplacer de droite à gauche, je vais à nouveau utiliser le changement de classe. Attribuons-lui, à droite, avec la valeur zéro. Maintenant, si nous cliquons, Napa s' affichera, mais en tant qu'invité, pour rendre l'effet plus agréable, nous devons utiliser la transition avec les valeurs Plus de 0,8 s. Et aussi, je vais utiliser votre fonction appelée Cubic Bezier, qui nous permet de créer une transition personnalisée Dans ce cas, je souhaite que l'effet commence légèrement plus lentement et qu'il se termine plus rapidement. Pour cela, je vais vous transmettre vos valeurs 100,1. Nous pouvons donc maintenant dire que tout fonctionne parfaitement. Nous avons ici une barre de navigation agréable et moderne avec des effets sympas 24. Projet 21 - Button créatif: Dans ce didacticiel, nous allons créer un joli bouton avec des effets intéressants Ici, nous avons un seul bouton sur la page. Il contient un certain contenu. Et une fois que nous le survolons, le contenu sera modifié avec un effet agréable C'est ça, ce que nous allons construire. J'espère que ce sera intéressant. Alors commençons. Dans le code VS. J'ai deux fichiers différents, index.html et style.css. Dans le fichier HTML, j'ai préparé la structure HTML de base, l'élément de tête. J'ai deux liens différents, l'un pour les polices Google et le second pour style.css. Mais vous pouvez télécharger ces fichiers de démarrage à partir du lien figurant dans la description. Allons-y et commençons par créer un balisage HTML. Ouvrons le développement, qui sera un rappeur. Donc affecté à la classe BTN wrapper. Ensuite, à l'intérieur, le bouton Créer avec un nom de classe btn. Donc, en ce qui concerne le contenu du bouton, je vais intégrer différents éléments de span car, comme vous vous en souvenez, nous modifierons ce contenu lorsque nous passerons la souris sur le bouton Ouvrez donc les éléments span avec le nom de la classe, le BTN, texte 1, et insérez du texte Disons explorer davantage. Ensuite, dupliquez-le. Vous avez changé ClassName au lieu d'un, non ? Deux. Et changez aussi le contenu, non ? C'est intéressant. Très bien, c'est tout à propos du balisage HTML Il est maintenant temps d'écrire du CSS. Passons donc au fichier style.css. Tout d'abord, je vais créer des styles communs. Sélectionnez tous les éléments à l'aide d'un astérisque et définissez la marge et le remplissage Je vais également modifier la famille de police pour chaque élément. Utilisons ici Joséphine Sans Sensory. Très bien, ensuite je vais changer la couleur de fond de l'élément du corps Sélectionnons-le et attribuons-lui sa couleur d'arrière-plan C, F, D, E zéro. Je vais maintenant définir la largeur et la hauteur du wrapper btn. En fait, cela occupera toute la page. Attribuons donc à chaque largeur. Et malheureusement, c'est 100 %. Quant à la hauteur, je vais la définir à 100 % de la fenêtre d'affichage Très bien, ensuite, jouons au bouton au centre de la page Et je vais le faire en utilisant des positions et en transformant la traduction. Sélectionnons le bouton. Définissez sa position comme absolue. Ensuite, je vais le déplacer de haut en bas de 50 %. Définissons donc la position supérieure à 50 % et déplaçons-la également de gauche à droite de 50 %. Enfin, afin de centrer parfaitement le bouton, nous devons utiliser Transform Translate. Et nous devons dépasser votre -50 %. Et puis encore -50 %. Très bien, donc une fois que le bouton est parfaitement centré sur la page, je vais le personnaliser Définissons sa largeur et sa hauteur. Réglé avec 250 pixels. Quant à la hauteur, attribuons-la à 70 pixels. Changez ensuite l'arrière-plan. Dans ce cas, je vais utiliser un dégradé linéaire avec trois couleurs différentes. Et je vais aussi changer la direction de la transition des couleurs. Nous allons utiliser de bas en haut. Ces trois couleurs différentes peu sûres. Le premier sera le 001 54c. Le suivant devrait être le 123 76e comme le dernier, non ? 234, 87 g. Très bien, donc la couleur de fond est modifiée. Changeons également la couleur du texte. Faites-le blanc. Je vais également créer un bouton autour de celui-ci en utilisant border-radius Nous dévaluons 50 pixels. Supprimez ensuite la bordure par défaut. De plus, je vais supprimer le contour par défaut car lorsque nous cliquons sur le bouton, la ligne bleue apparaît. Définissons donc le plan comme aucun. Changez également le type de grossier, faites-en un pointeur. Et enfin, créez un effet d'ombre. Utilisez box-shadow avec les valeurs de 0,15 pixels, soit deux pixels. Et comme couleur, à droite, RGBA 000.5. Très bien, pour l'instant, c'est tout à propos du bouton. Il a déjà l'air bien et nous allons maintenant devoir nous occuper de son contenu. Nous allons donc sélectionner les éléments de la plage. Au début, augmentez la taille de la police, faites-la 18 pixels. Transformez ensuite le texte en majuscules et créez un espace entre les lettres en utilisant l' espacement des lettres avec la valeur un maximum. Très bien, il est maintenant temps de créer les effets de survol. Mais avant cela, je vais positionner les éléments de la travée. Dans un premier temps, je vais travailler sur le premier sélectionner et définir sa position comme absolue. Pour l'instant, je souhaite masquer le deuxième élément de la plage afin de faciliter notre processus de travail. Nous allons donc le sélectionner et l'attribuer à chaque affichage, aucun. Très bien, définissons la largeur des premiers éléments de travée et fixons-la à 100 %. Placez-le ensuite au centre du bouton. Pour cela, nous avons besoin de la première position avec une valeur de 50 %. Alors nous avons besoin de Left Zero. Maintenant, afin de centrer parfaitement les éléments, nous devons utiliser à nouveau transform. Mais dans ce cas, traduisez avec la direction y et avec une valeur de -50 %. Très bien, c'est tout pour les premiers éléments de la travée. Maintenant, je vais définir une position pour la seconde. Par défaut, je vais le placer sous le bouton. Ensuite, passez la souris pour le déplacer vers le haut et l'afficher en tant que contenu du bouton Débarrassons-nous donc de ne rien afficher à partir d'ici. En fait, nous devons également utiliser des propriétés similaires pour le deuxième élément de span. Je vais donc copier ces propriétés à partir d' ici et les coller pour la seconde période. Comme vous le voyez, les deux éléments de la travée occupent la même place, mais nous n'en avons pas besoin. Comme je l'ai dit, je vais placer la deuxième plage en dessous du bouton. Et pour eux, changeons la valeur de la première position pour la porter à 150 %. Très bien, donc tout est prêt, il est temps de créer un effet de survol En survol. Je vais déplacer le premier texte vers le haut. Je veux dire, ça devrait être caché. Quant à la deuxième travée, elle la déplacera également vers le haut et affichera le contenu du bout. Nous allons donc sélectionner le bouton avec le pointeur de la souris. Sélectionnez ensuite les premiers éléments de la plage. Je vais donc augmenter le premier élément de travée de 100 %. Nous devons donc fixer la première position à -100 %. Donc, si je passe la souris sur le bouton, le texte sera déplacé vers le haut. Maintenant, nous devons également déplacer cette deuxième travée. En fait, dupliquons ce code. Changez le nom de la classe. Nous avons besoin de toi pour la quatrième place, la première place. Nous devons le fixer à 50 %. Donc, si je passe la souris sur le bouton, nous obtiendrons tous ou eux ce résultat Il ne nous reste plus qu'à personnaliser cet effet. Je veux dire, je vais y ajouter une transition avec les valeurs top et 0.2 s. Maintenant, l'effet est bien meilleur et la seule chose à faire est de masquer le texte lorsqu'il est en dehors du bouton. Pour cela, je vais utiliser overflow hidden. Très bien, maintenant tout allait bien. Et en fait, avec ce petit projet, nous avons terminé 25. Projet 22 - Diaporama du module: Bonjour et bienvenue dans notre nouvelle vidéo dans laquelle nous allons créer un diaporama Avant de commencer à construire les projets, je vais décrire de quoi il s'agit. Comme vous pouvez le voir par défaut, ce diaporama fonctionne avec de jolis effets de fondu Ci-dessous, nous avons un bouton Play Pause. Si je clique dessus, le diaporama s'arrête. Et également sur les côtés gauche et droit, deux commandes ou flèches seront affichées . En les utilisant, vous pouvez exécuter ce diaporama manuellement. Si je clique sur le bouton Play et que je passe la souris sur le côté droit ou gauche, les flèches s' affichent Si je clique sur l'un d'entre eux, ce diaporama passera en mode manuel Il ne fonctionnera plus automatiquement et le bouton de publication sera également transformé en jeu, mais d'accord, allons-y et commençons à travailler dessus. Ici, sur le bureau, j'ai créé un tout nouveau dossier appelé diaporama, dans lequel j'ai un autre dossier appelé Il inclut toutes les images que nous allons utiliser tout au long de ce projet. En fait, vous pouvez télécharger les fichiers source à partir du lien figurant dans la description. Ils sont téléchargés sur GitHub, non ? Allons-y et ouvrons ce dossier dans VS Code. Je vais créer trois fichiers différents. Le premier sera index.html. Ensuite, nous avons besoin de style.css et également du fichier scripts dot js. Accédez ensuite au fichier index.html et créez un document HTML de base. Pour cela, nous devons placer un point d'exclamation puis appuyer sur Entrée ou sur la touche Tab Allons-y et changeons le titre. Je vais insérer votre diaporama. Ensuite, je vais lier les fichiers CSS et JavaScript. Ouvrons la balise de lien. L'ajout de l' attribut H referes indique le nom du fichier, style.css. Ensuite, en bas, juste au-dessus la balise body de fermeture, ouvrez la balise de script. Nous avons besoin ici des attributs source et nous devons indiquer le nom du fichier script.js. Très bien, enfin, nous devons exécuter notre projet dans le navigateur. Pour cela, je vais utiliser un serveur live, qui est un excellent package, nous permet de lancer le projet dans le navigateur sans actualiser la page à chaque fois que nous apportons des modifications. Vous pouvez donc procéder à l' installation de ce package. Pour exécuter un serveur live, vous pouvez cliquer avec le bouton droit de la souris, puis choisir Ouvrir avec Live Server. Très bien, organisons un peu l' éditeur de texte et le navigateur, puis commençons à créer le balisage HTML Le premier élément que nous allons créer est un div, qui sera en fait un conteneur Il va encapsuler l'intégralité du contenu. Ensuite, nous avons besoin d'une autre division. Il inclura le diaporama lui-même. Il est donc affecté au wrapper de diaporama du nom de classe. Ensuite, je vais passer la flèche gauche à ces développements. Allons-y et open div aura deux classes différentes Le premier sera un nom de classe commun pour les deux flèches Control. Ensuite, je vais utiliser un nom de classe individuel, flèche gauche. En fait, ces flèches seront créées manuellement. Nous n'aurons aucune icône. Je vais donc vous donner ici une autre astuce avec la flèche de classe. Enfin, nous devons insérer ici deux lignes représentées par des développements. Le premier développement doit donc comporter des classes, une ligne et une. Dupliquons cette ligne de code et changeons le nom de la classe dont nous avons besoin ici. Très bien, c'est tout à propos de la flèche gauche. Je vais le dupliquer pour la flèche droite et changer les noms de classe dont nous avons besoin ici, flèche droite. En ce qui concerne les numéros de ligne, nous avons besoin de 3.4. OK, c'est tout pour les flèches. Maintenant, je vais insérer entre les diapositives, je suis dans les images Ouvrons les développements avec les diapositives ClassName. Chaque image sera donc enveloppée par un développement. Par conséquent, ouvrons-le avec les noms des classes, diapositive, diapositive 1. En fait, nous devons utiliser ces noms de classe numérotés parce que nous allons les utiliser à partir de JavaScript. Insérez ensuite une image ici. En fait, je ne vais pas utiliser d'attribut alt, alors allons-y, éliminons-le, puis sélectionnons l'image dans le dossier images. Voici donc notre image. Allons-y, dupliquons la diapositive deux fois pour le moment et changeons également les noms des classes et des images qu'elle contient ici. Image 2 et 3.3. instant, nous avons trois images, mais en fin de compte, vous pouvez ajouter autant d' images que vous le souhaitez. Cela fonctionnera correctement et ne bloquera pas le projet. Enfin, je vais créer un bouton de pause de lecture. Ouvrons les développements juste après la flèche droite et assignés à la pose de jeu du nom du cluster. En tant que bouton de pause de lecture. Je vais utiliser l'icône Font Awesome. Et pour ce faire, nous devons récupérer le lien CDN pour Font Awesome Allons-y et recherchons Font Awesome, CDN, js. Accédez ensuite à ce lien , puis récupérez le premier lien. À partir d'ici. Je vais ouvrir la balise de lien. Ensuite, collons un lien et l'attribut de référence H. Très bien, puis en bas, insérez un élément avec les noms des classes, FAS, f, dash, play Très bien, c'est tout à propos du balisage HTML. Nous avons ici des images et aussi le bouton Play juste après. Il est maintenant temps de commencer à écrire du CSS. Passons au fichier style.css. La première chose que je vais faire est de créer des styles de réinitialisation. Sélectionnons donc tous les éléments à l'aide d'un astérisque et définissons la marge et le remplissage Sélectionnez ensuite l'emballage du diaporama. En fait, je vais étendre ces éléments à l'ensemble de la fenêtre d'affichage Définissons donc la largeur à 100 %. Et puis la hauteur était de cent vh. Vh signifie que la hauteur occupera 100 % de la hauteur de la fenêtre d'affichage À l'heure actuelle, il ne se passe pas grand-chose ici. Nous devons donc ajouter d' autres styles. Nous devons nous occuper du toboggan lui-même. Allons-y donc et sélectionnons-le. Réglons la largeur et la hauteur, toutes deux à 100 %. Et je vais également définir sa position comme absolue. Cela nous permettra de placer les images les unes sur les autres. Il semble maintenant que nous n'ayons ici qu'une seule image, mais en fait, les autres images sont placées en arrière-plan les unes sur les autres. Très bien, ensuite, prenons soin de l'image elle-même. Sélectionnez donc l'élément IMG. Nous avons également besoin de la même largeur et de la même hauteur pour l'image. Je vais donc hériter de ces deux propriétés, la largeur et la hauteur Et aussi pour que l'image soit belle, utilisons un couvre-pieds pour objets. Enfin, je veux rendre l' image un peu plus sombre. Et pour y parvenir, je vais attribuer à son élément parent un fond noir. Ensuite, diminuons l'opacité de l'image. Je vais le faire 0,6. OK, donc je pense que ça a l'air bien mieux maintenant il est temps de commencer à travailler sur les commandes gauche et droite. Comme vous vous en souvenez, les deux flèches ont des noms de classe communs. Contrôle. Allons-y donc et sélectionnons-le. Disons que la position est absolue. Ensuite, afin de faire fonctionner Controls Position en fonction de son élément parent, qui dans ce cas est un wrapper de diaporama Nous devons utiliser la position relative Suivant, je vais définir la première position. Mettons-le à zéro. Et définissez également la largeur et hauteur en tant que valeur de la propriété de largeur. Je vais utiliser la largeur de la fenêtre d'affichage. Cela rend les commandes plus réactives sur différentes tailles d'écran. Je vais utiliser une largeur de fenêtre de 15. Cela signifie que la largeur du contrôle sera égale à 15 % de la largeur de la fenêtre d'affichage En ce qui concerne la hauteur, définissons-la à 100 %. Donc, pour le moment, le contrôle n' est pas visible. Et pour résoudre ce problème, allons-y et changeons la couleur d'arrière-plan. Dans ce cas, je vais utiliser la valeur RGBA. Je vais donc passer ici par le 902-90-4907. Et puis comme valeur d'opacité, je vais passer 0,6 Alors maintenant, comme vous pouvez le voir, nous avons ici le contrôle sur le côté gauche de la page. Le second contrôle n'est pas visible pour le moment car, en HTML, il est placé après le diaporama, et il est donc placé chaque année derrière ce voyant Pour résoudre ce problème, je vais utiliser la propriété z-index. Portons-en à 100. Maintenant, en un coup d'œil, nous avons le même résultat, mais en fait, les deux commandes sont placées l'une sur l'autre. Parce que par défaut pour les deux, la position gauche est définie sur zéro. Nous devons donc nous en occuper. Pour la flèche gauche, nous avons besoin que la propriété gauche soit définie sur zéro. En ce qui concerne la flèche droite, nous devons également mettre la bonne position à zéro. Très bien, maintenant tout fonctionne bien. Les deux commandes sont placées de la bonne manière. La dernière chose que je vais faire à propos des commandes est de définir le type du curseur en tant que point. Très bien, maintenant il est temps de s' occuper des flèches. Comme nous l'avons dit, nous devons les créer manuellement avec les développements. Je vais donc tous les sélectionner en utilisant la ligne de nom de classe commune. Tout d'abord, rendons-les visibles. Pour cela, nous devons définir la largeur et la hauteur. Je vais définir la largeur sous forme de points à parcourir. Pour ce qui est de la hauteur. Faisons-en dix rampes. Et définissez également la couleur de fond. Je vais utiliser ici ce qu'on appelle r d d d Phi, d Phi. Nous avons donc ici nos lignes. En fait, nous avons quatre lignes différentes et pour les transformer en flèches, nous devons les faire pivoter. Allons-y et sélectionnons la première ligne, qui porte le nom de la classe, la première ligne. Je vais le faire pivoter de 20 degrés. Pour cela, nous devons utiliser la propriété de transformation. Ensuite, nous devons faire pivoter la fonction. Et entre parenthèses, nous devons indiquer 20 degrés. Comme vous pouvez le constater, la ligne pivote mais elle est partiellement masquée Donc, pour résoudre ce problème, je vais centrer les lignes à l'intérieur du contrôle correspondant. Je vais utiliser quelques propriétés et valeurs de flexbox Le premier sera Display Flex. Ensuite, pour centrer l'élément flexible horizontalement, nous devons utiliser justify-content En ce qui concerne le centrage vertical, nous devons aligner les éléments au centre l'heure actuelle, la ligne est visible et en fait la flèche est centrée. Allons-y et occupons-nous de la deuxième ligne. Nous devons le faire pivoter du même degré mais dans le sens opposé. Allons-y donc et dupliquons ce code ici. Je vais changer le nom de la classe. Nous avons besoin ici de la ligne 2. Et nous avons également besoin de 20 degrés négatifs. Bien, nous avons déjà une flèche, mais comme vous pouvez le voir, les lignes sont un peu éloignées les unes des autres Donc, pour résoudre ce problème, je vais les déplacer légèrement à l'aide de la fonction Translate. Nous devons les déplacer selon l'axe Y. Nous devons donc traduire y avec la valeur 0,35 RAM. Nous avons également besoin de la même chose pour la deuxième ligne, mais encore une fois, avec le signe moins. Copions-le, collez-le ici et ici, avec le signe moins. Très bien, comme vous pouvez le voir, nous avons ici la flèche parfaite Allons-y et faisons de même pour la bonne personne. Dupliquons les deux lignes. Ensuite, je vais changer le nom des classes. Nous avons besoin de la ligne trois et de la ligne quatre Pour la troisième flèche, nous avons besoin d'une valeur négative de 20 degrés. Quant à la quatrième ligne, nous n'avons besoin que de 20 degrés. Très bien, c'est tout pour les commandes. La dernière chose dont nous devons nous occuper est le bouton Play Pause. Allons-y donc et sélectionnons ces éléments. Tout d'abord, je vais m' occuper de la position du bouton car il n'est pas visible pour le moment. Il s'est retrouvé derrière les toboggans. Définissons donc sa position comme absolue. Ensuite, je vais dire les 5 % les plus pauvres. Et que pour centrer ces éléments, nous devons régler la position du loquet à 50 %. De plus, pour un centrage parfait, nous devons utiliser Transform Avec Translate X. Nous avons dû déplacer les éléments selon la direction X, et nous devons passer ici à -50 %. Cette petite technique nous permet donc de transmettre parfaitement l'élément. Enfin, utilisons le pointeur du curseur. OK, maintenant le bouton est faisable et il est centré. Enfin, je veux que ça soit beau. Allons-y et sélectionnons l'élément I lui-même. Changez la couleur de l'élément, mettez-le en blanc et augmentez également la taille de la police. Faites-le 50 pixels. Hein ? Pour l'instant, nous en avons terminé avec le CSS. Tous les éléments sont stylisés. Et maintenant, nous devons commencer à écrire du JavaScript. Passons au fichier script.js. Donc, dans un premier temps, nous allons lancer ce diaporama automatiquement Pour cela, nous allons créer deux fonctions différentes. La première sera de changer les diapositives. En fait, je pense qu'il serait préférable de diviser l'éditeur et d'afficher également le fichier HTML, car nous allons sélectionner certains éléments à l'aide du DOM JavaScript. Je vais donc sélectionner toutes les diapositives. Créons une variable appelée liste de diapositives. Pour sélectionner deux éléments qui ont le même nom de classe, nous pouvons utiliser la méthode all du sélecteur de requête Passons ici la diapositive du nom de la classe. En fait, lorsque vous sélectionnez des éléments à l'aide de la méthode all du sélecteur de requête, elle renvoie un objet semblable à un tableau appelé Et pour manipuler cette liste sous forme de tableau, nous devons la transformer en tableau. Allons-y et créons une nouvelle variable. Je vais l'appeler Slides. Maintenant, pour transformer la liste des nœuds en un tableau, nous devons utiliser la méthode array from. Et nous devons transmettre votre liste de diapositives. Très bien, je vais maintenant créer une variable qui représentera la diapositive actuelle dans le diaporama Je veux dire cette diapositive qui s'affichera à l'écran, la valeur de cette variable va changer. Par conséquent, nous allons utiliser la déclaration let. Appelons cette variable current, puis définissons-la comme une. Ainsi, par défaut, la valeur de cette variable indiquera le numéro d'une diapositive qui sera actuellement affichée. D'accord ? Nous avons donc sélectionné toutes les diapositives et les avons stockées dans un tableau. Comme vous le savez, ils avaient des noms de classe. Diapositive 1, diapositive 2, etc. Nous devons parcourir le tableau, accéder à la deuxième partie de ces noms de classes, principalement des nombres, et les comparer à la valeur de la variable actuelle. S'ils sont égaux, nous devons montrer cette diapositive. Et s'ils ne sont pas égaux, nous devons le cacher. bon, c'est ça. Ce que nous allons faire Pour parcourir le tableau, je vais utiliser l'une des méthodes d'assistance du tableau, appelée for-each Nous devons passer ici une fonction de flèche avec la diapositive en cours. Ainsi, pour accéder au nom du cluster, nous pouvons utiliser une propriété appelée class list, qui nous donne en fait un tableau des noms de classes. Je vais donc utiliser des déclarations if. Ensuite, comme condition, nous avons besoin de la liste de classes de diapositives suivante. Donc, comme nous l'avons dit, cette propriété nous donnera un tableau des noms de classes. Dans ce cas, les noms de ces classes seront ceux de la diapositive 1. Nous avons besoin du deuxième élément, je veux dire de la diapositive 1. Nous devons donc indiquer le numéro d' indice sous la forme d'un. Ensuite, nous devons diviser nom de ce cluster par le trait d'union Cela renverra un autre tableau dans lequel nous aurons deux éléments, slide et un Nous devons récupérer le deuxième objet, qui en est un. Nous devons donc indiquer ici l'indice numéro un. J'espère que c'est logique pour toi. Nous avons maintenant accès au numéro de chaque diapositive, mais en fait, le type de données de ce numéro n'est pas un nombre, c'est une chaîne Nous devons donc le transformer en nombre. Et nous pouvons le faire simplement en le multipliant par un. D'accord ? Donc, si ce nombre est égal à la valeur de la variable actuelle, nous devons afficher la diapositive actuelle. C'est pour ça. Insérons ici le style des diapositives à points. Ensuite, je vais utiliser la propriété appelée texte CSS, qui nous permet d'utiliser plusieurs déclarations CSS. Nous avons donc besoin ici d'une visibilité, d'une part, et d'opacité, d'autre Si cette condition est fausse, nous devons masquer ces diapositives. Nous avons donc besoin de la déclaration L. Ensuite, récupérons cette ligne de code. Masquez la visibilité. Opacité zéro. Hein ? C'est ça Nous pouvons maintenant appeler cette fonction. Et voyons comment cela fonctionne. heure actuelle Le courant est égal à un. Nous voyons donc ici la première image. Afin de prouver que je peux survoler le chemin de l'image ici, fichier index.html Vous pouvez donc voir qu'il s'agit bien de la première image. En fait, si vous souhaitez prévisualiser et créer une image de cette façon, vous pouvez installer un package appelé aperçu de l'image. Très bien, si je change la valeur de la variable actuelle, disons 23, la troisième image s'affichera Si je vérifie à nouveau dans le fichier index.html, nous trouverons la même image. Jusqu'à présent, tout fonctionne bien. Il est maintenant temps de lancer le diaporama automatiquement. Pour cela, je vais créer une autre fonction. Disons que c'est Play Pause. Nous devons donc changer la diapositive toutes les 3 s. Nous devons donc utiliser la méthode setInterval Donc, les 3 premières secondes, la première image s'affichera. Ensuite, cette fonction de rappel s'exécutera. Nous devons donc augmenter la valeur des courants d'une unité. Pour cela, utilisons l'opérateur d' incrémentation plus, plus. Et nous devons également appeler la fonction Change Slides. Enfin, il s'agit d'indiquer ici l'intervalle. Je vais l'enregistrer sous forme de 3 s. Et vous devez l'exprimer en millisecondes Nous avons donc besoin de 3 000 millisecondes. D'accord ? Comme vous pouvez le voir, le diaporama fonctionne correctement Après la dernière image, la valeur actuelle continue d'augmenter. Nous arrivons donc à une page blanche. Nous devons donc utiliser les instructions if dans la fonction change slides. Donc, si la valeur actuelle est supérieure à la longueur des diapositives, nous devons en créer une. Encore une fois. Nous avons besoin, si nous le pouvons, la condition actuelle soit supérieure à la longueur des points de la diapositive. Si c'est vrai, alors nous devons définir le courant comme un. Maintenant, comme vous pouvez le voir, le diaporama fonctionne à l'infini. Très bien, nous devons maintenant contrôler le bouton de pause de lecture. Par défaut, le diaporama s'exécute automatiquement. Mais une fois que nous avons cliqué sur le bouton Pause, nous devons arrêter le diaporama Nous devons donc ajouter quelques éléments pour jouer. Fonction de pause. Je vais créer deux variables différentes. le premier cas, nous conserverons une valeur booléenne, ce qui nous aidera à mettre en place une certaine logique Déclenchons une nouvelle variable, appelons-la play pose. Et par défaut, c'est vrai. Nous avons également besoin d'une variable appelée interval, qui stockera la fonction d'intervalle définie que nous avons utilisée il y a une minute. Nous devons donc exécuter ce diaporama automatiquement si play post pool est vrai, sinon nous devons l'arrêter Nous devons donc utiliser des instructions if dans lesquelles je vais vérifier si le booléen plate post est vrai ou non Si c'est vrai, nous devons insérer fonction set interval dans l'instruction if. Et comme nous l'avons dit, nous devons également stocker cette fonction dans la variable d'intervalle. Et après cela, nous devons définir le bool de pause de lecture comme faux. Autre déclaration à la minute suivante. Si la fonction de pause de lecture était appelée La deuxième fois, cela signifie que la valeur de la valeur booléenne de pause de lecture deviendrait fausse Par conséquent, toutes les autres instructions seront exécutées dans lesquelles nous devons effacer l'intervalle. Et nous avons dû remettre le booléen play pause sur true. Très bien, la prochaine chose que nous devons faire est associer un événement de clic au bouton de pause de lecture Allons-y et sélectionnons cet élément. Je vais utiliser la méthode de sélection de requêtes. Ensuite, nous utilisons ClassName play pose. Et attaché à chaque auditeur de l'événement. Passons ici, cliquez sur événement, puis sur la fonction flèche. Dans cette fonction, nous devons appeler la fonction de post-plaque. Alors maintenant, comme vous le voyez, le diaporama s'exécute automatiquement. Mais si je clique sur le bouton, ça s'arrêtera. Si je clique à nouveau, cela continuera à fonctionner. D'accord ? Nous devons maintenant changer l'icône de ce bouton. Quand on clique dessus. Par défaut, nous avons créé un bouton de lecture et nous devons le transformer en bouton de pause lorsque nous cliquons sur l'icône. Nous devons donc manipuler avec deux polices différentes, noms de classe géniaux, la FAA joue un F, un pouls Je vais donc créer une nouvelle fonction. Disons que c'est changer de pose de jeu. Ensuite, allons-y et sélectionnons l'icône. Est à nouveau une méthode de sélection de requêtes. Passe le nom de ta classe et joue la pose. Et puis l'Irlande. Ensuite, je vais avoir accès au nom de la deuxième classe, qui est FA Dash Play. Et pour cela encore une fois, je vais utiliser une propriété de liste de classes. Créons donc une nouvelle variable. Je vais dire que c'est plus court. Voir ls. Ensuite, nous devons écrire votre liste de classes à points d'icônes avec l'index numéro un. Très bien, donc si le nom de la classe est égal à f a play, nous devrions le supprimer et ajouter un post et vice versa. Je vais donc utiliser une instruction if. Nous devons vérifier si la classe est égale à f d'un jeu. Si cette condition est vraie, nous devons supprimer ce nom de classe. Nous avons donc besoin d'une liste d'icônes et nous devons utiliser la méthode de suppression avec un nom de classe FAA play Et en même temps, nous devons ajouter à l'élément une classe différente. Nous avons donc besoin d'icônes, listes de classes, de points, d' ajouts, de tirets FA. Donc si cette condition est fausse, si philos n'est pas égal à f, un dash play Autre déclaration dans laquelle nous devons retirer des éléments qui regroupent les posts de la FAA et y ajouter F une plaque Reprenons donc ces deux lignes à partir d' ici et changeons simplement le nom de la classe. Très bien, la dernière chose à faire est d'appeler cette fonction, et nous devons le faire dans Play Pose Function Comme vous le voyez par défaut, nous avons un bouton de pause car le diaporama s'exécute automatiquement Mais si je clique sur l'icône, elle redeviendra le bouton de lecture et le diaporama s'arrêtera également Très bien, c'est tout pour cette partie. Ensuite, nous devons nous occuper des contrôles. Lorsque nous cliquons sur l'une des flèches, le diaporama doit s'arrêter et nous devons pouvoir modifier les diapositives manuellement Donc, tout d'abord, nous devons sélectionner les flèches. Commençons par une flèche vers la gauche. Je vais utiliser à nouveau la méthode QuerySelector. Arrêtons-nous ici en regroupant la flèche gauche, puis en y attachant l' écouteur d' événements. Avec un événement de clic. Onclick, nous devons appeler la fonction de pause de lecture si le booléen de pose de jeu Parce que lorsqu'il est faux, cela signifie que le diaporama s'exécute automatiquement Une fois que nous appelons la fonction pause du jeu elle doit s'arrêter. Nous avons donc besoin d'une instruction if que nous devons vérifier comme condition. Si ce n'est pas le cas, jouez la pose booléenne. Ensuite, nous devons appeler la fonction play pause. De plus, en cas de clic sur la flèche gauche, nous devons diminuer la valeur actuelle d'une unité. Nous avons donc besoin d'un courant avec un opérateur de décrémentation moins, moins. Nous devons appeler à nouveau la fonction de modification des diapositives. Donc si je clique sur la flèche, nous n'aurons qu'une page blanche. Cela se produit parce que la valeur actuelle devient zéro. Et avec zéro, nous n' avons aucun numéro de diapositive. Nous devons donc éviter ce genre de choses. Pour cela, allons changer la fonction des diapositives et ajoutons-les ici. Sinon, si c'est une déclaration. Nous devons vérifier si le courant est égal à zéro. Si tel est le cas, si c'est le cas, courant doit être égal à la longueur des points des diapositives. Maintenant, si je teste à nouveau, cela fonctionnera bien. Très bien, nous avons également besoin de la même chose pour la flèche droite. Allons-y donc et dupliquons ce code. Je vais changer le nom de la classe. Nous n'avons pas entendu la flèche droite. Dans le cas de la flèche droite, nous devons augmenter la valeur actuelle d'une unité. Donc, au lieu de signes moins, nous avons besoin ici de plus, plus. Très bien, donc tout fonctionne bien. Étape par étape. Nous arrivons à la fin de ce projet. Mais nous devons encore faire quelques choses pour améliorer l'apparence de notre diaporama Par défaut, lorsque ce diaporama s'exécute automatiquement, contrôles doivent être Et nous devons les afficher lorsque nous survolons les flèches Et nous devons également les afficher une fois que nous arrêtons le diaporama Allons-y et passons au fichier style.css. Je vais créer une nouvelle classe. Appelons cela la visibilité des flèches. Nous devons lui attribuer une opacité nulle. Nous allons ajouter et supprimer cette classe dynamiquement à partir de JavaScript. En plus de cela, nous devons faire apparaître les commandes lorsque vous survolez. Nous devons donc contrôler et définir l'opacité comme une seule. Enfin, améliorons l' effet de survol en utilisant la transition. Nous devons insérer ici l'opacité, puis la durée 0,5 s, et également utiliser l'une des fonctions de synchronisation de transition appelée linéaire Très bien, c'est tout à propos du CSS. Revenons au fichier JavaScript. Je vais créer une nouvelle fonction. Appelons cela la visibilité des flèches. Tout d'abord, nous devons sélectionner les deux flèches. Faisons-le en utilisant à nouveau la méthode all du sélecteur de requêtes. Les deux flèches ont le contrôle du nom de classe commun. Ensuite, je vais les parcourir en boucle et, en fonction de certaines conditions, ajouter et supprimer la visibilité des flèches de cluster nouvellement créées. Tout d'abord, pour parcourir les flèches, nous devons transformer la liste des nœuds en un tableau. Tu sais déjà comment faire. Nous devons utiliser le point du tableau à partir de. Ensuite, nous devons passer des flèches plutôt que parcourir le tableau que nous devons utiliser pour chaque méthode. Passons votre fonction flèche à la flèche actuelle. Donc, si le diaporama s'exécute automatiquement, nous devons masquer les flèches Donc, si une instruction est ensuite insérée ici en tant que condition, jouez pause Boolean Si c'est vrai, nous devons ajouter à la liste des classes de la flèche la visibilité des flèches de classe. Nous avons donc besoin d'une liste de classes à points. Ensuite, nous devons utiliser la méthode appelée ed. Et nous devons passer ici la visibilité des flèches du nom de classe. Sinon, si le diaporama ne s'exécute pas automatiquement, nous devons supprimer cette classe Nous avons donc besoin de la déclaration L. Ensuite, récupérons cette ligne de code. Au lieu des méthodes Agile, utilisez la suppression. Enfin, allons-y et appelons cette fonction dans la fonction play pause. D'accord, par défaut, les flèches sont masquées. Si je les survole, ils devraient apparaître. Si je clique sur l'un d'entre eux, ce diaporama s' arrêtera automatiquement et nous pourrons modifier les diapositives manuellement De plus, si je clique sur le bouton Pause , des flèches s'afficheront. En fait, nous avons presque terminé. La seule chose à faire est d'ajouter un effet de fondu. J'ai créé deux diapositives pour ajouter des effets de fondu lorsque ces diapositives changent. Pour cela, en CSS, nous devons ajouter une transition vers une diapositive en lui attribuant opacité et une durée de 1 s. Et également pour assombrir l'effet de fondu, nous devons changer la couleur de fond de l'emballage du diaporama Faisons en noir. C'est bon, c'est ça. Félicitations, nous avons terminé la construction de ce projet. Comme vous pouvez le constater, tout fonctionne parfaitement. En fait, je vais ajouter ici d'autres images. Dupliquons la diapositive trois fois et changeons les noms des classes. Nous devons également modifier les noms du bouton OK, afin que vous puissiez coller autant d'images que vous le souhaitez. Il suffit de numéroter les classes de la bonne façon. 26. Projet 23 - Button radio CSS personnalisé: Dans cette vidéo, nous allons créer un bouton radio CSS personnalisé. En gros, sur différents sites Web, vous pouvez voir des boutons radio par défaut, qui, à mon avis, ne sont pas très beaux. Dans cette vidéo, vous allez découvrir comment créer boutons radio modernes et sympas en utilisant uniquement du HTML et du CSS. Très bien, comme vous le voyez, nous avons ici deux boutons radio, l' option un et l'option deux Nous avons des cercles verts. Et si nous cliquons dessus, ils seront bien vérifiés avec un effet de fondu. D'accord, voyons donc ce que nous allons créer. Ici, dans le code VS, j'ai deux fichiers différents, index.html et style.css. Dans un document HTML, j'ai traditionnellement préparé la structure de base du document HTML. Nous avons ici deux liens différents, un pour les polices Google et un autre pour le fichier style.css. Très bien, allons-y et comme d'habitude, nous commençons à créer du balisage HTML Je vais ouvrir un élément div, qui devrait être un wrapper pour les deux options Il est donc affecté à son wrapper de nom de classe. Ouvrez ensuite un autre développement qui sera lui-même une option. Il est donc affecté à son option de cluster. À l'intérieur des éléments div, nous avons besoin de deux éléments. Le premier sera saisi comme le type dont nous avons besoin ici, la radio. Outre les attributs de type, nous avons besoin de deux autres attributs. La première sera une carte d'identité. Nous utiliserons l'ID pour relier les entrées et étiqueter les éléments et pour créer un événement de clic. Alors attribuons-lui la valeur, cochez-en une. Nous avons également besoin ici de l'attribut name. L'attribut name ne nous permet pas de vérifier plusieurs boutons radio simultanément. Attribuons-lui la valeur radio. Ensuite, nous avons besoin d'une étiquette. Comme nous l'avons dit, nous allons lier les éléments d'entrée et d'étiquette. Et pour cet ID et quatre attributs doivent avoir exactement les mêmes valeurs. Dans ce cas, nous devons ici en cocher une. Très bien, nous allons avoir deux options. Dupliquons donc le développement. Et la seule chose que nous avons à faire est de modifier les valeurs de l'ID et de quatre attributs. Au lieu d'en vérifier un, nous devons en vérifier deux. D'accord, c'est tout à propos du HTML. Allons dans le fichier style.css et commençons à écrire du CSS. Tout d'abord, créons quelques styles de réinitialisation. Sélectionnez chaque élément à l' aide d'un astérisque. Définissez ensuite la marge et le rembourrage sur zéro. Et nous avons également besoin ici de la taille de la boîte, de la border-box. Ensuite, je vais sélectionner le wrapper. Définissons cette largeur et cette hauteur. Je vais définir la largeur à cent pour cent. En ce qui concerne la hauteur, je veux qu'elle occupe 100 % de la fenêtre d'affichage Et pour cela, nous devons utiliser unité de mesure appelée H. D'accord, je vais parfaitement centrer le contenu sur la page pour cela. Utilisons Flexbox. Nous devons afficher la flexibilité selon laquelle, pour centrer l'élément horizontalement, nous devons utiliser Justify Content Center, S4, le centrage vertical Nous devons aligner les objets au centre. Enfin, comme vous le voyez, les options sont placées côte à côte horizontalement, mais nous devons les placer Et pour cela, changeons la direction de flexion et la transformons en colonne. Très bien, c'est tout à propos de l'emballage. Ensuite, je vais styliser une option. Nous allons donc le sélectionner. D'abord. Définissons sa largeur et sa hauteur. Je vais régler avec 400 pixels. En ce qui concerne la hauteur, fixons-la 100 pixels et changeons également la couleur d'arrière-plan. Tu vois ta couleur gris clair, non ? Ccc. Ensuite, créons un espace autour de chaque option à l'aide de la marge. Définissons-le à 20 pixels et créons également l'espace à l'intérieur de la boîte en utilisant un rembourrage de 20 pixels Enfin, je veux placer les éléments verticalement au centre pour cela. Voyons à nouveau, Flexbox, à droite, affichez Flex puis alignez les éléments au centre Très bien, c'est donc une question d'option. Ensuite, passons à autre chose et stylisons l'étiquette. Vous avez sélectionné le bon libellé d'option. Dans un premier temps, changeons la famille de polices. Je vais utiliser votre police appelée Josephine slab san Augmentez ensuite la taille de la police, faites-la 60 pixels. Enfin, changez le type de plus grossier, faites-le pointer. Très bien, il est maintenant temps de créer un bouton radio pour les clients Pour cela, je vais utiliser des pseudo-éléments avant et après. Le bouton radio, il sera composé de deux parties. Nous aurons un cercle extérieur, qui sera créé à l'aide de pseudo-éléments. Quant au cercle intérieur, il doit se trouver avant le pseudo élément. Alors allons-y et sélectionnons après les pseudo-éléments, non ? Option, étiquette. Après. Tout d'abord, rendons son contenu vide. Ensuite, afin d'aligner les éléments, définissons sa position comme absolue. En fait, je vais positionner le cercle en fonction d'une option div elements Et pour ce faire, nous devons attribuer à chaque position un relatif. Après ça. Pour rendre les éléments visibles, définissons sa largeur et sa hauteur. Je vais faire en sorte qu'ils soient tous les deux de 50 pixels. Et créez également une bordure. La valeur attribuée à la valeur est de cinq pixels, en continu. Et la couleur zéro, a, a, c83. L'élément est maintenant visible. Il a la forme d'un carré et nous voulons en fait le transformer en cercle. Pour cela, définissons un rayon de bordure avec une valeur de 50 %. Très bien, il est maintenant temps d'aligner ces cercles. Définissons la bonne position et fixons-la à 15 %. Et enfin, créez un petit effet d'ombre, ombre de case droite avec des valeurs de 003 pixels. Ensuite, utilisez la couleur RGBA 000 et l'opacité 0,8. OK, donc c'est tout à propos des pseudo-éléments. Nous devons maintenant créer un cercle intérieur en utilisant des pseudo-éléments antérieurs. En fait, nous allons avoir besoin de propriétés similaires pour les deux cercles. Allons-y, dupliquons l'intégralité de ce code , puis apportons quelques modifications. Tout d'abord, changeons « après en « avant », puis supprimons la propriété de bordure. Et au lieu de cela, insérez la couleur d'arrière-plan et attribuez-lui la couleur zéro, un c83 Après cela, changeons la taille du cercle. Pour cela, je vais réduire la largeur et la hauteur. Faisons en sorte qu'ils soient tous les deux de 40 pixels. Et maintenant, nous devons prendre soin de la position de l'élément. Nous devons le faire passer parfaitement au centre du cercle extérieur. Définissons donc la première position et fixons-la à 50 %. Ensuite, utilisez transform. Traduire pourquoi ? Je l'utilise pour déplacer un élément de sa position actuelle légèrement vers le haut. Insérons donc ici -50 %. Enfin, nous devons déplacer les éléments un peu vers la gauche. Pour cela, changeons la valeur de la bonne position au lieu de 15. Essayons 17. À mon avis, ce n'est pas tout à fait suffisant. Modifions-le et faisons 17,5. OK, maintenant ça a l'air bien. Et en fait, avec le style, c'est terminé. Nous devons maintenant faire fonctionner la case à cocher. Ainsi, comme nous l'avons dit au début de cette conférence, nous devons lier la saisie et l' étiquette pour créer un événement de clic. Donc, en général, pour les utilisateurs, ces cercles fonctionneront comme des boutons radio. Je veux dire, visuellement, ils représenteront le bouton radio. Mais en fait, dans les coulisses, avec ces petites entrées, nous ferons le travail principal. Très bien, nous avons donc déjà tous lié les éléments d'étiquette et d'entrée à l'aide de l'identifiant et de quatre attributs Et en fait, cette connexion nous permet de vérifier le bouton radio lorsque nous cliquons sur ces cercles et sur l'étiquette entière. Cela nous permettra donc éventuellement de créer l'événement de clic. Nous allons nous masquer dans des cercles par défaut. Ensuite, nous les afficherons une fois que nous aurons cliqué sur l'étiquette. En d'autres termes, une fois que nous avons vérifié le bouton radio d'origine. Pour y parvenir, je vais utiliser l'une de ces pseudo-classes appelée checked, qui nous permet de définir différents styles CSS lorsque la case est en mode coché Alors sélectionnons les éléments d'entrée, n'est-ce pas ? Entrée d'option. Utilisez ensuite la pseudo-classe appelée checked. Nous devons maintenant accéder au cercle intérieur, qui se trouve avant le pseudo-élément. Pour cela, je vais utiliser l'un de ces combinateurs CSS, appelé sélecteur général de frères et sœurs Et c'est exprimé par le signe tilda. Maintenant, nous devons sélectionner les éléments que nous devons manipuler. Dans ce cas, avant le pseudo-élément, à droite, étiqueter avec avant. Maintenant, avant de définir un style pour ces éléments, masquons les deux cercles, auxquels on masquons les deux cercles, a attribué une opacité nulle avant les pseudo-éléments Comme vous le voyez, les deux cercles sont masqués par défaut et lorsque vous cliquez, nous devons les réafficher. Nous allons donc insérer ici l'opacité 1. Donc, si nous cliquons sur l' un des boutons, ils doivent être cochés. Très bien, nous avons presque terminé. Nous devons juste personnaliser quelques éléments. Rendons l' effet de vérification plus intelligent en utilisant la transition qui lui est attribuée en opacité Et la durée 0,4 s. Je vais également masquer les éléments d'entrée par défaut. Nous allons donc sélectionner l'option de saisie et insérer ici aucune option. Et enfin, l'option Supprimer l' arrière-plan de. Bien, comme vous pouvez le voir, tout fonctionne parfaitement. Et maintenant, vous savez comment créer des boutons radio vraiment beaux et modernes , bien meilleurs que ceux par défaut. 27. Projet 24 - Carte de visite: Bonjour et bienvenue dans notre prochain tutoriel. Dans cette vidéo, nous allons créer une jolie carte de visite 3D Ce petit projet sera créé sur la base du HTML et du CSS. Avant de commencer à travailler sur ce projet, allons-y et décrivons rapidement ce que nous allons créer. Voici donc notre carte de visite. La face avant est composée de deux parties. Sur le côté gauche, nous avons un logo avec le texte de conception Web. En ce qui concerne le côté droit, nous avons ici des informations sur la personne, comme son nom, son numéro de téléphone, son e-mail, son adresse. Si nous survolons la carte, elle tournera dans l'espace 3D Et le verso sera affiché sur lequel nous avons un logo de l'entreprise Très bien, c'est ça, ce que nous allons construire. Encore une fois, tout cela sera créé en utilisant uniquement du HTML et du CSS purs. Ici, dans le code VS, deux fichiers sont ouverts, index.html et style.css. Et j'ai aussi un dossier appelé images dans lequel nous stockons le logo de l'entreprise. Vous pouvez télécharger ces fichiers source de démarrage à partir du lien figurant dans la description. Très bien, donc dans le fichier HTML, j'ai préparé la structure de base du document HTML À l'intérieur de l'élément principal, nous avons quelques liens. Des liens pour les polices Google, les polices, les icônes Awesome, et nous avons également un lien pour le fichier style.css. Allons-y et commençons à créer du balisage HTML. Ouvrons le développement, qui devrait être l' enveloppe de la carte. Attribuons-lui donc un wrapper de cartes nominatives de classe. Ensuite, je vais ouvrir un autre développement, qui sera la carte elle-même. Alors attribuons-lui une carte de classe. Donc, comme nous l'avons dit, la carte sera composée de deux parties, recto et verso. Insérons donc votre développement avec le nom de classe appelé front. La face avant elle-même comportera deux parties, les côtés gauche et droit. Je vais donc insérer ici un autre développement avec la classe à gauche. Le côté gauche sera donc composé de deux éléments. La première sera une image. Ouvrons donc les éléments IMG. Ensuite, dans l'attribut source, indiquons une partie de l'image. Nous avons un dossier appelé images, et nous devons sélectionner le logo point PNG. Ensuite, nous avons besoin de h pour les éléments de titre. En fait, il inclura deux mots différents, conception Web. Je vais emballer le premier avec un élément span. Ouvrons-le. Cette toile d'insertion. Et puis le panneau droit. OK, c'est tout pour le côté gauche. Ouvrons le développement, qui sera le bon côté attribué à cette classe, n'est-ce pas ? Il sera composé de plusieurs parties. Le premier sera une personne. Ouvrons donc le développement. En fait, la partie de la personne sera composée de deux parties différentes. Nous aurons l' icône Font Awesome sur le côté gauche. Quant au côté droit, il inclura le nom de la personne ainsi que le poste et l'entreprise. Attribuons à la classe de développement des noms de personnes, puis écrivons du contenu. Insérez ensuite votre icône Font Awesome, ouvrez l'élément I avec les noms de classe, FAS, FA, tiret, utilisateur, cravate Ensuite, nous devons ouvrir les développements. Passons vos éléments de masquage H4 avec du texte. John Smith. Ouvrez ensuite le paragraphe et insérez-le dans la conception Web informatique. Très bien, nous allons donc avoir quatre pièces similaires sur le côté droit. Allons-y et dupliquons l'ensemble du développement trois fois, puis apportons quelques modifications. Pour le second, nous avons besoin ici de ClassName, téléphone Ensuite, modifiez également le nom de la classe pour l'élément AI. Nous avons besoin ici, encore une fois d'un téléphone. La minute suivante, les deux éléments seront des paragraphes. Supprimons donc le titre. Alors. Dupliquez cette ligne de code et insérez ici quelques numéros de téléphone fictifs. D'accord ? La prochaine partie sera un e-mail. Changeons le nom de la classe, non ? Courrier électronique. Nous avons également besoin ici d'une police différente, d'une icône géniale. Changeons de classe. Nous en avons besoin ici. Enveloppe ouverte. Ensuite, supprime à nouveau l'élément de titre à partir d' ici et modifie le texte du paragraphe. Insérons ici un e-mail factice. John smith@gmail.com. Très bien, la dernière partie sera consacrée à l'adresse. Changeons donc le nom de la classe ici, au repos. Modifiez ensuite également le nom de classe pour les éléments d'IA. Nous avons besoin ici de la carte Dash, Marker, ALT. Ensuite, supprimez les éléments d'un titre. Dupliquez le paragraphe et insérez les textes suivants. Main Street, 1234, deuxième paragraphe. Insérons ici New York et y. Très bien, donc c'est tout à propos de la face avant Je vais maintenant créer le backside, qui va être très simple . Ouvrons le développement Et attribué au dos de sa carte de classe. Nous avons besoin ici d'un seul élément, qui sera une image pour qu'il soit inséré. Et comme attribut source, indiquons une partie de l'image. Très bien, c'est tout à propos du balisage HTML. Maintenant, il est temps de commencer à coiffer. Passons au fichier style.css. Tout d'abord, je vais créer des styles de réinitialisation. Supprimons la marge et le rembourrage par défaut de chaque élément Pour sélectionner tous les éléments, nous devons utiliser un astérisque Passons ensuite votre marge zéro, n, marge intérieure zéro. Ensuite, sélectionnons l'élément du corps. Je vais modifier la famille de polices. Utilisons ici le nom de Montserrat san-serif. Changez ensuite la couleur de fond. Faites-le gris clair en utilisant la couleur C. C, C. Très bien, maintenant je vais travailler sur emballage des cartes, mais avant cela, afin de rendre notre processus de travail plus pratique, il serait préférable de réduire la taille des images Je vais le faire à partir du document HTML. Allons-y et attribuons aux deux images des attributs ayant la valeur cent 50. Bon, maintenant les images sont plus petites et nous pouvons passer à autre chose. Sélectionnez Appeler le wrapper. Je vais le placer parfaitement au centre pour cela, définissons sa position comme absolue. Ensuite, nous devons définir les propriétés du haut et de la gauche à 50 %. Enfin, afin de centrer parfaitement l'élément, nous devons utiliser transform translate. Nous devons insérer vos valeurs -50  % , puis à nouveau -50 %. Très bien, c'est tout pour l' instant en ce qui concerne l'emballage des cartes. Ensuite, je vais travailler sur la carte elle-même. Allons-y et sélectionnons-le. Dans un premier temps, définissons sa largeur et sa hauteur. Je vais définir la largeur à 550 pixels. Hauteur. Définissons-le à 300 pixels. Et changez également la couleur d'arrière-plan et rendez-la blanche. Maintenant, je vais commencer à coiffer la face avant et je pense qu'il serait préférable de cacher la face arrière pendant un certain temps. Faisons-le à partir du document HTML. Je vais assigner à manger l'attribut appelé ici. Revenez ensuite au fichier style.css, sélectionnez Card, Front. Définissez sa largeur et sa hauteur. Faisons en sorte qu'ils soient tous les deux à 100 %. Très bien, ensuite je vais placer les côtés gauche et droit, côte à côte Pour cela, utilisons Display Flex. Et maintenant je vais diviser la face avant en utilisant la fonction de gradient linéaire. Comme vous vous en souvenez dans la version finale de ce projet, la face avant est divisée en deux parties différentes et le côté droit a une couleur différente. Pour y parvenir, utilisons la propriété d'arrière-plan avec un dégradé linéaire. Insertons vos couleurs. Le premier sera RGB à 55, puis à 55, puis de nouveau à 55 En fait, c'est une couleur blanche. Dans la seconde, je vais utiliser le RGB 308-30-8308. Je veux maintenant définir la direction de la transition des couleurs. Insérons donc ici comme premier argument, cent degrés. Ensuite, afin de bien séparer ces deux couleurs, ajoutons deux cols blancs, la valeur est de 40 % comme Paul, la deuxième couleur Écrivons ici zéro. Comme vous pouvez le voir maintenant, la face avant est bien jouée en deux parties. Allons-y et commençons à travailler sur le côté gauche. Sélectionnons-le en utilisant ClassName left. Tout d'abord, définissons la largeur et fixons-la 40 %. Ensuite, je vais placer le contenu parfaitement au centre, sur le côté gauche. Pour cela, utilisons Flexbox. Ensuite, nous devons modifier la direction de la flexion. Faisons-en une colonne. Ensuite, pour placer les éléments au centre, utilisons le centre de contenu de la justification. Et nous devons également aligner les éléments. Centre. Hein ? Ensuite, je vais définir la taille de l'image. Mais maintenant, à partir du CSS, sélectionnons-le. Point droit, gauche, IMG et je me suis assis avec nous à 80 %. Accédez ensuite au fichier index.html et supprimez les attributs de largeur de l'élément d'image. Maintenant, la dernière chose que je veux faire en ce qui concerne le côté gauche est de m' occuper des éléments de titre. Allons-y et sélectionnons-le à droite, points, gauche, H4. Créez ensuite un espace autour du titre à l'aide de la marge. Définissons-le à dix pixels. Augmentez ensuite légèrement la taille de la police. Je vais le faire 18 pixels. Et créez un espace entre les lettres en utilisant l'espacement des lettres avec la valeur un maximum. Enfin, je vais personnaliser le premier mot du titre. Sélectionnons l'élément de plage, point droit, plage gauche. Mettons le texte en majuscules à l'aide du texte, transformons. En majuscules et changez de couleur. Utilisons votre couleur, 0d56, 92 . C'est bon, c'est ça Sur le côté gauche. Nous avons fini de travailler dessus et il est maintenant temps de personnaliser le côté droit. Sélectionnons-le, à droite, à droite. Définissez ensuite sa largeur et augmentez-la à 60 %. Et changez la couleur du texte. Faites-le blanc. OK, je vais maintenant sélectionner le bon contenu. En fait, comme vous vous en souvenez, il se compose de deux parties différentes. La police, l'icône Awesome et le texte. Je veux les placer côte à côte. Et pour cela, utilisons Flexbox, non ? Écran flexible. Et je veux aussi les aligner verticalement au centre. Pour cela, nous avons besoin d'une ligne avec Values Center. Enfin, créons de l'espace haut et en bas à l'aide de la marge. Attribuons-lui des valeurs de 20 pixels puis de zéro. Très bien, allons-y et commençons à styliser la première partie, qui est une personne Sélectionnons-le avec le nom de la classe, la personne. Changez, sa couleur de fond. Dans ce cas, je vais utiliser la couleur 1187 AAC. Créez ensuite de l'espace à l'intérieur de la boîte à l'aide d'un rembourrage. Je vais définir le rembourrage en haut à cinq pixels, puis à zéro sur le côté droit, à cinq pixels en bas et à 30 pixels sur le côté gauche Ajoutons également de l'espace en haut et en bas de la boîte. Utilisez une marge avec les valeurs 30 pixels et zéro. Enfin, je vais créer un effet d'ombre. Utilisons l'ombre de la boîte avec les valeurs 010 pixels, 20 pixels. Et comme couleur RGBA droite, insérez votre couleur noire 000 et l' opacité 0,3 Très bien, maintenant ça a l'air bien mieux. Ensuite, je veux m'occuper de l'icône Font Awesome. Alors sélectionnons-le avec les bons points, le bon contenu. Tout d'abord, définissons la largeur et la hauteur. Je vais faire 35 pixels pour les deux . De plus, je veux que l'icône ait une bordure. Attribuons donc deux valeurs, deux pixels, une valeur continue et une valeur de couleur blanche. Et je veux qu'il soit arrondi. Nous avons donc besoin ici d'un rayon frontalier avec une valeur de 50 pour cent. En tant que C. Pour l'instant, les icônes ne sont pas très belles. Je veux qu'ils soient parfaitement placés au centre du cercle. Pour cela, utilisons à nouveau flexbox. Nous avons besoin ici de Display Flex. Justifiez ensuite le centre du contenu et alignez également les éléments au centre. Maintenant, comme vous le voyez, si air bien, changeons la couleur d'arrière-plan. Utilise ta couleur 11878. Et enfin, créez de l' espace sur le côté droit en utilisant la marge, n'est-ce pas ? 20 pixels. Très bien, étape par étape, nous allons de l'avant. La prochaine chose que je veux faire est de transformer le nom de la personne en majuscules Sélectionnons donc les éléments de titre et attribuons-leur une transformation de texte avec une valeur en majuscules D'accord, c'est tout à propos de la personne Comme vous le voyez, nous devons nous occuper de l'alignement du reste des pièces. Commençons par le téléphone sélectionné et qui lui est attribué. Marquage à gauche avec une valeur de 30 pixels. Dupliquons ce code deux fois. Modifiez les noms des classes. Nous avons besoin de votre adresse e-mail. Et modifiez également les valeurs de la propriété padding-left. Pour le second, nous avons besoin 20 pixels et pour l'adresse, nous avons besoin de dix pics. Très bien, nous devons maintenant commencer à travailler sur la création d'un effet 3D Tout d'abord, nous devons préparer l'environnement 3D pour la carte et également pour y inclure les pièces. Pour cela, nous devons attribuer deux propriétés d'emballage de cartes appelées perspective Nous devons le définir comme mille pixels par rapport à ce dont nous avons besoin pour la propriété de la carte appelée style de transformation, qui doit avoir une valeur. Préservez la 3D. Nous utilisons cette propriété car nous devons également préparer un environnement 3D pour les éléments de la voiture destinés aux enfants. heure actuelle, comme pour la face avant, nous devons également commencer par la face arrière Tout d'abord, rendons le verso visible pour cela, allons dans le fichier index.html et supprimons l' attribut masqué Revenez ensuite au fichier style.css. Maintenant, je vais faire pivoter la carte de cent 80 degrés. Pour cela, nous devons utiliser Transform. Faites ensuite pivoter par une parenthèse intérieure. Nous devons insérer 180 degrés. En fait, comme vous le voyez, face avant est toujours visible et nous n'en avons pas besoin. Et pour le masquer, nous devons utiliser une propriété appelée visibilité du blackface Nous devons lui attribuer une valeur appelée cachée. Comme vous le voyez, le logo a subi une rotation et nous devons y remédier. Pour cela, sélectionnons le verso de la carte. Et on lui a attribué une transformation rotative y avec la valeur de cent 80 degrés. Très bien, après cela, occupons-nous de la position du logo. Je veux placer. Il est parfaitement au centre pour cela. Tout d'abord, rendons sa position absolue. Puis afin de définir sa position en fonction de son élément parent, qui est dans ce cas une carte. Nous devons attribuer à la position relative. Définissez ensuite les propriétés du haut et de la gauche pour le dos de la voiture. Et mettez-les tous les deux à zéro. Très bien, donc afin de centrer parfaitement le logo, utilisons à nouveau Flexbox. Écrivons Display Flex. Ensuite, nous devons justifier le centre du contenu et également aligner les éléments au centre. Comme je le vois, le logo n'est pas centré et cela se produit parce que nous n'avons pas défini la largeur et la hauteur du dos Je ne vais pas le définir séparément pour la face arrière. Montons et ajoutons ici juste après le recto de la carte. Un autre sélecteur a rappelé. Ensuite, en bas, sélectionnez Card Front. Parce que ces deux cellules appartiennent uniquement à la face avant. Alors saisissons-les et collons-les ici. Maintenant, tout va bien. Très bien, définissons d'abord la taille d' une image à partir du CSS, passons au fichier index.html et supprimons l'attribut width Sélectionnez ensuite bec, IMG et définissez sa largeur sur 40 %. OK, maintenant il est temps de faire fonctionner le coton pour commencer, retournons-le. Supprime cette ligne de code à partir d'ici. Je veux qu'on fasse pivoter la voiture quand on la survole. Nous allons donc sélectionner l' emballage des cartes avec le pointeur de la souris. Sélectionnez ensuite la carte et attribuez-lui, transformez la rotation en y avec la valeur 180 degrés. Pour un effet fluide, utilisons la transition avec les valeurs transformées en 1 s. Maintenant, si nous survolons le pointeur, nous obtiendrons très bel effet de rotation 3D D'accord ? En fait, nous avons presque terminé. La seule chose que je veux faire est de créer un effet d'ombre. Et je veux aussi faire des courbes, légèrement arrondies. Attribuons à la boîte à cartes une ombre avec les valeurs 0,15 pixels, 60 pixels, la couleur RGBA 000 et l'opacité Ensuite, pour faire un arrondi, attribuons-lui un rayon de bordure d'une valeur de 15 pixels. Comme vous le voyez pour l' instant, il semble que la face avant n'ait pas le rayon de bordure Et pour résoudre ce problème, héritons du recto et du verso, ici, border-radius avec la valeur OK, maintenant tout semble parfait et nous avons fini de travailler sur ce projet 28. Projet 25 - Carte 3D: Dans cette vidéo, nous allons créer une carte avec jolis effets 3D à l'aide de transformations et de transitions CSS. Ce petit projet sera construit sur la base du HTML et du CSS purs. Ainsi, après avoir regardé cette vidéo, vous serez en mesure de créer jolis effets 3D en utilisant uniquement du CSS pur. Très bien, nous avons donc notre carte. Il se compose de deux parties principales. Nous avons le cadre et le contenu. Ils sont placés dans un espace 3D. Je veux dire, ils sont tournés dans des directions opposées. Et si nous survolons la carte, ces pièces seront pivotées vers l'arrière et placées ensemble D'accord, c'est donc ça, ce que nous allons créer dans le code VS. J'ai deux fichiers différents pour HTML et CSS. Dans les éléments principaux, j'ai deux liens, l'un pour les polices Google et le second pour le fichier CSS de style. Très bien, commençons à créer du balisage HTML, ouvrir le développement et à lui attribuer une classe de wrapper de cartes Ensuite, à l'intérieur, s'ouvrent d'autres développements qui seront la carte elle-même. Ensuite, nous avons besoin d'un autre div pour le cadre. On lui a donc attribué le cadre de classe. Ensuite, nous devons créer du contenu. Ouvrez donc à nouveau les développements avec le contenu de ClassName. Enfin, nous devons insérer les éléments de titre H1 du contenu intérieur, dont vous avez le titre du nom de classe Il sera composé de deux mots différents. Ils doivent avoir des styles différents. Je vais donc encapsuler le premier élément pi span. Ouvrons-le et instituons des textes en 3D. Ensuite, nous avons besoin d'un deuxième mot, effet. D'accord, c'est tout à propos du HTML. Ouvrons le fichier style.css et commençons à écrire quelques styles. Je vais d'abord supprimer la marge et le rembourrage par défaut de chaque élément Sélectionnez-les donc à l'aide d'un astérisque et définissez marge comme zéro et le remplissage comme zéro Ensuite, nous devons sélectionner l'emballage de la carte. Je vais placer Called Perfectly au centre de la page. Pour cela, définissons d'abord la largeur et la hauteur de l'enveloppe Je vais régler avec une hauteur S4 à 100 %. Je veux le définir à cent pour cent de la fenêtre d'affichage. Nous devons donc lui attribuer 100 vh. Ensuite, utilisez flexbox pour envoyer parfaitement à l'élément, nous avons besoin des propriétés et valeurs suivantes . L'écran est flexible. Ensuite, pour centrer les éléments horizontalement, nous devons justifier le centre du contenu. Et pour le centrage vertical, nous avons besoin d'aligner les éléments. Centre. Comme vous pouvez le voir, le contenu est placé dans le sens suivant OK, maintenant nous devons nous occuper de la carte elle-même. Tout d'abord, je vais préparer l'environnement 3D. Pour cela, nous devons utiliser l'une de ces propriétés CSS appelée perspective. Sélectionnons la carte et insérons votre perspective avec une valeur de 800 pixels. La perspective nous permet de définir la distance entre l' élément et l'utilisateur. Très bien, ensuite, je vais sélectionner le cadre. Définissons la frontière. Chaque valeur est associée à dix pixels fixes et à la couleur 333. Et je veux aussi arrondir légèrement son coin en utilisant rayon de bordure avec la valeur cinq pics Très bien, la bordure est prête et pour l'instant, voyons le cadre. Ensuite, je vais commencer à travailler sur le contenu. Nous allons donc le sélectionner. Définissez sa largeur et sa hauteur. Je vais définir la largeur à 400 pixels. En ce qui concerne la hauteur. Définissons-le à 200 pixels. Changez ensuite la couleur d'arrière-plan. Je vais utiliser la valeur RGBA ici, 255-20-1205 Ensuite, je vais placer le titre au centre du contenu pour cela. Voyons à nouveau, Flexbox. Je vais récupérer ces propriétés à partir d'ici et les coller pour le contenu. OK, comme vous pouvez le voir, le titre est placé au centre, et maintenant je vais le personnaliser. Sélectionnez donc les éléments H1. D'abord. Je vais changer de famille de polices. Utilisons votre police appelée Cancer Rael, San Serif. Transformez ensuite le texte en majuscules à l'aide du texte, transformez en majuscules et changez de couleur Utilisez votre couleur 333 Très bien, ensuite, je vais sélectionner l'élément span, qui encapsule en fait le premier mot du titre Donc, le titre droit, la plage, assigné à sa couleur de fond, et utilisez votre couleur 333. Et changez également la couleur du texte, rendez-le blanc. Très bien, nos éléments sont donc personnalisés et il est temps de commencer à créer des effets 3D Comme vous vous en souvenez, par défaut, le cadre et le contenu sont pivotés. Faisons donc pivoter la première image, nous devons la faire pivoter selon l'axe Y. Écrivons donc ici une transformation qui utilise Rotate Y et instaure -40 degrés. Comme vous pouvez le constater, le cadre pivote, tout comme le contenu , car il s'agit des éléments enfants du cadre En fait, nous devons faire pivoter le contenu mais dans la direction opposée. Et nous devons également le faire pivoter selon y et également selon l'axe X. Nous devons donc vous écrire transformer, puis faire pivoter y avec une valeur de 60 degrés. Ensuite, nous devons faire pivoter x avec une valeur de 20 degrés. Comme vous pouvez le voir, le contenu est pivoté mais pas dans l'espace 3D car dans ce cas, perspective n' a aucun effet sur le contenu La raison en est que la perspective est définie par rapport à carte et que le contenu n'est pas directement lié à la voiture. Ainsi, pour appliquer l' environnement 3D au contenu, nous devons utiliser une autre propriété appelée style de transformation. Nous devons l'attribuer au cadre, qui est le parent du contenu. Et nous devons le définir comme Preserve 3D. Nous avons donc maintenant les résultats nécessaires. La constante pivote dans l'espace 3D. OK, il est maintenant temps de créer un effet de survol sur survol. Nous devons attribuer à la fois des positions par défaut au cadre et au contenu. Nous allons donc sélectionner une carte avec le pointeur de la souris. Sélectionnez ensuite le cadre et passez ici, Transform, Rotate Y avec la valeur zéro. Ensuite, sélectionnez le contenu, à droite, encore une fois, survolez le contenu de la carte Nous devons réussir votre transformation. À nouveau, faites pivoter y avec zéro, puis faites pivoter x avec la valeur zéro. Alors maintenant, si nous survolons, les éléments seront pivotés mais sans aucun effet car nous avons besoin d' une transition pour faire tourner les rotations Attribuons donc à une transition d'image les valeurs « all et « 0,4 s ». Récupérez ensuite cette ligne de code et collez-la également pour le contenu. Maintenant, si nous survolons à nouveau , nous obtiendrons un bel effet 3D La dernière chose que je veux faire est d'arrondir légèrement les coins du contenu, puis nous le retirerons lorsque nous passerons la souris sur la carte Attribuons donc deux contenus au rayon avec une valeur de cinq pixels. Et puis en bas, insérez le radius de bordure avec la valeur zéro. Très bien, donc si nous survolons la carte, tout fonctionnera parfaitement 29. Projet 26 - Case CSS personnalisée: Bonjour et bienvenue sur notre prochaine vidéo YouTube. Dans ce tutoriel, nous allons créer une case à cocher CSS personnalisée Dans la plupart des cas, vous pouvez rencontrer des cases à cocher par défaut sur différents sites Web Mais après avoir regardé cette vidéo, vous serez en mesure de créer une case à cocher vraiment sympa et moderne Ici, comme vous pouvez le voir, nous avons une case et si je clique dessus, elle sera cochée avec de jolis effets. L'objet de ce didacticiel est de créer uniquement cette case à cocher personnalisée C'est pourquoi je n'ai pas d'autre contenu ici. J'ai également décidé de créer une case à cocher de grande taille pour une meilleure visibilité Mais bien sûr, vous pouvez le réduire pour vos propres projets. Très bien, allons-y et commençons à construire ce petit projet. Dans le code VS. J'ai deux fichiers différents, index.html et style.css. Dans le fichier index.html, j'ai préparé une structure de base de document HTML. J'ai lié ici des fichiers HTML et CSS. Allons-y et commençons à créer du balisage HTML. Ouvrons le développement. Ce devrait être un emballage pour la case à cocher. Attribuons-lui donc un wrapper de case à cocher de classe. Dans le cadre de ce développement, nous devons intégrer deux éléments, l' entrée et l'étiquette. Ouvrons donc les éléments d'entrée. Faisons en sorte qu'il s'agisse d'une boîte de discussion. Créez ensuite une étiquette. Ensuite, nous devons lier les éléments d'étiquette et de saisie afin de créer un événement de clic. Pour cela, nous devons attribuer à un attribut d'ID d'entrée. Et les valeurs de id et quatre attributs doivent être identiques. Passons ton chèque. Puis affecté à l' attribut id de l'élément d'entrée avec une vérification de valeur. Maintenant, afin de démontrer que les éléments d'étiquette et d'entrée sont liés, je vais vous transmettre du contenu, disons vérifier. Donc, si je clique sur ce mot , la case sera cochée. Voyons donc ce que nous pouvons accomplir en identification et de quatre attributs et ce que nous faisons chaque semaine, ce qui nous aidera à créer une cuvette propre Débarrassons-nous de ce mot à partir d'ici. La dernière chose que je veux faire dans le document HTML est attribuer à l'étiquette le nom de la classe, une coche Très bien, allons dans le fichier style.css et commençons à écrire quelques styles Nous n'avons pas ici beaucoup d'éléments HTML, mais de toute façon, je vais créer des styles de réinitialisation. Sélectionnons chaque élément à l'aide d'un astérisque. Ensuite, définissez la marge et le rembourrage sur zéro. Sélectionnez ensuite l'emballage des cases à cocher. En fait, je vais placer la chatbox parfaitement au centre de la page Pour cela, je vais utiliser l'une des techniques. Je veux dire, centrer les éléments à l' aide de positions et de transformations Nous devons donc écrire ici position, absolue. Ensuite, nous devons définir propriétés supérieure et gauche à 50 %. Ensuite, afin de centrer parfaitement l'élément, nous devons utiliser transform translate. Nous devrions avoir deux valeurs, -50 % et à nouveau -50 % Bien, comme vous pouvez le voir, la case à cocher est maintenant parfaitement centrée sur la page En fait, je ne vais pas personnaliser cette case à cocher. Finalement, il devrait être caché. Nous allons créer une boîte à l'aide d'un élément d'étiquette. Cet élément de saisie nous aidera simplement à créer un événement de clic. Allons-y et sélectionnons l'étiquette cochant le nom de la classe Comme vous le savez en général, l'élément d'étiquette est un élément intégré Et si nous voulons d'abord appliquer la largeur et la hauteur d' un élément en ligne , nous devons le transformer en bloc intégré ou en élément au niveau du bloc. Nous allons donc écrire que vous affichez le bloc. Définissez ensuite la largeur et la hauteur sur deux pixels. Et changez également la couleur de fond. Faisons en sorte qu'il soit gris clair en utilisant D, D, D. Comme vous pouvez le voir, nous avons ici un encadré dont les coins légèrement arrondis en utilisant le rayon de bordure Avec une valeur de dix pics. C'est bon, ça y est, la boîte est créée et nous devons maintenant nous occuper du signe des coches Dans un premier temps, créons-le à l'aide du pseudo-élément After. Ensuite, nous nous occuperons de l'événement Click. Cochons donc la case avec les pseudo-éléments après. Tout d'abord, je vais changer l'arrière-plan des éléments d' étiquette que je suis en train de faire pendant un certain temps Finalement, nous allons changer la couleur de fond au clic. Changeons donc la couleur d'arrière-plan de l'étiquette ici, 08b b68 Commençons ensuite à travailler sur pseudo-éléments en tant que contenu défini pour la première fois et rendons-le vide En fait, le signe de coche doit être créé par des bordures Dans un premier temps, définissons une position comme absolue. Et pour positionner les éléments en fonction de son élément parent, nous devons attribuer à sa position parent une position relative. Définissons ensuite la largeur et la hauteur. Définissez la largeur comme étant de 25 pixels. Quant à la hauteur, attribuons-lui 45 pixels. Maintenant, pour rendre les éléments visibles et pour créer un signe de coche, utilisons des bordures Je vais définir les limites de deux sites différents, pour les droits et pour la bouteille. Écrivons donc ici la bordure, à droite, et attribuons des valeurs de vérité, cinq pixels, en continu et la couleur blanche. Cela duplique cette ligne de code et passe directement en bas. Comme vous pouvez le constater, l' élément est réalisable, mais en tant qu'invité, nous devons veiller à sa position. Nous allons le placer au centre et nous devons également le faire pivoter pour qu'il ressemble à un signe de coche Définissons donc la première position comme 40 %. Ensuite, il nous faut laisser 50 %. Ensuite, utilisez à nouveau la transformation, traduisez avec des valeurs de -50 %. Et encore une fois -50 %. D'accord ? Il ne vous reste plus qu'à faire pivoter les éléments selon l'axe Z. Ensuite, nous aurons besoin d'un résultat. Écrivons donc faire pivoter Z et insérons ici de deux degrés. Vous pouvez maintenant voir que nous avons ici des coches, et maintenant il est temps de le faire fonctionner Tout d'abord, changeons la couleur de fond de la clique. Pour cela, revenons ici. Couleur d'arrière-plan précédente, gris clair. Ensuite, pour créer un événement de clic, je vais utiliser une pseudo-classe appelée checked Cela nous permet de définir des styles et de les appliquer à l'élément lorsque la case est cochée Alors sélectionnons l' élément d'entrée avec l'ID, vérifions. Ajoutez ensuite ici la pseudo-classe appelée checked. Ensuite, nous devons sélectionner les éléments de l'étiquette. Comme vous le savez, il est placé juste après les éléments d'entrée dans le fichier index.html. Et pour sélectionner l'étiquette, je vais utiliser l'un des combinateurs CSS appelé sélecteur général des frères et sœurs, qui est exprimé par le signe till Et maintenant, nous avons besoin du nom de classe des éléments, non ? Coche Passons votre couleur de fond avec la valeur 0868. D'accord, donc si je clique sur la case, couleur d'arrière-plan sera modifiée. Faisons en sorte que cela affecte le moteur en utilisant la transition. Attribuons les valeurs de vérité, arrière-plan, la couleur et la durée, 0,4 s. Maintenant cela semble bien mieux et il est temps de travailler sur le signe des coches Par défaut, je vais le masquer. Faisons-le en utilisant l' opacité zéro. Et maintenant, nous devons l'afficher. Lorsque nous cochons la case, nous allons le faire en utilisant la même technique que celle que nous avons utilisée il y a à peine une minute Alors saisissons-le, sélectionnez-le ici. Ajoutez ensuite les pseudo-éléments après car nous devrions afficher un signe de coche Et maintenant, insérez votre opacité. Et utilisez également la transition pour affecter le moteur à tout cela et 0,4 s. Donc maintenant, si je clique, tout fonctionnera correctement. Et en fait, nous avons déjà ici de beaux effets. La case à cocher fonctionne. Avant de terminer ce tutoriel, je voudrais ajouter aux carnets de chèques quelques autres faits. Par défaut, je vais agrandir le signe des coches. Et puis sur clic, nous lui donnerons sa taille par défaut. Et cela finira par paraître très beau. Allons-y et ajoutons à la transformation fonction de propriété appelée scale, qui nous permet de gérer la taille d'un élément non sécurisé dix Cela signifie donc que nous venons de créer des éléments dix fois plus grands qu'auparavant. Et maintenant, en cliquant, nous avons dû le réduire à nouveau. Je vais donc récupérer cette ligne de code complète. Nous avons besoin de toutes ces fonctions car si nous utilisons simplement Transform Scale, ces deux fonctions, je veux dire traduire et faire pivoter, seront remplacées et cela modifiera position du côté de la coche Changeons donc la valeur de l'échelle, faisons-en une. Et maintenant, vous pouvez voir que nous avons ici un très bel effet. OK, nous avons presque terminé. La seule chose que nous devons faire est masquer les éléments d'entrée. Et je vais le faire en utilisant l' attribut HTML appelé hidden. Assignons-le donc aux éléments d'entrée. Très bien, maintenant c'est terminé. Tout fonctionne parfaitement et notre petit projet est terminé 30. Projet 27 - Hamburger Menu: Dans cette vidéo, nous allons créer le menu des hamburgers avec de jolis effets Ce projet sera construit sur la base du HTML, CSS et d' un peu de JavaScript. Comme vous pouvez le voir, nous avons ici une page de destination avec une image de fond en plein écran Et dans le coin supérieur droit se trouve l'icône du menu hamburger Si je clique dessus, l'icône sera transformée en x. Et maintenant, une partie sera affichée du côté droit. Nous avons ici quelques éléments de navigation et si je les survole, nous obtiendrons de beaux effets de survol Dans cette vidéo, vous allez découvrir comment créer tout cela. Allons-y et commençons à construire notre projet. Dans le code VS. J'ai quelques fichiers pour HTML, CSS et JavaScript. Et nous avons également ici un dossier appelé images dans lequel nous avons une image pour l' arrière-plan de la page de prêt. Vous pouvez télécharger les fichiers de démarrage à partir du lien figurant dans la description. D'accord, allons-y et ouvrons le fichier index.html. J'ai préparé la structure de base du document HTML. À l'intérieur des éléments de tête, j'ai deux maillons. Une pour les polices Google, je vais utiliser une police appelée doses, et une autre pour le fichier CSS. En plus de cela, j' ai inséré ici balise de script afin de lier le fichier JavaScript. Très bien, commençons à créer du balisage HTML, à ouvrir des développements, qui seront un conteneur Il est donc affecté à sa classe conteneur. Ensuite, à l'intérieur du conteneur, je vais ouvrir des éléments qui envelopperont tout le contenu de la barre de navigation Attribuons-lui la classe navbar. Ensuite, à l'intérieur, je vais d' abord créer une icône de menu pour hamburgers Ouvrez donc le développement et attribuez-lui un nom de classe, un menu hamburger. Ensuite, à l'intérieur de ces éléments div, je vais insérer trois éléments div pour trois lignes d'une icône Attribuons à son nom de classe la ligne de style courante. Et nous avons également besoin ici d' un autre nom de cluster pour style individuel. Ligne 1 à droite. Dupliquez ensuite cette ligne deux fois et modifiez les noms des classes. Nous avons besoin de la ligne deux, de la ligne trois. D'accord, c'est tout à propos de l'icône du menu pour le moment, ce n'est pas faisable car nous n'avons que des éléments div vides sans aucun style Ensuite, je vais créer une navigation. Il sera représenté par des éléments UL. Attribuons-lui une classe, notamment. Insérez-y ensuite des éléments LI. Il doit contenir un élément de classe. Enfin, nous avons besoin de vos éléments de lien. Attribuons-lui le nom de la classe, le lien de navigation, et insérons également votre premier élément. Au total, je vais avoir sept éléments de navigation. Dupliquons-le six fois, puis modifions rapidement le contenu qui nous concerne. Cette nouvelle. La prochaine sera Gallery Than Events. Tarification. Et pour la dernière, insérez votre contenu. Très bien, c'est donc tout à propos du HTML. Il est temps de commencer à coiffer. Passons au fichier style.css. Dans un premier temps, je vais créer des styles de réinitialisation. Débarrassons-nous de la marge et du rembourrage par défaut de chaque élément Sélectionnez-les à l'aide d'un astérisque. Ensuite, passez votre marge zéro et votre marge intérieure zéro également. Ensuite, je vais changer la famille de police pour l'élément du corps. Nous allons donc le sélectionner. Et puis insérez ici les doses de la famille de polices, san-serif. Ensuite, prenons soin du conteneur. Définissez sa largeur et sa hauteur en tant que largeur. Écrivons ici à 100 %. En ce qui concerne la hauteur. Je vais le définir comme 100 % de la fenêtre d'affichage. Donc oui, 100 pH plutôt que comme fond. Je vais créer une image. Donc, le bon fond est celui dont nous avons besoin ici, un dégradé linéaire. Je vais utiliser trois couleurs différentes. Le premier sera le RGBA 000 et l'opacité 0,4. Ensuite, écrivons RGBA 14848, à nouveau 48 et l'opacité Ensuite, insérez RGBA 167-60-7607 et opacité 0,4. Ensuite, l'URL intérieure indique une partie des images l' image et sélectionnez l'image appelée bg point JPG comme position de l'arrière-plan. Nous avons besoin du Centre et aussi de passer ici, pas de répétition. Enfin, je vais utiliser la propriété de taille d'arrière-plan avec la valeur de couverture. Très bien, la page de destination est prête. Nous avons ici une image de fond en plein écran. Et maintenant, je vais prendre ici le menu des hamburgers Comme vous le savez, il se composera de trois lignes et devrait être placé dans le coin supérieur droit de la page Dans un premier temps, sélectionnons le développement rapide, qui comporte un ClassName, un menu hamburger Définissons sa largeur et sa hauteur. Je vais régler avec 35 pixels. Quant à la hauteur, attribuons-lui 30 pixels. Pour l'instant, l'icône n'est toujours pas visible. Et pour résoudre ce problème, attribuons-lui un arrière-plan temporaire, disons rouge. OK, alors maintenant l' icône qui s'affiche par défaut est placée dans le coin supérieur gauche. Mais comme je l' ai dit, je vais le placer en haut à droite de la page. Pour cela, définissons cette position comme étant fixe. Ensuite, nous avons besoin de la position supérieure, définie sur 50 pixels et la droite sur 50 pixels. Maintenant, je peux le déplacer dans le coin supérieur droit. Enfin, je vais changer de curseur. Mettons-le au clair. Très bien, pour l'instant avec l'élément div parent, nous avons terminé. Il est temps de travailler sur les lumières. Allons-y et sélectionnons-les en utilisant la ligne de nom de classe courante. Réglez ensuite sa largeur sur 100 %. Cela signifie que cette ligne occupera toute la largeur de son élément parent , soit 35 pixels. Ensuite, je vais définir la hauteur. Faisons-en trois pixels et changeons également la couleur d'arrière-plan. Tu vois ta couleur chocolat. D'accord, maintenant les lignes sont visibles, mais elles sont collées les unes aux autres et nous devons les séparer. Pour y parvenir, je vais utiliser Flexbox. Faisons un conteneur flexible pour le menu Hamburger. Pour cela, nous avons besoin de Display Flex. Changez ensuite la direction de flexion. Nous devons placer les lignes sous forme de colonne. Nous avons donc besoin d'une colonne à direction de flexion. Enfin, afin de libérer de l'espace entre eux, utilisez la fonction de justification des contenus. Les valeurs évoluent. OK, maintenant les lignes sont séparées et nous pouvons réellement nous débarrasser de ce fond rouge. Très bien, donc l'icône du menu est déjà créée et avant de la faire fonctionner, je vais personnaliser la barre de navigation Nous devons le placer du bon côté. Allons-y et sélectionnons l' élément de navigation avec le nom de classe navbar. Dans un premier temps, définissons sa largeur et sa hauteur. Je vais définir sa largeur à 300 pixels. Pour ce qui est de la hauteur, faisons-la à 100 %. Changez ensuite la couleur d'arrière-plan. Utilisons votre couleur 26262. OK, donc pour placer maintenant la barre sur le côté droit, définissons cette position comme fixe. Ensuite, mettez à zéro les propriétés du haut et de la droite. Très bien, la barre de navigation est donc positionnée de la bonne manière. Je vais maintenant m'occuper de la position des éléments de navigation. Je veux les placer parfaitement au centre de la barre de navigation. Et pour cela, utilisons Flexbox ici. L'écran est flexible. Que pour centrer les éléments horizontalement, utilisez justify-content Centre. S pour le centrage vertical Utilisez Alignez les objets, centrez. OK, les objets sont donc placés au centre. Et la dernière chose que je souhaite faire concernant barre de navigation est de personnaliser sa forme Et je vais le faire en utilisant le rayon de la frontière. En fait, cette propriété peut prendre quatre valeurs différentes correspondant aux quatre coins. Je suis dans le coin supérieur gauche, haut à droite, en bas à droite et en bas à gauche Nous sommes donc en mesure de définir un rayon de bordure différent, quatre colonnes différentes. Dans ce cas, je vais personnaliser les coins supérieur gauche et inférieur gauche. Quant aux autres coins, nous ne les toucherons pas. Donc, comme valeur du rayon de bordure du coin supérieur gauche, je vais insérer ici 20 %. Ensuite, comme nous l'avons dit, les coins supérieur droit et inférieur droit ne seront pas modifiés. Nous devons donc insérer deux fois des zéros ici. Et pour le coin inférieur gauche, je vais utiliser 60 %. Très bien, la forme de la barre de navigation est personnalisée et je vais maintenant styliser les éléments de navigation Allons-y et sélectionnons les éléments UL. Il porte le nom de la classe. Et pas des moindres. Je vais placer le texte sur le côté droit. Utilisons donc l'alignement droit du texte. Ensuite, sélectionnons les éléments LI. Il a un nom de classe, pas un élément. Débarrassons-nous d'abord des puces par défaut en utilisant le style de liste none. Créez ensuite de l'espace en utilisant la marge. 25 semaines. Très bien, nous devons maintenant sélectionner les éléments du lien, dont le nom de classe Nav Link Débarrassons-nous des styles par défaut. Utiliser la décoration de texte. Aucune. Ensuite, augmentez la taille de la police, faites-la 22 pixels. Changez de couleur. Vous voyez votre couleur E. De plus, je vais rendre la police plus claire en utilisant font-weight 300. Crée ensuite un espace entre les lettres à l'aide de l'espacement des lettres. Un pixel. Enfin, mettez le texte en majuscules à l'aide de la transformation de texte en majuscules. Très bien, c'est tout pour les éléments de navigation. Comme vous vous en souvenez dans le projet terminé, nous allons créer des effets de survol Lorsque vous passez la souris, nous devons afficher des lignes en haut et en bas des éléments. Il s'affichera avec une transition fluide. Et dans les directions opposées. En fait, nous allons créer ces lignes en utilisant des pseudo-éléments avant et après. Les deux auront des styles communs. Allons-y et sélectionnons les deux pseudo-éléments, droite, le lien de navigation avant. Dupliquez ensuite cette ligne et modifiez-la avant et après. Nous devons donc d'abord définir le contenu comme étant vide. Ensuite, je vais définir la largeur et la hauteur. Mettons-nous à 100 % avec nous. Ajustez ensuite la hauteur en pixels et modifiez également la couleur d'arrière-plan. Tu vois ta couleur chocolat. Pour l'instant, les lignes ne sont pas visibles car il s' agit d'éléments intégrés auxquels la largeur et la hauteur ne sont donc pas appliquées Ainsi, si nous définissons leur position comme absolue, puis si nous attribuons aux éléments parents qui n'est pas relative à la position du lien, les deux lignes seront affichées. En un coup d'œil Nous ne voyons ici qu'une seule ligne, mais en fait, les deux lignes sont placées côte à côte OK, ensuite je vais définir une position gauche pour les deux éléments comme zéro. Maintenant, les deux lignes prennent le même emplacement et pour les séparer, nous devons définir une position inférieure pour les pseudo-éléments suivants et nous devons la mettre à zéro. Copions donc ce sélecteur et attribuons-lui le zéro inférieur Maintenant, les deux lignes sont séparées. Comme vous le savez, par défaut, la première position est définie sur zéro. Donc, si nous ne le définissons pas manuellement, cela ne posera pas de problème. Quoi qu'il en soit, je vais le définir. Dupliquons donc ce code. Changez ensuite après en avant. Et au lieu d' en bas, à droite, en haut. Très bien, la dernière chose que nous voulons ici est de créer rembourrage car la ligne inférieure est trop proche de l'article Attribuons donc au remplissage des liens de navigation en haut et en bas droite trois pixels, puis zéro sur les côtés gauche et droit Très bien, c'est tout. Les lignes doivent maintenant créer un effet de survol Par défaut, je vais masquer ces lignes. Et lorsque nous survolons les éléments, ces lignes s'affichent de manière fluide dans les directions opposées Pour masquer les lignes, je vais utiliser Transform. Ensuite, échelle x. Nous devons le mettre à zéro. Alors maintenant, en survol, nous devons augmenter l' échelle et en faire une seule Allons-y et sélectionnons le lien de navigation avec le pointeur de la souris. Ajoutez ensuite ici avant. Dupliquez ce sélecteur et modifiez-le avant et après. Ensuite, insérez votre Transform, Scale x avec l'argument un. Enfin, afin de rendre l'effet plus intelligent, utilisons la transformation de transition de 0,5 s. Très bien, donc si nous survolons les éléments lignes s'afficheront Mais comme vous pouvez le voir, par défaut, ils commencent à apparaître à partir du centre. Cela se produit parce que la propriété d'origine de la transformation est définie comme capteur par défaut. Nous devons donc le modifier pour les deux lignes. Assignons après les pseudo-éléments l'origine de la transformation. Fais les choses correctement. Copiez ensuite ce code et collez-le avant les pseudo-éléments. Et au lieu de droite, insérons ici la gauche. Si nous survolons les éléments, tout fonctionnera parfaitement Nous avons ici un bel effet de survol. OK, donc avec la navigation, c'est terminé. Suivant. Ce que nous devons faire, c'est faire en sorte que le menu Hamburger fonctionne. Tout d'abord, je vais transformer l'icône du menu en x. Pour cela, nous devons changer la position première et de la troisième ligne. Quant au second, il doit être chauffé. Allons-y et sélectionnons la première ligne. Nous devons faire pivoter la ligne 1 de 45 degrés selon l'axe Z. Pour être plus précis, pour la première ligne, nous devons utiliser Rotate Z -45 degrés. Dupliquons ce code. Changez le nom de la classe à droite, ligne 3. Et débarrassez-vous également du signe moins à partir d'ici. Comme nous l'avons dit, nous devons masquer la deuxième ligne. Sélectionnons-le et utilisons votre opacité zéro. Comme vous pouvez le voir, les lignes sont pivotées, mais nous n'avons pas de x. Nous devons prendre soin de la position des lignes C'est pour ça. Je vais ajouter ici la traduction. Alors comme valeur de la direction x, non ? Moins huit pixels, S4, axe Y. Nous devons passer tes six semaines. Copions-le et collons-en quatre lignes trois Au lieu de six pixels, il nous faut ici juste moins six pics. Maintenant est considéré. Le problème est résolu et nous avons ici x. En fait, ce n'est pas l'état par défaut de l'icône. Nous devons le faire x lorsque nous cliquons dessus. Pour y parvenir, je vais utiliser un peu de JavaScript. Mais avant d'écrire du JavaScript, je vais ajouter deux lignes. Nouveau nom de classe, appelons-le changement. Ensuite, nous ajouterons cette barre de navigation de classe 2 en utilisant JavaScript. Et tout cela se produira lorsque nous cliquerons sur l'icône. Passons au fichier script.js et tout d'abord, créons une nouvelle variable, appelons-la icône du menu. Ensuite, sélectionnez les développements qui ont un menu hamburger avec nom de classe Pour cela, nous devons écrire des documents, des points, une requête, sélecteur et transmettre le menu hamburger du nom de votre classe Ensuite, attachez l'écouteur d'événements à l'icône du menu, à droite, l'icône du menu, au point, ajoutez un écouteur d'événements Comme premier argument, nous devons transmettre votre nom d'événements, qui est clique. Que nous devons transmettre votre fonction, qui sera une fonction en forme de flèche. Nous devons maintenant ajouter deux nouvelles classes qui sont modifiées en premier. Créons une nouvelle variable, appelons-la barre de navigation. Il doit être égal à documents, points, QuerySelector. Insérons la barre de navigation du nom de votre cluster. Ensuite, à l'intérieur de la fonction, de la droite, barre de navigation et d'une propriété plus simple appelée liste de classes Vous pensez peut-être que nous devons utiliser votre méthode d'ajout, mais dans ce cas, cela ne fonctionnera pas car lorsque nous cliquons sur l'icône, le changement de classe doit être ajouté à Napa Mais au clic suivant, il doit être supprimé. Et pour y parvenir, au lieu d'ajouter, nous devons utiliser la méthode appelée Toggle Insérons le changement de nom de votre classe. Donc, si nous cliquons sur l'icône, elle sera transformée en x. Et au clic suivant, elle retrouvera son état par défaut. Pour que cela affecte le moteur, revenons au fichier style.css et attribuons à la transition de ligne des valeurs de 0,8 s. Maintenant, un fait est devenu plus intelligent, mais je pense que nous pouvons le rendre encore plus agréable Au lieu de faire pivoter les lignes de 45 degrés seulement, nous pouvons les laisser faire une rotation complète, rotation de 360 degrés, puis une nouvelle rotation de 45 degrés. Donc, comme les valeurs que nous devons insérer ici, la somme de 360,45, soit finalement 405 degrés Alors maintenant, vous convenez que ça a l'air beaucoup mieux. Très bien, nous y sommes presque. L'autre chose à faire est de masquer suffisamment de ports par défaut, en l' affichant OnClick Pour cela, changeons la valeur de la bonne position et fixons-la à -300 pixels. Alors maintenant, la barre de navigation est masquée. Pour le déplacer de droite à gauche, je vais à nouveau utiliser le changement de classe. Attribuons-lui, à droite, avec la valeur zéro. Maintenant, si nous cliquons, Napa s' affichera, mais en tant qu'invité, pour rendre l'effet plus agréable, nous devons utiliser la transition avec les valeurs Plus de 0,8 s. Et aussi, je vais utiliser votre fonction appelée Cubic Bezier, qui nous permet de créer une transition personnalisée Dans ce cas, je souhaite que l'effet commence légèrement plus lentement et qu'il se termine plus rapidement. Pour cela, je vais vous transmettre vos valeurs 100,1. Nous pouvons donc maintenant dire que tout fonctionne parfaitement. Nous avons ici une barre de navigation agréable et moderne avec des effets sympas 31. Projet 28 - Cartes de tarification: Dans ce tutoriel, je vais vous montrer comment créer de belles cartes modernes avec des effets sympas. Comme vous pouvez le constater, nous avons ici trois cartes similaires avec des forfaits et des conditions différents. Si je les survole, l'échelle des chariots augmentera progressivement Ils vont devenir plus grands. Et aussi, si je réduis la taille du navigateur , les cartes seront encapsulées. Le projet sera donc réactif sur différentes tailles d'écran. Très bien. Donc, ici, dans le code VS, j'ai quelques fichiers pour HTML et CSS. Et nous avons aussi un dossier dans lequel j'ai une image. Dans le fichier index.html, j'ai créé la structure de base du document HTML. À l'intérieur de l'élément principal, nous avons quelques liens. La première concerne les polices Google. Je vais utiliser des polices appelées Joséphine Sans et Montserrat Ensuite, j'ai transmis ici un lien pour les icônes de Font Awesome. Et enfin, j'ai un lien pour le fichier style.css. D'accord, allons-y et commençons à créer du balisage HTML. Je vais créer des éléments div, qui seront un conteneur Il inclura l' intégralité du contenu. Attribuons-lui donc la classe container. Ensuite, nous avons besoin d'un autre élément div qui devrait être un emballage pour les cartes On lui a donc attribué un emballage de cartes nominatives de classe. Et maintenant, nous devons créer la carte elle-même. Ouvrons un autre développement avec la carte de nom de classe. En fait, la carte sera composée de trois parties principales. Nous aurons l'en-tête, le corps de la carte et le pied de page de la carte Insérons donc vos éléments div, qui devraient être un en-tête de carte Attribuons à sa classe un en-tête de carte. Il sera composé de deux éléments de titre. Dans un premier temps, nous allons décrire le type de package que nous avons. Je suis en version gratuite, standard ou premium. Quant au second, il devrait être pour le prix du forfait. Ouvrons donc l'élément de titre h3 et insérons vos textes gratuitement. Ensuite, nous avons besoin d' éléments de titre H1 avec des textes, dollar, un signe et un zéro OK, c'est tout à propos de l'en-tête de la carte. Ensuite, nous avons besoin d'un corps de carte. Cela représentera le type de fonctionnalités dont nous disposons dans le cas du package gratuit. Créons donc un développement et attribuons le corps de sa carte de nom de classe. Les fonctionnalités seront représentées par au moins. Il s'agit donc d'éléments UL ouverts. L'insérer LI. Nous aurons donc ici une police, des icônes géniales avec quelques textes. Dans le cas d'un forfait gratuit, seules deux fonctionnalités seront disponibles et les autres ne le seront pas. Ainsi, les deux premières fonctionnalités comporteront des icônes de vérification, et les autres devront avoir x égal. Ouvrons ici les éléments I et attribuons-leur la classe F, a, S, FA dash check. Cela a institué certains textes après la fermeture, tag. Certains contiennent du texte. Au total, je vais avoir six fonctionnalités. Dupliquons donc cette ligne cinq fois. Et puis la seule chose que nous avions à faire ici était de changer définitivement le nom des classes, pour les icônes de Font Awesome. Au lieu du chèque, nous devons ici écrire les heures. OK, donc c'est tout à propos du corps de la carte. Comme nous l'avons dit, nous devons également créer un pied de page en forme de carte. Il ne comportera qu'un seul bouton. Ouvrons donc les développements et attribuons-lui la classe filtre à glucides Ensuite, dans l' élément div, le bouton Créer, qui doit comporter le bouton de saisie et le texte d'abonnement OK, nous avons donc créé la première carte. Au total, nous en aurons trois. Allons-y et dupliquons la carte entière deux fois. Apportez ensuite quelques modifications. Au lieu de trois, nous avons besoin ici norme S pour le deuxième élément de titre au lieu de zéro, non ? Disons 49 et une barre oblique, puis ouvrons les éléments et instituez un mois. Donc, dans le cas d'un package standard, je vais proposer quatre fonctionnalités. Changeons donc les noms des classes ici. Nous devons vérifier au lieu de vérifier les heures. La deuxième carte est donc prête. Apportons quelques modifications pour le troisième, nous avons besoin ici de la prime supérieure à 99, prime supérieure à 99, élément Open Span et du mois d'insertion. Enfin, je vais rendre toutes les fonctionnalités disponibles. Donc, pour les quatre dernières fonctionnalités, nous avons besoin du nom de la classe. Vérifiez plutôt que parfois D' accord, c'est tout à propos du balisage HTML Nous avons créé des structures pour les trois cartes. Il est maintenant temps de commencer à les coiffer. Passons au fichier style.css et commençons par créer des styles de réinitialisation. Je vais sélectionner chaque élément à l'aide d'astérisques. Définissez ensuite la marge et le rembourrage sur zéro. Et utilisez également la propriété de taille de la boîte et attribuez-la à la propriété et attribuez-la à Très bien, donc le premier élément dont je veux m' occuper est son contenant Sélectionnons-le et définissons sa largeur et sa hauteur. Je vais définir la largeur comme 100 % de la hauteur de la barre S. Définissons-la à 100  % de l'élève et changeons également la couleur de fond. Attribuons-lui la couleur d, d, d. OK, après cela, je vais sélectionner l'emballage des cartes Je veux donc que l'emballage soit placé horizontalement au centre Et je vais aussi aligner les cartes dans une rangée. Pour ce faire, définissons d'abord la largeur comme 90 %. Ensuite, pour centrer l'emballage des cartes à l'intérieur du contenant, nous avons besoin d'une marge, de notre rangée Ensuite, définissons la hauteur et définissons-la à cent pour cent. Maintenant, je vais aligner les cartes horizontalement dans une rangée, et je veux aussi les placer verticalement au centre à l'aide de Flexbox Nous avons donc besoin ici de Display Flex. Maintenant, comme vous pouvez le voir, les cartes sont placées dans une rangée. Créons un espace entre eux. Et pour cela, utilisons le contenu de justification avec un espace de valeur autour de celui-ci. Enfin, pour leur envoyer verticalement, utilisez une ligne et définissez-la comme centre. Très bien, c'est tout pour l'alignement des cartes. Nous devons maintenant commencer à coiffer les cellules cartilagineuses. Allons-y et sélectionnons une carte. Défavorable. Réglons la largeur à 300 pixels. Ensuite, je vais changer d'arrière-plan. En fait, je veux définir une image comme arrière-plan. Tout d'abord, utilisons ici gradient linéaire et passons ici quelques valeurs RGBA Nous avons besoin d'une couleur noire avec une opacité de 0,5. Ensuite, transmettez à nouveau la valeur RGBA avec la même couleur noire, mais avec une opacité Ensuite, nous devons indiquer une partie de l'image. Donc Insight URL, c'est vrai, des images et sélectionnez Image par point JPG. Puis en tant que position de l' image à droite au centre. De plus, nous n'avons pas besoin de répéter ici. Enfin, utilisons la propriété de taille d'arrière-plan avec la valeur cover. Comme vous pouvez le voir, nous avons ici une image en arrière-plan de la carte, mais pour l'instant, le courant lui-même est vraiment moche. Ensuite, changeons la couleur du contenu afin de le rendre visible. Mettons-le en blanc. Ensuite, centrez simplement le texte à l'intérieur de la carte en utilisant le centre d'alignement du texte Très bien, passons au style des éléments individuels de la carte. La première partie que je souhaite styliser est l'en-tête de la carte, qui se compose de deux éléments de titre. Dans un premier temps, sélectionnons l'en-tête de la carte lui-même et créons de l'espace en bas en utilisant la marge inférieure d'une valeur de 40 pixels. Ensuite, je vais sélectionner les premiers éléments du titre. Nous devons donc écrire ici l'en-tête de la carte. Puis h3. Changeons la famille de polices. Je vais utiliser votre police appelée Josephine Sans. Sans-serif. Cela a augmenté la taille de police. Je vais le définir à 30 pixels. Et aussi, je vais alléger la police en utilisant font-weight avec une valeur Très bien, donc le premier titre semble déjà bon, mais je voudrais y ajouter d'autres styles Changeons sa couleur. Dans ce cas, je vais utiliser une couleur appelée chocolat. Créez ensuite un espace autour du titre. Utilisez une marge d'une valeur de 30 pixels. Ensuite, je souhaite créer une bordure en bas du titre. Pour cela, utilisons une bordure en bas. Ensuite, ici, les valeurs sont un pixel et la couleur blanche Comme vous pouvez le voir, nous avons ici une bordure en bas, mais je pense que c'est trop proche du titre. Et pour résoudre ce problème, utilisons simplement un rembourrage d' une valeur de dix pixels, avec une valeur de dix pics Très bien, c'est tout à propos du premier titre Elements. Allons-y et stylisons le second. Sélectionnez-le à droite dans l'en-tête de la carte, H1. En fait, pour H1, nous devons utiliser ces trois propriétés. Je vais donc les récupérer à partir d' ici, puis simplement modifier les valeurs. En tant que famille de polices, je vais utiliser Montserrat Définissez ensuite la taille de police à 60 pixels. En ce qui concerne l'épaisseur de la police, laissons-la telle quelle. Très bien, donc le deuxième élément de titre est stylisé, mais nous avons besoin de l'entendre pour apporter quelques modifications Je veux réduire le panneau de 1$, et je veux aussi le placer un peu plus haut. Pour ce faire, je vais utiliser une balise HTML appelée exposant Allons-y et encapsulons signes du dollar pour toutes les cartes à l'aide d'une étiquette exposant Donc, comme vous le voyez, le signe du dollar est placé un peu plus haut, mais il est trop grand. Diminons donc la taille de sa police. Sélectionnez l' en-tête de la carte et la soupe à droite, et définissez la taille de police à 35 pixels. Très bien, alors asseyons-nous à propos du signe du dollar. La seule chose que je veux faire à propos de cette partie est de réduire la taille des mathématiques car, comme vous pouvez le voir, elles sont beaucoup plus volumineuses. Comme vous vous en souvenez, nous avons un élément encapsulé ce mot par span. Allons-y et sélectionnons-le à droite, en-tête de carte, span. Ensuite, définissez la taille de la police et faites-la 18 pixels. Nous avons fini de travailler sur l'en-tête de la carte. Les deux titres sont stylisés et nous devons maintenant passer à autre chose et nous occuper du corps de la carte Dans le corps de la carte, vous trouverez des listes de fonctionnalités avec une police, icônes géniales et quelques textes. Allons-y, sélectionnons le corps de la première carte et créons de l'espace en bas en utilisant la marge inférieure de 60 pixels. Ensuite, je vais prendre ici les éléments LI, qui encapsulent en fait l'icône et le texte Alors sélectionnons-le, à droite, Baldry sculpté. I. Tout d'abord, éliminons les puces par défaut en utilisant le style de liste Aucune. Modifiez ensuite la famille de polices. Dans ce cas, je vais utiliser la police Josephine Sans san-serif plutôt que de définir une taille de police Et le poids de police droit est de 300. Très bien, les éléments de la liste semblent bons, mais nous avons besoin d'un peu d' espace entre eux. Et pour cela, je vais utiliser la marge. Faisons-le 50 pixels en haut et en bas et zéro sur les côtés gauche et droit. Avec les valeurs des textes, c'est terminé. Et maintenant, je veux personnaliser les likes. La première chose dont nous avons besoin ici est de créer un espace entre l'icône et le texte. Pour cela, sélectionnons des éléments appelés corps. J'utilise la marge, non ? 25 pixels. La prochaine chose que je veux faire est de changer la couleur des icônes. En cas de vérification, je souhaite utiliser la couleur verte. Quant à X égal, je vais les rendre rouges. Allons-y et sélectionnons le corps de la carte. Ensuite, F vérifie et définit sa couleur sur 06838. Dupliquons ce code. Changez le nom de la classe à plusieurs reprises au lieu de le vérifier, et modifiez également la valeur de la couleur ici, 911832 Très bien, comme vous pouvez le voir, la couleur des icônes a changé et en fait, avec le corps de la carte, c'est terminé Prochain invité, nous devons nous occuper du pied de page de la carte. Nous allons donc sélectionner le développement avec le pied de page de la carte nominative de classe. Et créez de l'espace en bas en utilisant la marge inférieure avec une valeur de 40 pixels. Ensuite, je vais personnaliser le bouton, alors sélectionnons-le. Nous avons besoin du bouton de bas de page de votre carte. Tout d'abord, définissons sa largeur à 120 pixels. Créez ensuite de l'espace à l'intérieur du bouton en utilisant le rembourrage pixels changent la couleur d'arrière-plan Je vais utiliser ta couleur chocolat. Et changez également la couleur du texte. Rends-le plus clair en utilisant la couleur d, d, d. OK, maintenant je vais prendre ici les textes à l'intérieur du bouton. Tout d'abord, changeons la famille de police. Je vais utiliser la police Montserrat, sans serif. Définissez ensuite sa taille de police, faites-la 12 pixels. Je vais rendre la police un peu plus audacieuse pour cela, avec la bonne épaisseur de police. Et réglez-le sur 600. Mettez également les textes en majuscules à l'aide de la transformation de texte en majuscules. Enfin, créez un espace entre les lettres en utilisant espacement des lettres d'une valeur d'un pixel. Très bien, c'est tout pour les textes. Nous avons besoin ici de quelques styles supplémentaires pour que le bouton soit beau. Modifiez la bordure par défaut et créons-en une personnalisée. Ici, deux pixels, pleins, de la couleur du chocolat. Arrondissez ensuite le bouton à l'aide du rayon de bordure. 50 pixels. Supprime les valeurs par défaut, outline, outline none. Et enfin, changez le type de grossier, indiquez-le. Très bien, comme vous pouvez le voir, le bouton est stylé. Je veux maintenant ajouter quelques styles à la carte elle-même. Je vais arrondir légèrement son coin. Et je veux aussi y ajouter un effet d'ombre. Allons-y donc et attribuons à la carte un rayon de bordure avec une valeur de dix pixels. Ensuite, utilisez Box Shadow. Insérez ici les valeurs 010 pixels, deux pixels, ainsi que la couleur RGB 000 et l'opacité 0,8 Bon, maintenant les chariots sont bien plus beaux. Ensuite, je vais créer un petit effet de survol. En survol. Je vais augmenter l'échelle des cartes et aussi modifier légèrement l'ombre de la boîte. Nous allons donc sélectionner la carte avec le pointeur de la souris. Insérez ensuite ici la transformation, la mise à l'échelle. Et comme argument dans la version 1.1 sévère. En fait, comme vous le savez par défaut, l'échelle des éléments est une. Ensuite, nous avons besoin d'une ombre carrée avec des valeurs de 0,15 pixels, 60 pixels et la couleur RGB Et aussi pour rendre l'effet plus fluide , utilisons la transition avec les valeurs toutes et 0,4 s. Donc, si je passe la souris sur la carte, sa taille augmentera progressivement De plus, l'ombre sera modifiée et dans l'ensemble, nous obtiendrons un bel effet, non ? En fait, c'est ça. Nous avons presque terminé ce projet. La seule chose que je souhaite faire est de rendre le projet réactif sur différentes tailles d'écran. Pour cela, inspectons la page puis changeons de mode réactif. Le point d'arrêt sur lequel nous devons apporter certaines modifications, je pense, est donc d'environ 1 200 pixels Parce que comme vous pouvez le voir sur la taille de l' écran, le projet se brise. Allons-y et créons une requête multimédia CSS. Pour cela, nous devons écrire à Sign Media. Ensuite, entre parenthèses, nous devons indiquer la largeur maximale. Comme nous l'avons dit, nous devons écrire ici 1 200 pixels. Et maintenant, dans une requête multimédia, nous devons créer des styles CSS, qui seront ensuite appliqués à ce point d'arrêt Sélectionnons le conteneur et définissons sa hauteur à cent pour cent. Ensuite, je veux emballer des cartes. Pour ça. Sélectionnons l' emballage des cartes et lui attribuons Flex Wrap avec Value Rab Enfin, nous avons besoin d' espace autour des cartes. Afin de bien les emballer. Je vais créer cet espace en utilisant la marge. Sélectionnez donc la carte et attribuez-lui une marge de 50 pixels. Très bien, donc si nous réduisons la page les cartes seront emballées Et à terme, le projet sera réactif sur des tailles d'écran plus petites 32. Projet 29 - CSS Toggle Button: Bonjour et bienvenue dans notre prochain tutoriel. Dans cette vidéo, nous allons créer une case à cocher animée en CSS, qui vous permettra de créer un effet de basculement. Comme vous pouvez le voir, nous avons ici notre case à cocher par défaut, nous avons ici un cercle sur le côté gauche avec un fond rouge Si nous cliquons dessus, le cercle se déplacera doucement vers la droite. Et la couleur d'arrière-plan sera également modifiée par rapport au rouge intégré. En plus de cela, vous pouvez remarquer ici un petit point placé au centre du cercle. Lorsque nous avons coché la case, ce petit point change également de couleur OK, c'est donc ce que nous allons faire. En fait, nous avons créé cette case de grande taille juste pour une meilleure visibilité En général, sur les sites Web modernes, vous trouverez des cases à cocher plus petites OK, allons-y et commençons à construire ce projet. Dans le code VS. J'ai deux fichiers différents, l'un pour le HTML et le second pour le CSS. Dans le fichier index.html. J'ai préparé la structure de base du document HTML. Dans les éléments de tête, j'ai transmis le lien vers le fichier style.css. Très bien, créons d'abord un développement ouvert de balisage HTML, qui encapsulera l'intégralité du contenu attribué à son conteneur de classe Ensuite, à l'intérieur du conteneur, nous devons créer deux éléments. premier sera un élément d'entrée avec une case à cocher de type Ensuite, nous devons créer une étiquette à l'intérieur de l' attribut, n'est-ce pas ? Vérifiez. Et également affecté à la bascule de classe. Enfin, nous devons insérer le développement dans l'étiquette. Ça va être un cercle. Alors attribuons-lui un cercle de classe. La dernière chose que nous devons faire dans le document HTML est de lier les entrées et l'étiquette. Pour ce faire, nous devons attribuer deux attributs d'ID d'entrée. Et il doit avoir exactement la même valeur que celle que nous avons transmise, pour attribute. Je veux dire vérifier. de bien voir de quoi je parle. Insérons dans le développement quelques textes. Disons clique. Donc, si nous cliquons sur ce texte , la boîte de discussion sera cochée automatiquement. Passons au fichier style.css et commençons à écrire du CSS. Dans un premier temps, je vais créer des styles de réinitialisation. Supprimons la marge et le rembourrage par défaut de chaque élément Pour sélectionner chaque élément, nous devons utiliser un astérisque Ensuite, passez votre marge zéro et votre marge intérieure zéro. Très bien, ensuite je vais placer le contenu parfaitement au centre. Pour cela, sélectionnons le conteneur Et pour commencer par définir la largeur et la hauteur, je vais définir la largeur à 100 %. Quant à la hauteur, je vais la définir à cent pour cent de la fenêtre d'affichage Changez ensuite la couleur d'arrière-plan. Vous voyez votre couleur E. Et maintenant, pour centrer le contenu, je vais utiliser Flexbox. Nous avons besoin ici de Display Flex. Ensuite, pour centrer l' élément horizontalement, nous avons besoin de justify-content Ensuite, alignez les éléments au centre afin de centrer les éléments en particulier. Très bien, comme vous pouvez le voir, la case à cocher est parfaitement placée au centre Je vais maintenant sélectionner l'étiquette. Mais avant cela, éliminons ce formulaire de texte ici. Revenez ensuite au fichier CSS et sélectionnez l' étiquette à l'aide de la bascule ClassName Définissons la largeur comme cent 50 pixels par rapport à la hauteur requise. Définissons-le à 50 pixels. Changez la couleur d'arrière-plan. Je vais utiliser votre couleur e24 848 et arrondir les éléments en utilisant un rayon de bordure de 50 pixels Très bien, donc la dernière chose que je veux faire avec l'étiquette est de créer un effet d'ombre Mais dans ce cas, je vais créer une ombre à l'intérieur des éléments. Pour cela, nous avons besoin de Box Shadow. Ensuite, comme première valeur, nous avons besoin ici de 02 pixels, dix pixels et la couleur 555. Très bien, maintenant tu es d'accord que ça a l'air bien mieux. Il est maintenant temps de créer le cercle. Sélectionnez donc l'élément div avec le cercle du nom de classe. Tout d'abord, définissons la largeur et la hauteur et définissons-les toutes deux à cinq pixels. En fait, nous les avons appliqués au début du cercle car en les utilisant, nous allons créer un peu. Au centre du cercle, S4, la partie blanche du Il doit être créé près de la frontière. Nous avons donc besoin ici d' une bordure avec les valeurs de 27 pixels, pleine et d'une colonne blanche. Pour tracer l'arrondi, utilisons le rayon de bordure avec une valeur de 50 %. D' accord, nous avons donc ici le cercle, mais pour l' instant il n'est pas placé de la bonne Nous devons prendre soin de sa position. Pour cela, je vais utiliser la position absolue. Ensuite, afin de gérer la position du cercle en fonction de son élément parent, qui est une étiquette, nous devons attribuer à l' étiquette position relative. OK, déplaçons ce cercle un peu haut et également vers la gauche. Nous devons donc définir les positions du haut et de la gauche comme suit : haut moins quatre pixels et gauche moins cinq semaines. Enfin, je vais créer un petit effet d'ombre, non ? Ombre de boîte avec des valeurs de 0,05 pixels. La couleur AAA. Très bien, voyons voir. Nous avons personnalisé notre case à cocher et il est maintenant temps de la faire fonctionner Pour cela, nous devons créer l'événement de clic. Vous pensez peut-être que pour cela, nous devrions utiliser JavaScript. Mais dans ce cas, je vais utiliser quelques astuces CSS qui nous permettront de créer l'événement de clic. Comme vous vous en souvenez, nous avons lié les entrées et les étiquettes à l'aide de l'identifiant et de quatre attributs. C'est ainsi que nous allons créer l'événement de clic. Nous devons définir certains styles CSS et les appliquer aux éléments lorsque la case est cochée Tout d'abord, nous devons sélectionner l'élément d'entrée. Il y a un contrôle d'identité. Ensuite, en CSS, nous avons une pseudo-classe appelée checked, qui nous permet de sélectionner la case à cocher en mode coché Nous devons maintenant accéder aux éléments que nous devons personnaliser. Dans ce cas, nous devons sélectionner le cercle, mais nous ne pouvons pas simplement écrire un cercle ici. Dans un premier temps, nous devons accéder à l'étiquette, qui est une sœur de l'entrée Pour sélectionner le frère des éléments d'entrée, nous devons utiliser l'un de ces combinateurs CSS appelé sélecteur général de frères et sœurs, qui est exprimé par Maintenant, nous avons besoin d'une étiquette, elle permet de basculer ClassName Enfin, nous avons besoin d'un cercle. OK, maintenant nous avons accès au cercle et tous les styles que nous allons vous transmettre si nous appliquons case à cocher Circle One seront cochés. Dans le cas d'un cercle, nous devons le déplacer de sa position actuelle vers le côté droit. Pour cela, utilisons la position gauche. Et d'abord, attribuons-y 100 %. Nous avons également besoin d'une transition pour un effet fluide , en lui affectant les valeurs gauche et 0,5 s. Voyons ce qui se passera si je clique ici pour que le cercle se déplace vers la droite. Mais ça finira trop loin. Pour obtenir les résultats souhaités, nous devons donc soustraire 200  % de la taille du cercle Calculons la taille du cercle. En fait, en taille du cercle, je veux dire le diamètre du cercle. Il a une largeur de cinq pixels et une bordure de 27 pixels. Mais nous devons garder à l'esprit que 27 pixels doivent être doublés car nous avons des côtés gauche et droit. Dans l'ensemble, la valeur doit donc être la somme de 27 pixels plus 27 pixels et plus cinq pixels. Il fait 59 pixels. Nous devons donc soustraire 200 %, soit 59 pics. Comme vous le voyez, nous avons ici différentes unités de mesure, pourcentages et pixels. En fait, cette opération n' est pas valide en CSS. Et pour la rendre valide, nous devons utiliser une fonction appelée calc, qui signifie calculer Cette opération est maintenant valide. Donc, si nous cliquons à nouveau, le cercle se déplacera et nous obtiendrons de bien meilleurs résultats. En un coup d'œil C'est le résultat que nous devions obtenir. Mais en fait, nous devons déplacer cercle un peu plus vers la droite. Pour être plus précis, nous devons le déplacer de cinq pixels. Parce que comme position par défaut, nous avons défini la gauche moins cinq pixels. Ainsi, au lieu de 59 pixels, nous avons besoin de 54 pixels. Et j'espère que cela a du sens pour vous. Donc, si nous cliquons, tout fonctionnera. Parfait Nous devons maintenant changer la couleur de l'étiquette. Nous devons le rendre vert. En fait, nous avons besoin que vous utilisiez la même technique. Dupliquons donc ce code. Nous devons changer la couleur d'arrière-plan de l'élément d'étiquette. Débarrassons-nous donc du cercle à partir d'ici. Supprimez ensuite également cette ligne de code, en utilisant une couleur d'arrière-plan sévère avec la valeur 3963 Enfin, nous avons également besoin d'une transition pour le label. Voici donc la transition avec les valeurs background, color et 0.5 s. Comme vous pouvez le voir maintenant, tout fonctionne bien et nous avons presque terminé. La seule chose que nous avons à faire est de masquer cette petite case à cocher. Pour cela, je vais accéder au fichier index.html et lui attribuer un attribut d'élément d'entrée appelé caché. Très bien, alors c'est ça. Notre projet est terminé. Nous avons créé une jolie case à cocher animée avec effet de bascule 33. Projet 30 - Galerie de grille CSS: Dans cette vidéo, nous allons créer une galerie réactive à l'aide d'une grille CSS. De nos jours, il est très populaire et je suis sûr que vous avez déjà rencontré de telles calories sur des sites Web modernes. Comme vous pouvez le constater, nous avons ici 12 images avec de petites lacunes. Et ces images sont alignées dans un espace bidimensionnel. C'est ça Ce que vous pouvez réaliser en utilisant la grille CSS. Il s'agit d'un module de mise en page CSS bidimensionnel. Comme nous l'avons dit, la galerie est réactive. Si nous réduisons la taille des navigateurs, les images se rétréciront bien et la galerie elle-même ne se cassera pas. Très bien, allons-y et commençons à créer ce projet que j'ai ici dans VS Code, quelques fichiers, index.html et style.css J'ai également un dossier appelé images, qui contient toutes les images que nous allons utiliser tout au long de ce projet. En fait, en guise de remarque rapide, je tiens à dire que nous allons créer ce projet dans Mozilla Firefox, car ce navigateur dispose d'un environnement de travail légèrement meilleur pour la grille CSS. C'est pourquoi j'ai lancé le projet dans ce navigateur. Très bien, donc dans le fichier index.html, j'ai préparé une structure HTML de base Comme vous pouvez le voir dans l'élément principal, nous avons un lien vers notre fichier CSS. Allons-y et commençons à créer notre galerie. Tout d'abord, je vais créer un balisage HTML. Ouvrons donc le développement. Ce devrait être un emballage pour l'ensemble de la galerie. Attribuons-lui donc la classe container. Ensuite, je vais ouvrir un autre développement qui va encapsuler toutes les images. Attribuons-lui une galerie de classes. Il est donc temps d' insérer vos images. Ouvrons les éléments IMG et indiquons le chemin de l'image. Nous avons des images de dossiers, puis nous devons sélectionner IMG, JPG à un point. Nous devons également attribuer quelques classes à l'élément d'image. Le premier sera composé de quatre styles courants, écrivez également IMG. Le second devrait être pour les styles individuels. Alors écrivez IMG Dash One. Très bien, donc comme nous l'avons dit, au total, nous allons avoir 12 images Je vais donc dupliquer cette ligne de code 11 fois. Et puis changez rapidement les noms des images ainsi que les noms des classes. D'accord ? Comme vous pouvez le voir, nous avons ici toutes les images, mais pour l'instant elles sont assez grandes. De plus, ils ont l'air moches parce que nous n'avons ici que du HTML pur. Il est donc temps de commencer à vous coiffer en conséquence. Passons au fichier style.css. Tout d'abord, je vais créer des styles de réinitialisation. Définissons la marge et le rembourrage tous les éléments à zéro Et en plus de cela, je vais définir la taille d'une boîte de bordure. Après cela, je vais m' occuper du conteneur. Allons-y donc et sélectionnons-le. Définissez ensuite la largeur et la hauteur. Configurons à 100 %. En ce qui concerne la hauteur. Je vais le définir comme étant 100  % du port de vue. Très bien, c'est tout pour le moment. En ce qui concerne le conteneur, je vais sélectionner une galerie qui regroupe toutes les images La galerie va être un conteneur en grille. En ce qui concerne les images, nous les transformerons en éléments de grille. Ainsi, pour que les éléments soient un conteneur de grille, nous devons leur attribuer une grille d'affichage. Nous devons maintenant définir les colonnes et les lignes de la grille. Pour ce faire, nous devons utiliser des propriétés appelées colonnes du modèle de grille et lignes du modèle de grille. Commençons par les colonnes. Utilisez ici les colonnes du modèle de grille de propriétés. En fait, en guise de remarque rapide, je tiens à dire que si vous n'êtes pas très à l' aise avec la grille CSS, je vous recommande de consulter notre camp d'entraînement CSS dans lequel nous avons expliqué ce module en détail. Nous construisons également l'ensemble du projet sur la base d'une grille CSS. Donc, si cela vous intéresse, vous pouvez trouver le lien de ce cours dans la description. D'accord ? Nous allons donc avoir huit colonnes similaires qui auront la même taille. Et pour cela, je veux utiliser une fonction appelée repeat. La fonction de répétition prend deux arguments. Dans un premier temps, nous devons indiquer le nombre de colonnes, huit. En ce qui concerne la seconde, nous devons indiquer la taille de chaque colonne. Dans ce cas, je vais utiliser une fonction appelée min-max. Cela nous permet de définir les valeurs minimales et maximales de chaque colonne. Donc comme valeur minimale, passons ici dix pixels. En ce qui concerne la valeur maximale, je vais utiliser une unité spéciale appelée unité fractionnaire, n'est-ce pas ? Un. Cela signifie donc que l'espace disponible sera divisé en huit parties événementielles. Et chaque colonne occupera une partie de l'espace disponible. Comme vous pouvez le constater, les images ont changé la mise en page. Nous sommes dans une situation un peu compliquée. Inspectons la page et ouvrons les outils de développement J'ai dit au début de ce tutoriel que Firefox dispose d'un très bon environnement de travail pour la grille CSS. Sur le côté droit, nous avons ici l' onglet Mise en page dans lequel vous pouvez trouver une section de la grille où se nos éléments div, qui est Galerie Si nous cochons cette case, GridLayout s'affichera Je veux dire, vous pouvez trouver les huit colonnes que nous venons créer et les numéros de ligne de grille appropriés. D'accord ? Ensuite, je vais m' occuper des rangées de la grille. Pour cela, je vais utiliser une propriété appelée grid template rows. Nous aurons donc quatre rangées. Chacun d'entre eux aura la même taille. Par conséquent, je vais utiliser à nouveau la fonction de répétition. Indiquons ici un certain nombre de rôles pour plus de précision, je vais utiliser ici un petit ajustement qui nous aidera à faire réagir la galerie Je vais donc faire en sorte que la taille de chaque ligne corresponde 10 % de la largeur de la fenêtre d'affichage Cela signifie qu'une fois que la largeur de la page sera diminuée , la taille des rôles sera diminuée en conséquence. Et à terme, nous obtiendrons une mise en page réactive. Pour mieux voir, passons au navigateur. Donc, si je réduis le navigateur la taille de la rose sera diminuée. Très bien, donc pour l'instant, les images sont assez grandes Et pour résoudre ce problème, sélectionnons les images avec le nom de classe courant IMG, puis définissons la largeur et la hauteur à cent pour cent. Les images sont désormais placées à l'intérieur des cellules de la grille. Ils sont également plus petits. Mais nous avons ici un léger problème. Si vous les regardez de plus près, vous constaterez que les images sont un peu étirées et qu'elles ne sont pas très belles. Pour résoudre ce problème, utilisons une propriété appelée pieds d'objet et attribuée à chaque couverture de valeur. Maintenant, ils ont l'air mieux. Ensuite, je souhaite créer un espace entre les cellules de la grille. Pour cela, nous devons attribuer à la galerie un écart dans la grille. Définissons-le à 16 pixels. Et changeons également la couleur de fond. Je vais utiliser ton appel ou zéro, j quatre moins zéro. Comme vous pouvez le voir, nous avons un certain espace entre les cellules de la grille et l' arrière-plan est également modifié. D'accord ? Nous devons maintenant aligner chaque image individuellement et elles finiront par occuper toute la galerie. Commençons donc par la première image. Je veux que tu occupes les deux premières colonnes et la première rangée. Sélectionnons-la donc avec le nom de classe individuel IMG. Définissez ensuite la propriété appelée colonne de grille. Cette propriété nous permet de définir le numéro de ligne de la colonne de départ ainsi que le numéro de fin. Comme nous l'avons dit, la première image occupera les deux premières colonnes et la première ligne. Par conséquent, nous avons besoin ici comme ligne de départ de numéro un, puis d'une barre oblique et de trois Et aussi, écrivons une ligne de grille avec les numéros de ligne 1.2. Comme vous pouvez le voir, la première image occupe deux premières colonnes et est placée dans la première rangée. La deuxième image occupera les trois colonnes suivantes et les deux premières lignes. Allons-y et copions le code de la première image. Modifiez ensuite le nom de la classe. Et aussi des valeurs pour la colonne et la ligne de la grille. Nous avons besoin d'une rangée de 3,6 S à quatre grilles, non ? 1.3. Très bien, nous avons ensuite la troisième image Je veux le laisser là où il est. Je veux dire, ça va rembourser toutes les dettes d'une cellule. Donc, pour la troisième image, nous avons besoin de la colonne de la grille 6,7 et du rôle de courage de la valeur 1,2. Ensuite, nous occuperons deux colonnes et deux lignes. Donc, pour la quatrième image, écrivons les lignes de la grille. Pour la colonne de la grille, nous avons besoin de 7.9. Ajouter pour la ligne 1.3 de la grille. Très bien, nous avons ensuite l'image numéro cinq. Je veux que vous occupiez également deux colonnes et deux rangées. Je veux dire deuxième et troisième rangées. Donc, pour la cinquième image, changeons les lignes de la grille de la manière suivante. Nous avons besoin ici de 1.3 comme ligne à quatre grilles, non ? 2.4. D'accord ? En fait, c'est ainsi que j'ai décidé d'aligner les images. Mais bien sûr, tu peux le faire toi-même. Vous pouvez utiliser plus ou moins d'images et créer la mise en page comme vous le souhaitez. Je sais que l'écriture du code pour la galerie est un peu répétitive et peut-être un peu inquiétante Mais c'est ainsi que cela fonctionne. Nous finirons par obtenir un bon résultat. Très bien, nous avons ensuite l'image numéro six. Je veux qu'il soit placé entre les troisième et quatrième colonnes. Quant à la rangée, elle occupera la troisième. Donc, pour les six MHz, écrivons les numéros de ligne pour la colonne de grille 3.5, ligne de grille S4, nous avons besoin de 3,4 Très bien, nous avons aligné six images. Il reste encore six images. Comme nous l'avons dit, l' écriture du code d'une telle mise en page est un peu routinière Je vais donc passer ici le code pour le reste des images et vous pourrez ensuite simplement le remplacer OK, j'espère que vous avez écrit le code pour les six autres images. Allons dans le navigateur et voyons à quoi ressemble notre galerie. Les images sont donc bien alignées et notre galerie s'affiche déjà bien, non ? En fait, je souhaite apporter quelques modifications ici. Comme vous le voyez, il y a un espace entre les images et je souhaite également créer un tel espace sur les bords de la galerie. Je veux dire, sur les quatre côtés, en haut, en bas, à gauche et à droite. Pour cela, je vais utiliser du rembourrage. Écrivons ici 16 pixels. La prochaine chose que je veux faire est de placer la galerie entière verticalement au centre. Pour cela, je vais utiliser Flexbox. Attribuons au conteneur une flexibilité d'affichage. Et pour centrer les éléments flexibles verticalement, nous devons aligner les éléments au centre. La galerie est donc centrée. Et la dernière chose que je veux faire est de créer un effet de survol Par défaut, je souhaite réduire l'opacité des images. Ensuite, nous l' augmenterons en survol. Attribuons donc à l' image une opacité de 0,7. Sélectionnez ensuite l'image avec pointeur de la souris et augmentez l' opacité ici, Enfin, utilisons la transition avec des valeurs opacité et 0,5 s. D'accord ? Comme vous pouvez le constater, nous avons ici un bel effet de survol. Et en fait, notre projet est terminé 34. Projet 31 - Page d'atterrissage avec formulaires modaux: Dans cette vidéo, nous allons créer une belle page de prêt en utilisant du HTML, CSS et un peu de JavaScript. Avant de commencer à travailler sur ce projet. Comme d'habitude, je vais le parcourir et le décrire rapidement. Comme vous pouvez le voir, nous avons ici un arrière-plan en plein écran. Au centre de la page, nous avions une bannière composée de titres et de paragraphes Et également dans le coin supérieur droit, se trouvent deux boutons différents. Si nous cliquons dessus, jolis formulaires s' afficheront sous forme de boîtes modèles. En fait, ces formulaires sont similaires. Il n'y a qu'une différence. Un formulaire est destiné à la connexion et le second à l'inscription. C'est bon, c'est ça. Ce que nous allons faire J'espère que ce sera intéressant et que ce projet vous plaira. Alors commençons. Sur le bureau. J'ai créé un dossier appelé formulaires modèles, dans lequel j'ai créé trois fichiers différents pour HTML, CSS et JavaScript. Voici également un dossier qui contient l'image de la page de destination. OK, allons-y et ouvrons ce dossier avec le code VS. Ensuite, je vais vérifier le fichier index.html. Comme vous pouvez le constater, nous avons ici la structure de base du document HTML. À l'intérieur de l'élément principal, nous avons deux éléments de liaison. Je veux dire, des liens vers les icônes Font Awesome, ainsi qu'un lien pour les polices Google. Tout au long de ce projet, je vais utiliser des polices appelées Josephine Sans et Montserrat Enfin, nous avons ici un lien vers nos styles CSS personnalisés. En fait, vous pouvez télécharger les fichiers de démarrage à partir du lien dans la description. OK, allons-y et exécutons ce fichier dans le navigateur. Je vais le faire en utilisant un serveur live. C'est une excellente extension du VS Code, vous pouvez donc la rechercher dans le gestionnaire d'extensions et installer ce package. Très bien, allons-y, plaçons l'éditeur et le navigateur côte à côte et commençons à créer un premier balisage HTML L'ensemble du contenu sera intégré au développement. Alors ouvrons-le. Et affecté au conteneur de noms de cluster. Le conteneur sera composé de trois parties différentes. un premier temps, nous aurons ici une bannière, qui comprendra un titre et un paragraphe. Ensuite, dans le coin supérieur droit, nous aurons des boutons pour la connexion et pour l'inscription Quant à la troisième partie, ce sera un conteneur complet dans lequel nous inclurons nos formulaires. Allons-y donc et ouvrons le développement. Et assigné à son nom de classe, le texte de la bannière. Et insérez-y des éléments de titre H1 avec du code texte et créez Ouvrez ensuite p éléments et insérez-y des textes. Disons d'apprendre à faire face. Très bien. Ensuite, nous devrions avoir ici les boutons. Ouvrons donc le développement, qui portera le nom de classe btn. Ensuite, insérez-le dans des pièces et des éléments. Je vais attribuer à chaque cluster un nom pour les styles courants, btn. Et nous avons également besoin ici d'une autre classe pour le style individuel. Appelons-le Login, btn sous forme de texte, je vais insérer votre identifiant En fait, nous avons également créé le même bouton pour vous inscrire. Dupliquons donc cette ligne de code et changeons le nom de classe dont nous avons besoin ici, inscrivez-vous btn. Et je vais aussi modifier le texte. Nous vous écrivons pour vous inscrire. Très bien, c'est tout pour les boutons. Ensuite, nous devons commencer à travailler sur les formulaires. Pour cela, je vais créer un autre développement. Il doit s'agir d'un conteneur de formulaires. Attribuons donc à chaque classe un nom de conteneur. Nous allons donc avoir ici deux parties différentes. La première sera pour une inscription. Ouvrons donc le développement et attribuons un nom de classe à l'inscription. Pour emballage. Ce cours sera réservé aux styles individuels. Nous en avons besoin ici d'un autre pour un style commun. Alors appelons-le modèle. Le modèle sera composé de deux éléments. Nous aurons le bouton X qui se fermera. Également. Je vais créer quelques titres. Ensuite, nous aurons plusieurs entrées avec des icônes Font, Awesome. Enfin, nous aurons un bouton. Très bien, allons-y et créons ces éléments, ouvrons le développement et attribuons-leur plusieurs noms de classe Le premier sera x btn, puis nous aurons besoin de nous inscrire x. À l'intérieur de ces éléments div. À l'intérieur de ces éléments div Je vais insérer l'une des entités HTML, à droite, au signe et à l' heure avec un point-virgule Comme vous pouvez le voir, nous avons ici x. Ensuite, nous aurons quelques rubriques Ouvrons donc un autre développement et attribuons-lui un nom de classe, un en-tête de formulaire. Ensuite, insérez des éléments de titre H1 avec du code texte et créez Ensuite, nous avons besoin ici d' un autre titre sera composé d'éléments de titre h3 Nous allons insérer votre texte. Joignez-vous à nous Très bien, il est maintenant temps de créer un élément de formulaire lui-même, qui inclura quelques entrées Ouvrons donc les éléments du formulaire et attribuons-les à eat className form L'élément de formulaire sera donc composé de trois groupes différents. Chacun d'eux inclura Font, Awesome, l'icône et l'élément de saisie. Créons donc un élément div et lui assignons une entrée de classe, un groupe Puis insérez-y des éléments I. La première icône va donc être pour le nom d'utilisateur. Attribuons à chaque nom de classe FAS, un utilisateur. Ensuite, nous avons besoin d'un élément d'entrée. Son type sera constitué de textes. Et nous avons également besoin ici d' un autre attribut appelé placeholder avec une valeur nom d'utilisateur Donc, comme nous l'avons dit, nous avons besoin de trois groupes d'entrées. Dupliquons-le deux fois, puis apportons quelques modifications. La deuxième entrée sera destinée au courrier électronique. Changeons donc le nom de classe des éléments d'IA. Nous avons besoin ici de F, a, F, d'une enveloppe. Changez ensuite le type d' entrées, faites-en un e-mail. Et comme valeur de l'espace réservé, nous devons insérer un e-mail OK, la troisième entrée sera pour un mot de passe. Changeons le nom de classe des éléments de l'IA. Nous avons besoin de votre clé FASFA. Modifiez ensuite le type des éléments d'entrée. Nous avons besoin du mot de passe et insérons également le mot de passe pour l' espace réservé. Très bien, voyons ce qui concerne les entrées. Le dernier élément que nous devons créer est un bouton. Alors ouvrons-le. Alors. Je vais définir l'attribut type comme un bas, puis insérer vos textes, m'inscrire. Très bien, nous avons donc créé les quatre premières inscriptions. Nous avons également besoin de la même chose pour la connexion. Dupliquons donc le wrapper du formulaire d' inscription, puis apportons quelques modifications Je vais changer le nom de la classe dont nous avons besoin ici pour nous connecter. Ensuite, nous devons changer le nom de classe x bottom. Nous devons nous reconnecter. Ensuite, au lieu de nous rejoindre, nous devons nous connecter. En cas de formulaire de connexion, nous n'avons pas du tout besoin d'un e-mail. Débarrassons-nous donc du deuxième groupe d'entrées. Et enfin, j'ai changé la valeur du fond. Nous avons besoin de vous connecter ici. Très bien, c'est tout à propos du balisage HTML. Maintenant, il est temps de commencer à écrire du CSS. Passons au fichier style.css. Tout d'abord, je vais créer des styles de réinitialisation. Débarrassons-nous de la marge et du rembourrage de chaque élément. Nous devons utiliser un astérisque pour sélectionner chaque élément. Passons ensuite à zéro vos marges et à votre marge intérieure. Ensuite, je vais sélectionner le conteneur. Définissons sa largeur et sa hauteur en tant que largeur. Je vais utiliser Hazard Present. Hauteur S4 Je veux définir la hauteur comme 100 % de la fenêtre d'affichage. Et pour cela, nous devons utiliser une unité de mesure relative appelée VH. Nous avons donc besoin de 100 vh. Ensuite, définissons l'image comme arrière-plan en plein écran. Je vais utiliser votre dégradé linéaire. Transmettez ensuite quelques valeurs RGBA. Le premier sera de couleur noire, non ? 000 avec opacité 0,6. En ce qui concerne la seconde, nous avons à nouveau besoin de la couleur noire RGBA, mais avec une opacité Ensuite, indiquons l'URL. Je veux dire une partie de l'image. Nous avons des images de dossiers puis une image appelée PG point JPG dont nous avons besoin de la position de l'arrière-plan comme centre. Et aussi pas de répétition. Enfin, utilisons la propriété de taille d' arrière-plan avec la valeur cover. Très bien, comme vous pouvez le voir, nous avons ici une image d' arrière-plan en plein écran Maintenant, je vais styliser la bannière et les boutons. Ensuite, nous nous occuperons du style des formulaires et nous les ferons fonctionner pour le moment. Afin de rendre le processus de travail plus pratique, je vais masquer l'intégralité du conteneur de formulaires pendant un certain temps Vous pouvez le faire en utilisant n'afficher aucun ou simplement en utilisant l'un des attributs HTML appelés hidden. Utilisons donc l'attribut Keaton et attribuons-le à la forme Container. Comme vous pouvez le constater, les deux formes sont masquées et nous n'avons ici que du texte de bannière et des boutons. Allons-y et commençons à styliser le texte de la bannière. Nous allons donc sélectionner les développements qui comportent des bannières contenant des noms de classe. Je vais m'occuper de la position de la bannière. Je veux qu'il soit placé au centre. Pour cela, je vais utiliser une technique utilisant des positions et des propriétés de transformation. Si vous avez regardé nos dernières vidéos, vous devriez déjà connaître cette technique. Mais si ce n'est pas le cas, je vais vous le montrer dans une seconde. Tout d'abord, nous devons définir la position comme absolue. Ensuite, nous devons prendre la première position, définie comme 40 pour cent et position gauche avec une valeur de 50 pour cent. Nous disons donc maintenant que les contrôles aux frontières se sont déplacés du haut vers le bas 40  % et de la gauche vers la droite de 50 %. Ce n'est pas ce que nous voulons. Pour placer les éléments centraux, nous devons le déplacer de 50 % par rapport à sa position actuelle vers le côté gauche et de 50 % vers le haut. Pour cela, nous devons utiliser Transform. Puis traduisez. Nous devons transmettre les valeurs suivantes. Nous avons besoin de -50 % , puis encore de -50 %. OK, donc avec la position du texte de la bannière, nous avons terminé. Nous avons maintenant deux titres de style et un paragraphe. Commençons par le titre. Sélectionnez-le à droite, textes des bannières, H1. Tout d'abord, changeons de couleur. Je vais le rendre blanc. Modifiez ensuite la famille de police. Utilisons votre police appelée Montserrat san-serif. Cette taille de police accrue. Je vais le définir à 80 pixels. De plus, je vais alléger la police en utilisant font-weight. Mettons-le à 300. Créez ensuite un espace entre les lettres. Utilisez un espacement entre les lettres avec une valeur de deux pixels. Enfin, je vais créer de l'espace en bas en utilisant la marge inférieure, deux pics. Très bien, c'est tout pour le cap. Je vais maintenant sélectionner le paragraphe. Donc, bon texte de bannière p. En fait, nous avons besoin ici de propriétés presque similaires à celles que nous utilisons pour le titre. Je vais donc les copier. Collons-le ici et apportons quelques modifications en tant que couleur. Utilisons e. Alors. Je vais changer la famille de police au lieu de Montserrat ici, Joséphine Sans Cela diminue la taille de la police, faites-en 40 pixels. En tant qu'épaisseur de police, nous avons besoin de la même chose ici. Laissons donc les choses telles qu'elles sont. Ensuite, je vais réduire l' espace entre les lettres. Nous avons besoin d'un pixel. Enfin, au lieu de la marge inférieure, utilisons l'alignement du texte, Très bien, c'est tout pour la bannière. Je trouve que ça a l'air bien. Et maintenant je veux travailler sur les boutons. Tout d'abord, prenons soin de leurs positions. Je veux qu'ils soient placés en haut à droite. Pour cela, sélectionnons le développement, qui encapsule les deux boutons Il porte le nom de classe BTN. Faisons en sorte que sa position soit absolue. Définissez ensuite les 50 premiers pixels et les 60 pixels de droite. Comme vous pouvez le voir, les deux boutons sont placés dans le coin supérieur droit. Et maintenant je vais les coiffer. Tout d'abord, donnons aux deux boutons des styles communs. Comme vous vous en souvenez, ils ont une classe commune, BTN. Sélectionnons-le. Dans un premier temps, définissez la largeur à cent 70 pixels. Créez ensuite de l'espace à l'intérieur des boutons à l'aide d'un rembourrage. En haut et en bas, nous avons besoin de dix pixels, puis de 15 pixels sur les côtés gauche et droit. Créons ensuite un espace sur le côté droit des boutons en utilisant la marge droite de 20 pixels De plus, je veux les arrondir. Pour cela, utilisons le rayon de bordure et faisons en sorte qu'il soit de 50 pixels. Maintenant, occupons-nous des textes. Tout d'abord, modifiez la famille de police. Dans ce cas, je vais utiliser des téléphones appelés Joséphine Sans Serif. Ensuite, augmentez la taille de la police, faites-la 16 pixels. Créez un espace entre les lettres. Utilisez l'espacement des lettres. Un pixel. Supprime également la valeur par défaut, le contour, le contour, aucun et enfin, change le type de plus grossier. Faites-en un pointeur. C'est tout pour les styles courants. Maintenant, je vais donner des styles individuels aux deux boutons. Sélectionnons le premier en utilisant ClassName, Login, btn. Changez ensuite la couleur d'arrière-plan. Je vais utiliser votre couleur appelée tomate. Maintenant, je veux changer la couleur du texte. Et en fait, j'ai besoin de la même couleur pour les deux boutons. Je vais donc l'écrire dans des styles courants. Utilisons ta couleur blanche. Outre la couleur, je veux aussi la même bordure. Définissons donc la frontière. Deux pixels, en continu et en couleur, non ? Tomate Enfin, sélectionnez le deuxième bouton qui contient le nom de la classe, inscrivez-vous à btn et rendez sa couleur d' arrière-plan transparente Très bien, c'est tout à propos de cette disposition des boutons. Ensuite, je veux créer des effets de survol et de clic. En survol. Je veux le bouton pour déplacer Elizabeth vers le haut. C'est pour ça. Sélectionnons btn avec Harvard, puis définissons la transformation Nous devons traduire Y avec une valeur moins deux pixels. Et pour rendre l'effet plus intelligent, nous devons faire passer le transport 0,3 s. Si nous survolons les boutons, nous y arriverons Joli effet. Ensuite, comme nous l'avons dit, nous devons cliquer sur Effect. Pour cela, nous devons utiliser l'une de ces pseudo-classes appelée active Nous devons donc sélectionner BGN avec actif. Nous pouvons maintenant définir les styles que nous voulons que les boutons obtiennent lorsque nous cliquons dessus. Donc, comme vous le savez, lorsque vous passez la souris dessus, puis cliquez dessus, nous devons les replacer sur leurs anciennes positions Par conséquent, nous devons copier cette ligne de code et simplement modifier la valeur. Nous devons écrire zéro ici. Ainsi, lorsque nous cliquons, nous obtenons un bel effet de clic. Très bien, c'est tout pour la personnalisation des boutons. Il est maintenant temps de commencer à travailler dans les fermes. Donc, pour l'instant, le conteneur de formulaire est masqué. La première chose à faire est de le réafficher. Mais il n'est pas nécessaire d'afficher les deux formulaires en même temps. Je vais commencer par le premier formulaire d'inscription. Ensuite, le second formulaire sera automatiquement stylisé. Cela se produira parce que les deux entreprises partagent les mêmes catégories. Je vais donc masquer le formulaire de connexion pour cela. Attribuons à son attribut wrapper un attribut masqué. Revenez ensuite au fichier style.css. Je vais sélectionner les deux rappeurs de formulaires avec un modèle de classe commun Définissez ensuite la largeur comme étant de 400 pixels. Ensuite, je vais définir une image comme arrière-plan. Utilisons ici un gradient linéaire et passons ici quelques valeurs RGBA Le premier sera 148422, puis je vais passer à 42 et l'opacité de 0,8 S pour second sera 185-12-9129 et l'opacité de Sélectionnez ensuite l'image. Nous avons besoin ici d'un gros point JPG comme position, au centre droit plutôt que pas de répétition. Et nous avons également besoin d'une propriété de taille d' arrière-plan avec la valeur de couverture. D'accord ? Les formulaires doivent donc être placés au centre de la page. Je veux dire, ils doivent être parfaitement centrés. Pour cela, je vais utiliser la même technique que celle que nous avons utilisée pour la bannière. Définissons donc la position du modèle comme absolue. Que nous avons besoin des 50 % les plus élevés, à gauche, des 50 %. Et transformez, traduisez avec les valeurs -50 % et encore -50 %. Enfin, arrondissons légèrement les angles modaux en utilisant rayon de bordure d'une valeur de 20 pixels OK, donc pour l'instant, le formulaire semble vraiment horrible, mais nous allons le rendre plus beau dans un moment. Allons-y et commençons à styliser les éléments placés dans le modal. Je vais commencer par le schéma de fermeture en x. Nous allons donc le sélectionner. Nous avons besoin du nom de classe x BTM. Je vais le placer dans le coin supérieur droit de Modal. Pour cela, je vais utiliser la position absolue. Alors, bien régler ? En 20 pièces. Pour l'instant, comme vous pouvez le constater, le bouton est assez petit, alors prenons soin de cette taille de police accrue. Faites-le 50 pixels Je vais également changer la couleur. Utilisons ici appelé ou deux contre deux. Et enfin, changez-le de type plus grossier, faites-en un pointeur. OK, c'est tout à propos du bouton X. Nous devons maintenant nous occuper de ces éléments de titre. Sélectionnons leurs éléments parents, qui sont l'en-tête du formulaire. Je vais placer le texte au centre en utilisant le centre d' alignement du texte Créez ensuite de l'espace en haut et en bas de l' en-tête en utilisant la marge, droite, huit pixels, zéro, cent et 50 pixels. Et encore zéro. Et enfin, changez la couleur des deux titres, rendez-les blancs. Très bien, maintenant je vais sélectionner le premier titre pour cela. Nous devons écrire ici l'en-tête du formulaire H1. Changeons la famille de polices. Dans ce cas, je vais utiliser police Josephine Sans, san-serif Ensuite, je vais augmenter la taille de la police. Faisons-le à 40 pixels. Alors. Allégez les textes à l'aide de font-weight 300. Ensuite, créez de l'espace en bas du titre en utilisant les tiers inférieurs des pixels de la marge. Après les dettes, je vais sélectionner la deuxième rubrique. Donc, à droite, formez l'en-tête h3. Dans le cas de la deuxième rubrique, nous aurons besoin de propriétés presque similaires. Reprenons donc ces trois lignes de code. Collez-les pour le deuxième titre. Modifiez ensuite la famille de police. Nous avons besoin ici de plus de Surat. Ensuite, en ce qui concerne la taille de la police, à droite , 25 pixels, l'épaisseur de la police, nous n'avons pas besoin de la modifier, alors laissons-la telle quelle Et enfin, ajoutez du texte, transformez-le, en majuscules. Très bien, cela concerne les éléments de titre. Nous devons maintenant commencer à travailler sur les entrées. Dans un premier temps, sélectionnons les éléments du formulaire contenant le formulaire ClassName Je veux prendre soin de sa position. Et pour cela, je vais utiliser Flexbox. Donc, la bonne flexibilité de l'écran. Les éléments Flex sont placés horizontalement dans une rangée. Nous devons donc changer la direction de la flexion et la transformer en colonne. Ensuite, pour centrer les éléments, nous devons aligner les éléments, les centrer. Très bien, nous devons maintenant commencer à styliser ces entrées. Dans un premier temps, je vais sélectionner le groupe de saisie, qui regroupe les icônes Font, Awesome et les entrées Je souhaite créer de l'espace au bas de chaque groupe de saisie. Utilisons donc ici la marge inférieure avec une valeur de dix pixels. Après cela, sélectionnons l' entrée elle-même, n'est-ce pas ? Groupe d'entrée. Cette entrée. La largeur définie est de 250 pixels. Ensuite, je veux créer de l'espace à l'intérieur de l'entrée en utilisant le rembourrage En haut, à droite et en bas, nous avons besoin du même espace. Donc ici, 15 pixels, trois fois S pour le côté gauche, je vais créer un peu plus d'espace car nous finirons par placer vos icônes Font, Awesome. Donc juste ici, 50 pixels. Ensuite, je vais supprimer la bordure et le contour par défaut , aucune bordure droite. Et n'en décrivez aucun. Rendez également la saisie légèrement arrondie. Utilisation du rayon de bordure avec une valeur de 30 pixels. Ensuite, je vais modifier l'arrière-plan des entrées. Utilisons ici la valeur RGBA avec une couleur noire et avec six points d' opacité Très bien, après ça, je vais travailler sur le texte. Changeons donc la famille de polices. Je vais utiliser votre police appelée Josephine Sans. Sans empattement. Cela a augmenté la taille de police. Faites-le 16 pixels , puis changez de couleur. Vous voyez votre couleur di, di, di. D'accord, nous venons donc de commencer les éléments de saisie. Il est temps de passer à autre chose et de vous occuper des icônes de Font Awesome. Sélectionnons-les donc à l' aide du groupe d'entrées. I. Dans un premier temps, je veux gérer leurs positions. Comme nous l'avons dit, je vais les placer dans les éléments d'entrée. Pour cela, définissons leur position comme absolue. Et afin de les faire fonctionner en fonction de l'élément parent, qui dans ce cas est le groupe d'entrées Nous devons attribuer à l'élément parent une position relative. Définissez ensuite quatre éléments I, 13 pixels en haut et 17 pixels à gauche . Alors maintenant, comme vous pouvez le voir, ils sont placés dans les entrées. Augmentons simplement la taille de la police. Faites-le 18 pixels et changez de couleur. À utiliser ici. Très bien, donc avec les groupes de saisie, nous en avons fini avec l'air bien Et le seul élément dont nous voulons nous occuper à l'intérieur du formulaire est un bouton. Sélectionnons-le donc correctement pour le bouton. Tout d'abord, définissons les largeurs, soit 310 pixels. Créez ensuite de l'espace à l'intérieur du bouton à l'aide d'un rembourrage. Réglez-le sur 12 pixels, supprimez la bordure et le contour par défaut , n'est-ce pas ? Bordure aucune. Et n'en décrivez aucun. Ensuite, arrondissez le bouton. À utiliser ici, le rayon de bordure dont la valeur est exprimé en pixels. Après cela, je vais changer la couleur de fond de Batson Utilisons votre couleur pour le d8678. Nous devons également changer la couleur du texte. Faisons en sorte qu'il soit blanc. Ensuite, je vais travailler sur des textes. Je souhaite changer de famille de police. Utilisons ici Joséphine Sans. Serif. Augmentez également la taille de la police. Faites-le 16 pixels et transformez le texte en majuscules à l'aide du texte, transformez en majuscules D'accord, comme vous pouvez le voir, le bouton est presque stylé Ça a l'air bien, mais nous devons y ajouter quelques styles. Comme vous le voyez, nous avons besoin d' espace en bas. Et je vais également créer de l'espace en haut de celui-ci. Pour cela, nous devons utiliser la marge. En haut à droite, dix pixels c' est zéro, ces 50 pixels en bas et zéro. Créez ensuite une ombre. Utilisez box shadow avec les valeurs suivantes. Comme 50 pixels, 20 pixels. Et en tant que couleur RGBA droite, couleur noire postérieure avec une opacité Et enfin, plus grossièrement, pointez vers la droite, ce siège à propos de la personnalisation d'un ce siège à propos de la personnalisation d' La dernière chose que je souhaite faire est de créer des effets de survol et de clic, comme nous l'avons fait pour les boutons de connexion et d'inscription Sélectionnons donc le bouton avec Harvard dont nous avons besoin ici, Transform, Translate Y avec des arguments moins deux pixels. Et en plus de cela, je veux modifier légèrement l'ombre lorsque vous survolez. Donc, bonne ombre de boîte. Nous avons besoin ici de valeurs zéro, c'est-à-dire huit pixels, 25 pixels. Et comme droit de couleur, RGBA 000 et opacité 0,3 De plus, nous devons utiliser la transition, non ? Toutes les 0,3 s. Comme vous pouvez le voir, effet de survol fonctionne Ça a l'air sympa. Créons maintenant un effet de clic. Je vais sélectionner pour et en bas avec la pseudo-classe E2. Ensuite, récupérons cette ligne de code. Collez-le ici et passez zéro comme argument. Très bien, alors c'est ça. Le modèle est stylé, il s'agit en fait d'un formulaire d'inscription. Pour l'instant, le formulaire de connexion est masqué. Mais si nous le réaffichons, vous constaterez qu' il est également stylisé car les deux formes de modèle ont les mêmes classes communes OK, donc tout est prêt pour que ces modèles de formulaires fonctionnent par défaut. Nous allons les cacher. Et lorsque nous cliquons sur les boutons de connexion ou d'inscription, ils doivent être affichés. Et le reste de la page doit également être désactivé. Pour y parvenir, nous allons utiliser un peu de JavaScript. OK, donc avant d'écrire du JavaScript, je vais d'abord masquer les formulaires, mais je ne vais pas le faire à partir du HTML. Nous allons le faire à partir du CSS. Donc, dans un premier temps, débarrassons-nous de l'attribut caché ici. Accédez ensuite au fichier style.css. Pour masquer les formulaires, je vais utiliser l'opacité zéro et la visibilité cachée Et nous devons les assigner au modèle. Les mousses sont cachées. Maintenant, pour les afficher, lorsque nous cliquons sur les boutons, nous devons créer une nouvelle classe, qui n' existe pas en HTML. Ensuite, en utilisant JavaScript, nous devons ajouter cette classe à deux formes d'événement onclick Créons donc d'abord une classe et appelons-la display. Ensuite, récupérez ces deux propriétés. Et modifiez les valeurs. Nous avons besoin d'une opacité et d'une visibilité visible. Il est maintenant temps d'écrire du JavaScript. En fait, nous devons lier nos fichiers JavaScript à une cellule HTML. Passons au fichier index.html et en bas , avant de fermer la balise body, ouvrons la balise script. Et dans l'attribut source il indique une partie du fichier JavaScript. Nous avons besoin ici de script.js, puis ouvrez le fichier script.js. Donc, avant d'associer deux boutons à un événement de clic, je vais créer quelques variables. Nous devons créer des variables pour les modèles et sélectionner les deux modèles séparément. Comme elle s'en souvient, nous attribuons à chacune d'elles des noms de classe individuels. Je veux dire, un wrapper de formulaire d'inscription et un wrapper de formulaire de connexion. Nous devons donc utiliser ces classes afin de sélectionner les modèles séparément. Revenons donc au fichier script.js et créons une variable, appelons-la modèle d'inscription En fait, si vous n'êtes pas familier avec JavaScript, en l'occurrence dom, en l'occurrence dom, vous pouvez consulter notre bootcamp JavaScript sur Udemy, dans lequel nous expliquons en détail tous les principaux concepts, dans lequel nous expliquons en des plus basiques aux plus avancés Vous trouverez le lien vers ce cours dans la description. Nous devons maintenant sélectionner un wrapper de formulaire d'inscription pour cela. Écrivons ici le document. Ensuite, je vais utiliser une méthode appelée sélecteur de requête. Entre parenthèses, indiquons ClassName, qui correspond à un abonnement rapide. Et de la même manière, nous devons sélectionner le wrapper de formulaire de connexion. Dupliquons donc cette ligne de code. Changez ensuite le nom de la variable dont nous avons besoin ici, modèle de connexion. Et j'ai également changé ClassName ici, connectez-vous. D'accord, outre les modèles, nous devons également sélectionner les boutons d'inscription et de connexion Créons donc une autre variable et appelons-la sign up btn, qui doit être égale au sélecteur de requête par points du document Et entre parenthèses comme nom de classe, non ? Inscrivez-vous à BTM. La même chose dont nous avons besoin pour un bouton de connexion. Dupliquons donc cette ligne de code. Changez ensuite le nom de la variable. Nous avons besoin ici de vous connecter btn. Et changez aussi le nom de la classe, non ? Connectez-vous btn. Très bien, donc pour l'instant, nous le savons tous ou ils peuvent joindre à l' événement de clic deux boutons pour lesquels nous devons écrire ici, inscrivez-vous btn Ensuite, nous devons y associer une méthode appelée ajouter un écouteur d'événements Entre parenthèses, nous devons indiquer le nom de l'événement comme premier argument Ensuite, nous devons transmettre votre fonction. Dans ce cas, je vais utiliser la fonction flèche ES6. Et maintenant, nous devons ajouter pour vous inscrire l'affichage de la classe modèle, que nous venons de créer en CSS. Pour cela, nous devons écrire ici un modèle d'inscription dont nous avons besoin pour utiliser une propriété appelée liste de classes Et pour ajouter une classe au modèle, nous devons utiliser une méthode appelée add. Entre parenthèses. Nous devons passer un nom de classe comme argument. Alors maintenant, si nous cliquons sur le bouton S'inscrire, le modèle d'inscription sera affiché. Super, le bouton d'inscription fonctionne. Nous avons également besoin de la même chose pour le bouton de connexion. Dupliquons donc ce code et changeons les noms des variables. Nous avons besoin d'un identifiant, d'un btn et également d'un modèle de connexion D'accord, cliquons sur le bouton de connexion et vous pouvez voir qu'il fonctionne comme le bouton d'inscription. Pour l'instant Seuls ces deux boutons fonctionnent. Nous ne pouvons pas fermer les modèles à l'aide des boutons X. De plus, l'arrière-plan n'est pas désactivé lorsque les modaux sont affichés. Il est donc temps de s' occuper de ces choses. Dans un premier temps, je veux que les boutons X fonctionnent. C'est pour ça. Créons de nouvelles variables séparément pour le bouton X d'inscription et le bouton X de connexion également Appelons cela le sinus variable de x, qui doit être égal au sélecteur de requête par points du document Ensuite, indiquons le nom de votre classe, sinus de x. Dupliquons-le. Changez le nom de la variable ici, connectez-vous x. Et modifiez également ClassName Nous avons besoin du login x, comme les boutons d'inscription et de connexion Nous devons également associer l'événement de clic aux boutons X. En fait, je vais dupliquer ce code Ensuite, changeons le nom de la variable, droite, le sinus de x. Maintenant, lorsque nous cliquons sur le bouton X, nous devons supprimer l'affichage des classes, auquel nous avons ajouté deux modèles. Donc, ici, au lieu de la méthode add, nous devons utiliser la méthode appelée remove. Faisons de même pour le login x. Dupliquez ce code. Changez le nom du bouton ici login x. Et changez aussi le nom du modèle, non ? Connexion modale. Très bien, affichons les modèles. Donc, si nous cliquons sur X bouteilles, elles disparaîtront. Les boutons X fonctionnent donc correctement. En fait, pour l'instant, nous sommes dans une situation plutôt compliquée. Nous pouvons afficher les deux modèles en même temps, mais c'est certainement une mauvaise expérience utilisateur. Nous avons besoin de certaines restrictions. En d'autres termes, lorsque l'un de ces modèles est affiché, nous devons désactiver la page entière afin de ne pas pouvoir cliquer sur le deuxième bouton. Pour dissoudre la page, nous devons en couvrir huit par conteneur de formulaire. Ensuite, nous ne pourrons plus cliquer n'importe où sur la page. C'est pour ça. Au début, nous avons dû attribuer certains styles au conteneur de formulaire. Passons au fichier style.css et sélectionnons. Pour récipient. Je vais définir sa position comme étant fixe. Ensuite, pour des raisons de visibilité, définissons cette couleur d'arrière-plan ici, RGBA, et insérons-la cette couleur d'arrière-plan ici, RGBA, en couleur noire avec une opacité Pour l'instant, le conteneur formé n' est pas visible. Et en fait, pour résoudre ce problème, nous devons le diffuser sur toute la page. Pour cela, je vais définir les quatre positions comme zéro. Je veux dire, nous devons atteindre le zéro du haut, le zéro de droite, puis le zéro du bas et enfin le zéro de gauche. Alors maintenant, à partir d'un conteneur, c'est possible. Mais en même temps, nous ne sommes pas en mesure de cliquer sur les boutons ni de cliquer n'importe où sur la page. Bien entendu, ce n'est pas ce que nous voulons par défaut. Nous voulons que cela se produise lorsque nous exposons l'un de ces modèles. Par défaut, nous devons donc nous cacher du conteneur. Et pour cela, nous avons besoin d'une opacité, d'une visibilité nulle et cachée. Ensuite, nous devons créer une nouvelle classe qui sera ajoutée au conteneur de formulaire à l'aide de JavaScript, qui gérera l'affichage du conteneur de formulaire. Créons donc une classe et appelons-la désactivée. Nous devons copier ces deux propriétés. Collez-les ensuite ici et modifiez les valeurs. Nous avons besoin d'une opacité et d'une visibilité visible. Très bien, revenons maintenant au fichier script.js. Nous devons donc désactiver la page lorsque nous cliquons sur l'une de ces batailles, je veux dire se connecter ou s'inscrire. Nous devons donc créer une nouvelle variable. Appelons cela un conteneur de formulaire. Il doit être égal au sélecteur de requête à points de documents. Et indiquons le nom de votre cluster pour le conteneur. Ensuite, dans cette fonction, nous devons ajouter à la ferme la classe de conteneur disabled, que nous venons de créer. Pour cela, nous avons besoin d'un conteneur étranger. Ensuite, la propriété appelée liste de classes. Nous devons utiliser ici la méthode add. Et entre parenthèses, nous devons indiquer le même nom de classe Nous avons également besoin de la même chose pour un bouton de connexion. Copions donc cette ligne et collez-la ici. Donc, si nous cliquons sur l'un de ces boutons, modèle sera affiché. Et la page sera également désactivée. Et puis si nous cliquons sur le bouton X, il sera masqué, mais la page sera conservée, toujours désactivée. Ainsi, lorsque nous cliquons sur les boutons X, nous devons supprimer la classe désactivée du conteneur de formulaires. Copions ce code et collez-le pour les deux boutons X. Et il suffit de changer la méthode d' ajout en supprimée. Alors maintenant, si nous testons, tout fonctionnera correctement. La seule chose que nous devons faire est de rendre l' affichage et le masquage des effets plus fluides. Pour cela, nous devons utiliser la transition. Nous devons l'attribuer au modèle. Insérons toutes vos valeurs et 0,5 s. Ensuite, saisissez-les et attribuez-les également au conteneur du formulaire. Très bien, notre projet est terminé. J'espère que c'était vraiment intéressant et que vous allez apprendre plein de choses. Merci d'avoir regardé. À bientôt dans le prochain tutoriel. 35. Projet 32 - Page d'atterrissage animée: Bonjour et bienvenue dans notre prochain tutoriel YouTube créé par code and create. Dans cette vidéo, nous allons créer une belle page de destination avec quelques effets d'animation Le projet sera créé sur la base du HTML et du CSS. Nous allons utiliser des images-clés CSS. Dans cette vidéo, vous allez découvrir comment créer des animations en utilisant uniquement du CSS pur. Allons-y et décrivons tout d'abord notre projet. Comme vous pouvez le voir, nous avons ici un fond d'image en plein écran Et au centre de la page, nous avons quelques éléments. Vous pouvez voir ici un titre, paragraphe, deux boutons différents. Si je recharge la page, titre et un paragraphe apparaîtront dans les directions opposées avec un effet de fondu Et dès qu'ils auront fini de bouger, les boutons s' afficheront dans l'ordre. Tous ces effets d'animation seront créés à l'aide de CSS, images-clés et de quelques propriétés d'animation Très bien, commençons sur le bureau. J'ai un nouveau dossier appelé page de destination animée, dans lequel nous avons deux fichiers différents pour HTML et CSS. Et aussi un dossier appelé images, qui comprend une seule image pour l' arrière-plan de la page de destination. Ouvrons ce dossier avec VS Code. Dans le fichier index.html. J'ai préparé une structure de base de document HTML. Vous trouverez ici deux liens à l'intérieur de l'élément principal. Pour ce qui est des polices Google, je vais utiliser une police appelée doses. Et nous avons un autre lien pour les styles CSS. Très bien, exécutons ce projet dans le navigateur à l'aide d'un serveur live Si vous n'utilisez pas ce package, je vous recommande d'installer le serveur live à partir du gestionnaire d'extensions. C'est en fait un package très pratique et utile. D'accord, allons-y, plaçons l'éditeur de code et navigateur côte à côte et commençons à créer du balisage HTML Il va être simple. Nous allons avoir juste quelques éléments. Alors tout d'abord, créons des développements qui seront un conteneur pour l'ensemble du contenu. Attribuons-lui donc la classe container. Ensuite, nous avons besoin d'un autre développement qui va englober quelques éléments. Attribuons-lui un nom de classe, une bannière. Ensuite, à l'intérieur de la bannière, créez des éléments de titre H1 Insérons du texte. Disons mon site Web. En fait, je vais encapsuler le site Web par élément de span parce que je souhaite styliser le deuxième mot du titre d'une manière légèrement différente. Ensuite, nous avons besoin d'un paragraphe. Insérons ici quelques textes créés par code et créons. Après cela, je vais créer un bouton avec le bouton de saisie. Attribuons-lui également un nom de classe, BTN, à gauche. Et sous forme de texte, insérons votre exploration. D'accord, nous avons besoin du même bouton que le second. Dupliquons donc cette ligne de code. Alors changez le nom de la classe dont nous avons besoin ici, d'accord ? Et aussi, au lieu d'explorer, écrivons Subscribe. Très bien, c'est tout à propos du balisage HTML. Nous sommes prêts à commencer à styliser la bannière. Passons au fichier style.css. Dans un premier temps, nous allons styliser tous les éléments, puis nous nous occuperons des animations. Allons-y et créons quelques styles de réinitialisation. Sélectionnez tous les éléments à l'aide d'un astérisque. Je vais définir la marge et le rembourrage à zéro. Et modifiez également la famille de polices. Utilisons la police appelée ptosis puis sans-serif. Très bien, ensuite je vais sélectionner le conteneur. Tout d'abord, définissons sa largeur et sa hauteur. Réglez avec nous cent pour cent S pour la hauteur. Utilisons 100 vh. Si vous ne connaissez pas unité de mesure VH, elle est l' abréviation de la hauteur de la fenêtre d'affichage Et dans ce cas, nous disons que la hauteur des conteneurs doit être égale à cent pour cent de la fenêtre d'affichage Après cela, je vais définir une image comme arrière-plan. Utilisons ici un gradient linéaire et passons ici quelques valeurs RGBA Le premier va avoir 53 ans, puis deux jusqu'à 66. Et opacité 0,5. En tant que deuxième valeur RGBA. Passons les années 47, 80, 63 et l'opacité 0,6 Ensuite, je vais indiquer une partie de l'image Nous avons un dossier appelé images et nous devons sélectionner par point JPG. Ensuite, nous avons besoin de la position de l'image d' arrière-plan pour définir un centre. De plus, nous n'avons pas besoin de répéter ici. Enfin, je vais utiliser la propriété des sites d'arrière-plan avec une couverture de valeur. Très bien, comme vous pouvez le voir, l'image est définie comme arrière-plan du conteneur Et maintenant, nous devons commencer à travailler sur la bannière. Nous allons donc le sélectionner à l' aide de ClassName Banner. Dans un premier temps, définissons sa largeur à 100 %. Cela signifie que la bannière occupera 100 % de la largeur de son élément parent, dans ce cas le conteneur. Je vais maintenant m'occuper de la position de la bannière. Je vais le placer au centre de la page. En fait, le centrage ne sera pas parfait. Je veux dire, je veux le centrer parfaitement horizontalement mais pas verticalement. Pour cela, je vais utiliser une technique. Définissons sa position comme absolue. Définissez ensuite la position supérieure comme 40 %, puis la gauche comme 50 %. La bannière est donc déplacée de haut en bas 40 % et de gauche à droite de 50 %. Mais ce n'est pas la position que nous voulons les obliger à adopter. Nous devons le placer au centre. Et pour cela, nous devons utiliser transform translate. Nous devons vous transmettre les valeurs suivantes. Nous avons besoin de -50 % , puis encore de -50 %. Ainsi, en utilisant Transform Translate, nous avons déplacé la bannière de sa position actuelle 50 % vers le côté gauche et de 50 % vers le haut. La prochaine chose que je veux faire en ce qui concerne la bannière est de placer les éléments au centre de la boîte. Et pour cela, nous devons utiliser le centre d'alignement du texte. OK, allons-y et stylisons les éléments de titre. Sélectionnez-le, à droite, bannissez ou H1. Augmentons la taille de la police. Faites-en deux pixels. Changez ensuite de couleur. Je vais utiliser votre couleur D, D, D. De plus, je veux rendre la police un peu plus claire en utilisant l'épaisseur de police. Donc 800. Enfin, créez de l'espace en bas en utilisant la marge, les deux pixels du bas. D'accord ? Comme vous vous en souvenez, nous avons terminé le deuxième mot du titre. Je veux dire site Web par élément de span. Je vais donc le sélectionner correctement, Banner Span. Je souhaite transformer le texte en majuscules. Pour cela, utilisons le texte transformé en majuscules. Ensuite, rendez-le légèrement plus audacieux. Poids de la police 700. Et faites aussi en sorte que sa couleur soit blanche. Col blanc, f, f, f. Très bien, c'est tout pour le cap Donnons quelques styles au paragraphe. Sélectionnez-le, bannière droite p. Définissons sa taille de police à 50 pixels. Ensuite, éclaircissez les textes en utilisant l' épaisseur de police, 300, changez la couleur, mettez-la e, e. Enfin, créez de l'espace en bas à l'aide de la marge, soit 20 pixels en bas Très bien, comme le style de paragraphe de titre aussi. Et maintenant, nous devons nous occuper de ces deux boutons. En fait, ils devraient être presque identiques. Dans un premier temps, je vais donc définir quelques styles courants pour les boutons. Sélectionnez les deux. Hein ? Bouton de bannière. Définissez la largeur comme étant de 180 pixels. Créez ensuite de l'espace en utilisant rembourrage qui lui est assigné, 12 pixels. Ensuite, je veux créer un espace autour des boutons pour cela Utilisons la marge et définissons-la à 20 pixels. Ensuite, au lieu de la bordure par défaut, définissons une bordure droite personnalisée avec les valeurs de deux pixels, pleine. Et créons la couleur E. Je vais également arrondir les boutons en utilisant le rayon de bordure Définissons-le à 50 pixels. En plus de cela, je souhaite augmenter la taille de la police. Faisons-le 18 pixels. Supprimez ensuite le plan par défaut en utilisant outline none. Créez également un espace entre les lettres. Pour cela, utilisons un espacement des lettres d'une valeur d'un pixel. Et enfin, changez de type de cours, faites valoir votre point de vue. Très bien, c'est tout à propos des styles courants pour les boutons. Maintenant, je vais attribuer à chacun d'eux des styles individuels. Nous allons donc sélectionner le bouton, qui est placé sur le côté gauche. Il y a un nom de classe btn à gauche. Changeons sa couleur de fond. Utilisez votre couleur, par exemple E, puis changez la couleur du texte. Je vais utiliser cette couleur pour. En fait, nous avons besoin de propriétés similaires pour ce second bouton. Allons-y donc et dupliquons ce code. Changez le nom de la classe dont nous avons besoin ici, non ? Ensuite, je vais définir la couleur d'arrière-plan comme transparente. C'est une couleur de fourrure. Utilisons ie. OK, donc enfin, tous les éléments sont stylés. La page de prêt s'affiche bien, et il est maintenant temps de créer nos animations. En CSS, vous pouvez créer des animations à l'aide d'images-clés Dans les images-clés, vous pouvez définir différentes règles CSS pour différentes étapes de l'animation Ensuite, à l'aide de quelques propriétés d'animation, vous pouvez appliquer ces règles CSS à différents éléments afin de les voir en pratique. Créons des images-clés Pour cela, nous avons besoin d'un panneau. Puis mot clé, images-clés. Il doit être suivi du nom de l'animation. En fait, c'est facultatif. Tu peux l'appeler comme tu veux. Et dans ce cas, je veux le nommer « déplacer vers la gauche ». D'accord ? Cette partie de l'animation va donc être consacrée au titre 1, titre 2 étant placé sur le côté droit par défaut. De plus, je veux qu'il soit masqué par défaut, je veux dire l'état de départ d'un élément lorsque l' animation démarre. Ensuite, lorsque nous rechargeons la page, je veux qu'elle se déplace de droite à gauche et qu'elle apparaisse avec un effet de fondu Pour y parvenir, nous devons donc définir ces styles à l'intérieur des images-clés Je veux dire, l'état de départ d'un élément et son état final également. Afin de définir les styles lorsque l'animation commence, nous devons écrire ici zéro pour cent. De plus, au lieu de zéro pour cent, vous pouvez utiliser le mot clé de. Donc, comme nous l'avons dit, le titre doit être placé sur le côté droit et doit être masqué. Pour cela, nous devons vous écrire, transformer, puis traduire X. Et en guise d'argument, plaçons ici cent 20 pixels. Et pour masquer un élément, nous avons également besoin d'opacité. Zéro. S4, le point final de l'animation que nous voulons replacer à son ancienne position Et il doit également être visible. Pour définir le point final, nous pouvons écrire ici le mot clé à. En fait, dans ce cas, nous n'avons que deux étapes. Nous sommes en mesure d'utiliser ces mots-clés, je veux dire à partir de N2. Mais parfois, je pense que plupart du temps, nous avons plus de deux étapes. Dans ce cas, nous devons utiliser des valeurs en pourcentage. Quoi qu'il en soit, changeons ces mots-clés et utilisons des valeurs en pourcentage. Au lieu de partir de zéro. Au lieu de deux. Nous avons besoin de 100 %. Attrapez ensuite des étoiles dès la première étape. Insérez votre zéro S pour l' opacité, il nous en faut un. Très bien, pour l'instant, rien ne se passe ici. Le titre ne bouge pas. Nous avons besoin d'autre chose pour appliquer ces styles à un élément, nous devons utiliser certaines propriétés d'animation. Allons-y et attribuons deux titres à ces propriétés. Le premier sera le nom de l'animation. Attribuons-lui un nom d'images-clés, déplacons-nous vers la gauche. Ensuite, nous avons besoin de la durée de l'animation. Mettons-le sur 2 s. Donc, si nous sauvegardons cela, le titre se déplacera de gauche à droite avec un effet de fondu. En fait, nous avons un petit problème. Une barre de défilement s'affiche en bas lorsque le titre se déplace. En effet, par défaut, il est placé sur le côté droit et l'espace sur la page n'est pas suffisant. Donc, pour résoudre ce problème, nous devons utiliser overflow hidden Et nous devons l'attribuer au conteneur. Comme vous pouvez le voir, de l'acier. Et peut-être, de façon inattendue , nous avons le même problème ici. Cela se produit parce que la bannière est positionnée de manière absolue. Et pour l'instant, cela fonctionne en fonction de l'élément corporel. Nous devons le faire fonctionner en fonction du conteneur. Pour cela, nous devons attribuer à la position relative du conteneur. Maintenant, tout fonctionne parfaitement. Ensuite, je vais créer des images-clés pour un paragraphe. Ce sera similaire aux images-clés d'un titre. Mais dans ce cas, nous devons utiliser une direction opposée. Je souhaite que le paragraphe soit déplacé de gauche à droite. Allons-y donc et dupliquons ce code. Modifiez le nom de l'animation. Dans ce cas, je vais écrire déplacer vers la droite. Alors au lieu de 120 pixels, nous avons besoin ici de moins cent 20 pixels. Ensuite, attribuez deux propriétés de paragraphe que nous avons utilisées pour le titre. Je vais donc les récupérer, les coller pour p éléments et simplement changer le nom de l'animation. Nous devons nous déplacer vers la droite Donc, si nous enregistrons, le paragraphe de titre se déplacera de gauche à droite avec un effet estompé Et dans l'ensemble, cela créera un bel effet d'animation. D'accord ? Donc, en tant qu'invité, nous devons maintenant travailler sur les boutons par défaut, je veux qu'ils soient masqués. Ensuite, après avoir affiché un titre et un paragraphe, je veux qu'ils apparaissent dans ordre et avec un certain effet de fondu. Créons donc de nouvelles images-clés. Nommez-le Animate btn. Donc en cas de bouton, il suffit de le manipuler par Opacity Donc, à zéro pour cent, nous avons besoin que l'opacité soit nulle S pour 100 %. Je vais en faire un. D'accord ? Les images-clés sont donc prêtes Allons-y et attribuons deux boutons, des propriétés d'animation. Commençons par btn, laissons le nom de l'animation défini et définissons-le comme animate Ensuite, pendant que je dure , utilisons une seconde. Outre ces deux propriétés, nous avons besoin d'un petit délai car je veux que Batson's apparaisse lorsque les animations de titre et de paragraphe sont sur le point de se terminer. Utilisons donc le délai d'animation des propriétés et définissons-le sur 1,5 s. Ensuite, récupérons ces trois propriétés et collez-les également pour btn, d'accord Pour le second bouton, nous avons besoin d'un peu plus de délai. Changeons donc sa valeur et fixons-la à 2,3 s. OK, enregistrons et voyons ce qui va se passer. Comme vous pouvez le constater, lorsque les animations d'un titre et d'un paragraphe sont en cours d'exécution, pour être plus précis, pendant le délai, les boutons sont visibles et dès que la dernière terminée, ils commencent à s'animer Nous devons donc les masquer pendant le délai. Et pour cela, nous devons utiliser une autre propriété appelée mode film d'animation. Et nous devons le définir comme inversé. Donc, dans ce cas, nous disons que pendant le délai, les éléments auront par défaut ce style particulier. En d'autres termes, pendant le délai, les boutons seront masqués. Récupérons ce code et collez-le également pour le deuxième bouton. Puis enregistrez. Et c'est parti. Maintenant, tout fonctionne parfaitement. Nous avons ici une belle page de destination animée. Très bien, en fait c'est ça. Notre projet est terminé. Et avant de terminer ce didacticiel, je voudrais vous montrer encore une chose concernant les propriétés d'animation. Comme vous pouvez le constater, nous en utilisons plusieurs. Et au lieu de le faire, nous pouvons les écrire rapidement. Nous avons juste besoin d'utiliser une propriété appelée animation. Ensuite, nous devons attribuer à chaque nom, déplacer vers la gauche, ce qui doit être suivi de la durée. Copions cette ligne et collez-la pour le paragraphe. Changer de nom. Nous devons aller vers la droite. Épargnons. Et vous voyez que tout fonctionne exactement de la même manière. D'accord ? En fait, je ne vais pas modifier les propriétés de Batson's Je pense que vous verrez clairement comment cela fonctionne afin que vous puissiez le faire vous-même. OK, voyons voir. Nous en avons terminé avec ce projet. J'espère que cela vous a plu et que vous avez appris des choses utiles. À bientôt dans le prochain tutoriel. 36. Projet 33 - Button 3D: Bonjour à tous et bienvenue dans notre prochain tutoriel. Dans cette vidéo, nous allons créer un bouton 3D en utilisant uniquement du HTML et du CSS purs. Et je pense que ce sera vraiment intéressant et utile car vous pourrez découvrir quelques astuces et techniques intéressantes en utilisant uniquement le HTML et le CSS. Alors commençons. Comme d'habitude Tout d'abord, décrivons ce que nous allons créer. Donc, comme vous le voyez, nous avons ici une image d'arrière-plan en plein écran. Et au centre de la page, nous avons un bouton 3D. Il est placé dans un espace 3D. Et lorsque nous le survolons, il tourne avec un très bel effet J'espère donc que vous appréciez ce petit projet. Sur ordinateur, j'ai créé un nouveau dossier dans lequel j'ai deux fichiers différents pour HTML et CSS. De plus, j'ai ici un autre dossier qui inclut une image d'arrière-plan. Allons-y et ouvrons ce dossier avec le code VS. Dans le fichier index.html. Nous avons la structure de base du document HTML. L'intérieur contenait des éléments. Il existe deux liens, l'un pour le fichier style.css et l' autre pour les polices Google. Tout au long de ce projet, nous allons utiliser des téléphones appelés Slab D'accord ? Très bien, allons-y et exécutons ce fichier dans le navigateur à l' aide du serveur live Pour obtenir cette extension, vous devez la rechercher dans le Gestionnaire d' extensions et l'installer. D'accord, plaçons l'éditeur et le navigateur côte à côte afin de travailler de manière plus pratique et flexible et commençons à créer du balisage HTML Ça va être très simple. Nous avons juste besoin de créer des développements, qui seront des conteneurs. Ensuite, à l'intérieur, nous devons insérer un bouton. Attribuons-lui le nom de classe BTN. Et aussi sous forme de texte ici, abonnez-vous. Très bien, c'est tout en ce qui concerne le HTML Passons au fichier style.css et écrivons quelques styles Tout d'abord, je vais créer des styles de réinitialisation. Sélectionnons tous les éléments à l'aide d' astérisques et définissons la marge et le remplissage à zéro Ensuite, nous devons prendre soin du conteneur. Nous allons donc le sélectionner. Dans un premier temps. Je vais définir sa largeur et sa hauteur. Supposons que 100  %. En ce qui concerne la hauteur. Je vais lui attribuer 100 vh. En fait, nous avons expliqué comment fonctionne la hauteur de la fenêtre d'affichage dans d'autres vidéos Mais encore une fois, dans ce cas, nous disons que la hauteur du conteneur doit être égale à cent pour cent de Viewport Ensuite, je vais définir l'image comme arrière-plan du conteneur. Utilisons votre dégradé linéaire. Je vais transmettre vos valeurs RGBA, non ? 000 et 7 points d'opacité. Encore une fois, nous avons besoin de la valeur RGBA 000, opacité 0,8. Ensuite, je vais indiquer dans la partie URL de l'image que nous avons un dossier appelé images. Sélectionnons par point JPEG. Ensuite, je vais définir la position de l'arrière-plan. Ça va être au centre. Et nous n'avons pas non plus besoin de répéter ici. Enfin, je vais utiliser la propriété de taille d'arrière-plan avec une valeur de couverture. Très bien, alors maintenant l'arrière-plan est vraiment joli. Et la dernière chose concernant le conteneur, c'est que nous allons placer le bouton parfaitement au centre de la page. En fait, nous allons le gérer à l'aide de Flexbox. Écrivons donc ici display flex. Ensuite, nous devons utiliser la justification du contenu en centrant les valeurs et en alignant les éléments. Encore une fois avec un centre de valeurs. Très bien, c'est tout à propos du conteneur. Ensuite, nous devons nous en occuper, mais allons-y et sélectionnons-le dans le nom de classe BTN. Dans un premier temps. Attribuons à certains styles habituels une largeur définie et faisons en sorte qu'elle soit de 350 pixels. Réglez ensuite la hauteur sur 100 pixels, changez la couleur d'arrière-plan. Dans ce cas, je vais utiliser un dégradé linéaire. Passons vos deux couleurs différentes. Le premier sera 8539, 16s4. Deuxièmement, je vais passer ici au 63019. D'accord. C'est donc ce que recherche notre bouton pour le moment. C'est vraiment énorme, mais en fait nous en avons besoin. Continuons et ajoutons d' autres styles. Supprime la bordure et le contour par défaut , aucune bordure droite. Et n'en décrivez aucun. Ensuite, allons-y et travaillons sur le texte. Modifiez la famille de police. Utilisez votre police appelée dalle 27 pixels plutôt que serif, taille de police augmentée Passons à 35 pixels. Ensuite, je vais mettre les lettres en majuscules en utilisant la transformation de texte En majuscules, créez également un espace entre les lettres en utilisant l'espacement des lettres Réglons-le sur quatre pixels, puis changeons de couleur, rendons-le blanc. Étape par étape. Notre bouton est de plus en plus agréable. Ensuite, je vais ajouter une ombre au texte. Pour cela, nous devons utiliser la propriété appelée ombre du texte. Insérons ici les valeurs suivantes. Nous avons besoin de zéro, puis de dix pixels, encore une fois, de dix pixels et de la couleur noire. Et changez également de type de plus grossier. Mettons-le au clair. Très bien. À ce stade, avec la personnalisation du bouton, nous avons terminé. Il est temps de passer à autre chose et de commencer à le transformer en éléments 3D. Tout d'abord, nous devons créer un environnement 3D pour Bateson Et pour cela, nous devons attribuer à son élément parent une propriété appelée perspective. Attribuons à chaque valeur des milliers de pixels. En fait, la perspective définit la distance entre un élément et l'utilisateur. Nous devons maintenant faire pivoter le bouton selon les directions x et z. Attribuons-lui donc la propriété de transformation. Tout d'abord, faisons pivoter le bouton le long de l'axe X. Faites pivoter x et insérez votre angle de 70 degrés. Comme vous pouvez le voir, le bouton est pivoté, mais en plus de la direction x, nous devons également le faire pivoter le long de l'axe Z. Nous avons donc besoin ici de faire pivoter Z avec une valeur de 30 degrés. D'accord ? C'est donc la position que nous voulons qu'ils occupent par défaut. Maintenant, nous devons donner au bouton la forme d'un cuboïde. En fait, le cuboïde ressemble à un cube, mais il a la forme d'un rectangle Nous le faisons afin de le transformer en encore plus d'éléments 3D. Je tiens à souligner que ce ne sera pas très simple. Nous allons utiliser des éléments avancés du CSS. Je recommande donc d'être plus concentré et de vous concentrer sur les choses que nous allons montrer. Nous allons donc utiliser des pseudo-éléments avant et après. Sélectionnons le bouton avec. Avant les pseudo-éléments. Écrivez btn avant le contenu en direct comme étant vide, attribuez-lui une chaîne vide Définissez ensuite la largeur à cent pour cent et la hauteur à 15 pixels. Afin de rendre les éléments visibles, attribuons-lui une couleur de fond et le rendons rouge pendant un certain temps Je veux dire, juste pour une démonstration. Nous devons également définir cette position car sinon la hauteur et la largeur ne lui seront pas appliquées. Définissons donc sa position comme absolue. Donc, avant les pseudo-éléments, nous devons changer sa position et le placer quelque part devant le bouton. Mettons donc la position inférieure et la bonne position à zéro. L'élément a changé de position, mais ce n'est pas ce que nous voulons. Finalement, nous devons le faire pivoter 90 degrés le long de l'axe X. D'accord ? Comme vous pouvez le voir, à ce stade, l'élément n'est plus visible. La raison en est qu' il ne possède pas ses propres environnements 3D car il s'agit d'un élément enfant du bouton. Et il n'hérite pas des affichages du conteneur. Pour y parvenir, en CSS, nous avons une propriété appelée style de transformation, qui doit avoir la valeur Preserve 3D, et nous devons l'attribuer à. Mais écrivons le style de transformation et attribuons-lui la préservation de la 3D. L'élément est mal affiché , nous avons ici un autre problème. Par défaut, l'origine de la transformation est définie comme centre. En d'autres termes, vous pouvez imaginer que l'axe x passe au centre des éléments. Dans ce cas, nous n'en voulons pas. Nous voulons créer le fond de l'origine de la transformation. En fait, je sais que ce genre de choses est un peu difficile à comprendre, mais c'est ainsi que cela fonctionne. Si j'ai voyagé pour comprendre, il vaudrait mieux tester ces choses par vous-même. Allons-y, écrivons l' origine de la transformation et définissons-la comme étant en bas. Très bien, alors voyons ce que nous voulons il obtienne. Étape par étape. Nous prenons la forme d'un cuboïde. Maintenant, je vais changer la couleur de fond. Utilisons les couleurs d'une combinaison de dégradés linéaires. Je vais copier le second et le coller ici. Maintenant, comme vous pouvez le voir, ça a l'air beaucoup mieux. Donc, comme pour la face avant, nous avons besoin de la même chose. Sur le côté droit. Nous devons le créer en utilisant des pseudo-éléments after. En fait, nous allons avoir besoin de propriétés similaires. Dupliquons donc l'intégralité de ce code. Changez ensuite l'avant en, après. Tout d'abord, changeons de position plutôt que d'en bas, nous avons besoin ici du haut. Vous voyez des éléments se retrouver derrière le bouton. Nous devons donc le faire pivoter selon l' axe Y avec une valeur de -90 degrés Vous pouvez donc voir d'un coup d'œil où se retrouvent les éléments , cela ressemble à du poids, mais la raison en est que nous devons modifier les valeurs de hauteur et de largeur. Dans le cas de pseudo-éléments postérieurs, nous devons changer les valeurs de hauteur et de largeur. Largeur de 15 pixels de hauteur à cent pour cent. Ok, maintenant nous y sommes presque. La seule chose que nous devons faire est de changer l' origine de la transformation. Dans ce cas, au lieu d'en bas, nous devons le faire, non ? Très bien, nous sommes finalement arrivés ici, nous avions besoin de nous remettre en forme. La dernière chose concernant son style est de changer la couleur de fond des pseudo-éléments postérieurs. Dans ce cas, prenons la première couleur du dégradé linéaire et collons-la pour vous. OK, c'est tout pour Batson. Nous devons maintenant le faire fonctionner. Je veux dire, nous devons créer un effet de survol sur le survol. Je vais le faire pivoter le long des axes x et z. Alors écrivez btn avec le pointeur de la souris et insérez votre Transform. Faites pivoter X avec des arguments de 30 degrés. Ensuite, nous devons faire pivoter Z de zéro degré. Enfin, pour un effet fluide, je vais utiliser la transition. Écrivons ici une transformation d'une durée de 0,5 s. Très bien, survolons le bouton Et il a dit que nous avons vraiment un effet impressionnant. OK, donc tout tourne autour de nos projets. Nous avons créé un bouton 3D sympa, et j'espère que vous l'avez apprécié. Merci d'avoir regardé. À bientôt dans le prochain tutoriel.