Créer 10 projets Web créatifs avec HTML et CSS

1. Introduction: Bienvenue dans le tout nouveau cours où vous apprendrez à créer de beaux projets Web créatifs. Nous allons construire ensemble dix projets web créatifs différents en HTML et CSS purs. Si vous avez des connaissances de base sur ces technologies et que vous rencontrez toujours des difficultés créer vos propres projets Web, ou si vous souhaitez améliorer vos compétences en matière de développement et de conception, pour créer vos propres projets Web, ou si vous souhaitez améliorer vos compétences en matière de développement et de conception, vous êtes au bon endroit. Nous avons créé ce cours afin de donner aux étudiants la meilleure expérience possible en HTML et CSS et leur permettre de créer de magnifiques projets créatifs. Nous allons créer dix projets Web différents, et ils seront pleins de designs d'effets modernes, agréables et magnifiques . Nous commencerons par des projets relativement simples, et nous passerons également en revue certains projets avancés. Nous pouvons vous garantir que vous acquerrez une solide expérience et des connaissances en matière de création d'effets vraiment sympas après avoir terminé ce cours. À l'aide de ce cours, vous pouvez trouver les inspirations qui vous aideront à améliorer vos projets et à personnaliser votre portfolio. maîtrisant uniquement ces technologies de base du développement de Front and Bob, vous pouvez créer des thèmes géniaux et modernes et simplement passer au niveau supérieur Le cours sera intéressant et utile. Je vous recommande d' essayer de tirer le meilleur parti de ce cours sans simplement copier-coller le code Si j'étais à ta place, je prendrais certainement ça. Alors rejoignez-nous. 2. Projets: 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 du cours. Comme vous le savez déjà, nous allons créer dix projets web créatifs et magnifiques. Tous ces projets seront construits sur la base du HTML et du CSS. Je tiens à mentionner que vous devez avoir une compréhension de base de ces technologies afin suivre les cours et de ne pas vous y perdre. Les projets seront truffés de différentes techniques et astuces modernes. Vous pourrez apprendre à créer jolis et beaux effets et animations, que vous pourrez ensuite utiliser comme source d'inspiration pour développer et personnaliser votre propre portfolio. Comme je l'ai mentionné, nous allons construire dix 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 que vous souhaitez à partir du moins possible. Cela dépend entièrement de vous. Très bien, je vais maintenant passer chaque projet et les décrire brièvement. Le premier projet que nous allons construire est un carré de saut. Comme vous pouvez le voir, nous avons ici un carré qui saute sur quelque chose comme le caoutchouc Il change de forme et ces tiques sont également inclinées afin de créer un effet naturel Nous allons maintenant créer cette page de destination. Si nous rechargeons la page, vous verrez l'image d'arrière-plan en plein écran apparaître avec une belle animation Une fois qu'il est affiché, il change de forme après quoi nous allons créer une animation de balle. Comme vous pouvez le voir, nous avons ici une boule animée qui se déplace de haut en bas. Il touche les cases qui viennent des côtés gauche et droit. De plus, nous avons ici un arrière-plan en mouvement qui donne l'illusion que la balle se déplace vers le haut. Bien, nous aurons ensuite la Terre animée. Comme vous le voyez, nous avons ici deux parties différentes. Sur le côté gauche, la partie sombre de la Terre. Sur le côté droit, il y a une partie lumineuse. La Terre elle-même tourne selon son axe Y. Ensuite vient le flux. La fleur sera juste la fleur normale avec quelques pétales et une tige. N'oubliez pas que nous le créerons uniquement avec du ML et du CSS. Ensuite, nous allons créer une animation atomique. Comme vous pouvez le constater, nous avons ici un atome typique, que vous avez peut-être vu dans votre cours de chimie ou que vous êtes peut-être tombé sur l'un des logos les plus populaires de l'éditeur. Je parle de l'atome. Nous avons ici quelques cercles avec des balles qui se déplacent autour de la balle principale. Très bien, le prochain projet sera un hélicoptère. Nous avons ici un effet de vol. L'hélicoptère survole la ville, les pales bougent. L'ensemble de cet hélicoptère est créé avec H, M et CSS. Et ce n'est pas vraiment une image. Je voudrais mentionner que l'effet de vol semble beaucoup plus réaliste lorsque vous exécutez le projet dans le navigateur. Cela ne semble pas très réaliste dans la vidéo à cause des images. Ne vous inquiétez pas, il sera beaucoup plus beau si vous le construisez vous-même. D'accord, le prochain projet sera le vélo que nous avons ici, le vélo typique. Comme vous pouvez le constater, les roues et les pédales bougent, on dirait que le vélo roule Le prochain projet sera une salle en trois D. Nous avons ici une table dans la chambre avec une lettre. Une fois que nous avons cliqué sur le bouton, lu la lettre, nous atteindrons le tableau et la lettre tournera. Ensuite, il y aura le dernier projet, qui sera une balançoire en trois D. Nous avons ici quelques balançoires. Ils se déplacent dans un espace tridimensionnel. Vous pouvez également voir ici la balle se déplacer sur ces balançoires. Très bien, tout dépend des projets que nous allons développer tout au long du cours. J'espère qu'ils seront intéressants, que vous les apprécierez et que vous apprendrez de nouvelles choses. Commençons donc. 3. Configuration: Bonjour et bienvenue au cours. Nous sommes ravis de vous avoir parmi nous, et nous sommes convaincus que vous trouverez ce cours agréable. Avant de nous lancer dans notre projet, préparons d'abord notre environnement de travail. Si vous êtes déjà configuré et prêt à écrire du code, vous pouvez ignorer cette vidéo et passer directement au projet. Cependant, si vous n'êtes pas encore prêt , c'est parfaitement bien. Nous vous guiderons dans la configuration certains outils essentiels tout au long de ce cours. Vous aurez besoin de deux outils principaux un navigateur Web moderne et un éditeur de texte. Pour notre navigateur Web, j'utiliserai Google Chrome, mais je recommande également Mozilla, Firefox. Vous possédez probablement déjà ces navigateurs, mais voyons rapidement comment les télécharger. Au cas où vous souhaiteriez obtenir Google Chrome, il vous suffit de visiter cette URL et de télécharger le navigateur. Le processus d'installation est simple, nous n'y consacrerons donc pas beaucoup de temps. Pour Mozilla, Firefox, vous pouvez l'obtenir à partir de cette URL. Les deux liens seront inclus dans cette conférence pour votre commodité. Très bien, parlons maintenant de l'éditeur de texte. Nous utiliserons le code de Visual Studio qui est l'un des meilleurs éditeurs de texte disponibles aujourd'hui. Cependant, vous pouvez utiliser votre éditeur de texte préféré si vous en avez un. C'est toujours à vous de décider. Je recommande de saisir le code Visual Studio a. Essayez de télécharger le code Visual Studio, visitez ce site Web et sélectionnez la version pour votre système d'exploitation, Windows, Mac ou Linux. Le processus d'installation du code Visual Studio est également simple. Vous ne devriez rencontrer aucun problème. Une fois que vous aurez installé ces deux outils, vous serez prêt à commencer le cours. Plongeons-nous directement dans le vif du sujet. 4. Projet 1 - Carré sautant: Très bien, nous sommes prêts à commencer à construire nos projets. Dans cette vidéo, nous allons créer le premier projet qui est un carré de saut. Comme vous pouvez le voir, nous avons ici un carré qui saute sur quelque chose comme le caoutchouc Cela change de forme et ces bâtons sont également inclinés afin de créer un effet naturel OK, tout tourne autour du projet, allons-y et commençons. J'ai créé un nouveau dossier sur le bureau appelé Jumping Square, qui est actuellement vide. Ouvrons ce dossier sous forme code et créons nos fichiers de travail. Je veux dire le HTML d'index et le style CSS. Ouvrez ensuite le fichier HTML à points d'index et créez un document HTML de base. Mettons ici un point d' exclamation , puis appuyons sur Haut ou Entrée OK. Tout d'abord, allons-y et changeons le titre. Ça va aller droit au but. Liez ensuite le fichier CSS. Spécifiez ici le style SS. OK, enfin, exécutons le projet sur le navigateur en utilisant le serveur live. Ensuite, placez l'éditeur et le navigateur côte à côte, comme ça. Très bien, je vais d'abord créer le balisage H DML. Ouvrons la balise profonde qui sera le conteneur. Ensuite, je vais ouvrir un autre remorqueur profond qui enveloppera l'ensemble de l'animation Ce sera un emballage À l'intérieur de l'emballage, nous aurons quelques éléments différents Le premier sera le caoutchouc. Ensuite, nous aurons deux bâtons. Utilisons les classes stick et left stick. Dupliquez ensuite ce code et changez de gauche à droite. Enfin, créons un autre remorqueur profond qui sera le carré Très bien, disons à propos du balisage H mal. Passons à autre chose et commençons à écrire du CSS. Tout d'abord, je vais créer des styles de réinitialisation et par défaut pour chaque élément. Sélectionnons-les à l'aide d'un astérisque. Je vais me débarrasser de la marge et du rembourrage par défaut. Réglons les deux propriétés à zéro. De plus, je vais définir la taille de la boîte sur celle de la bordure. Tout au long de ce projet, nous allons utiliser le RAM comme unité de mesure. À l'heure actuelle, un RAM équivaut à 16 pixels. Par défaut, je veux convertir un RAM en dix pixels. Que nous devons réduire la taille du téléphone de l'élément HTML, et que nous devons la porter à 62,5 %. D'accord , je vais maintenant m' occuper du conteneur Définissons qu'il est en hauteur. La largeur sera de 100 % Quant à la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage C'est à propos du conteneur pour le moment. Ensuite, je vais personnaliser l'emballage. Tout d'abord, définissons la largeur et la hauteur. La largeur sera de 100 RAM. Pour ce qui est de la hauteur, je vais faire 80 Ram. Je change également la couleur de fond. Faisons en sorte que ce soit 15 heures sur cinq. En fait, l' emballage va être placé au centre de la page Pour cela, je vais utiliser une grille CSS. Affectons-le à la grille d'affichage du conteneur , puis plaçons les éléments au centre. Bien, passons à autre chose et continuons à personnaliser le wrapper. Ensuite, je vais le rendre un peu arrondi. Utilisons un rayon de bordure avec une valeur cinq RAM et créons également un effet d'ombre. Mettons deux Ram, deux Ram, six Ram, et comme couleur je vais utiliser 888. Très bien, alors asseyons-nous à propos de l'emballage. Passons à autre chose et commençons à travailler sur les bâtons. Sélectionnons-les en utilisant un nom de classe commun. Tout d'abord, définissons la hauteur maximale. La largeur sera de trois Ram, puis la hauteur sera de 40 Ram. Et changez également la couleur de fond. Je vais utiliser ici une couleur appelée corail. Ici, nous avons les deux bâtons. Faisons en sorte que leurs meilleurs sites soient légèrement arrondis. Utilisez le rayon de bordure avec les valeurs, un Ram, un Ram, sont les meilleurs sites. Ensuite, nous avons besoin de 0,0. Ensuite, je vais m' occuper des positions dont nous avons besoin pour rendre leurs positions absolues. En fait, nous aurons besoin d' une position absolue pour chaque élément qui le est. Les enfants de l'emballage. Je vais donc sélectionner chaque développement à l'intérieur du wrapper, puis définir leur position sur absolue Nous allons positionner les éléments en fonction de l'emballage. Attribuons-lui une position ou une valeur relative. D'accord, après cela, réglons la position des bâtons. Les deux auront un zéro inférieur. Ensuite, je vais définir les positions des bâtons séparément. Sélectionnons le joystick gauche et réglons la position gauche sur 15 RAM. Dupliquons ce code, changeons de gauche à droite. Nous avons également besoin d'ici, avec la même valeur. D'accord, en plus de ça, je vais ajouter un petit effet d'ombre aux deux sticks. Commençons par le joystick gauche. Les valeurs seront 0,2 M, 0,5 RAM et la couleur 555. En ce qui concerne le joystick droit, nous aurons besoin d'un effet d'ombre similaire, mais la première valeur sera négative. OK, c'est pour les bâtons. Ensuite, enlevons le caoutchouc. Définissons avec la hauteur. La largeur sera de 67 RAM. Quant à la hauteur, elle sera de 50 RAM. Je vais également utiliser une couleur de fond temporaire. Disons rouge. Bien, passons maintenant à la position du caoutchouc Définissons la position gauche. Il y aura 16,5 RAM en bas. Ça va faire 24 RAM. En plus de cela, je vais y ajouter bordure en bas et aussi une ombre. Le bas de la bordure sera un Ram solid. Et la couleur sera le corail comme ombre à boîte dont nous avons besoin ici. 01 RAM zéro. Et la couleur sera DD. Très bien, voyons voir le caoutchouc. Ensuite, je vais m' occuper de la place. Sélectionnons-le et définissons la largeur. Ça va faire 14 RAM. Nous avons besoin de la même hauteur. Je vais utiliser ici une propriété appelée rapport hauteur/largeur avec la valeur un. Ensuite, changeons la couleur de fond, rendons-la blanche. De plus, je vais arrondir le carré en utilisant le rayon de bordure deux Ram. Bien, changeons ensuite la position du carré. Définissons la position gauche, faisons-en 44 RAM. Je vais également ajouter une petite ombre au carré. Intérons 0,02 RAM et la couleur 555. OK, tout est prêt pour commencer à travailler sur les animations. Commençons par le caoutchouc. Tout au long de l'animation, nous modifierons le rayon de la bordure et nous descendrons également le caoutchouc lui-même. Allons-y et créons des CSSKeyframes avec le Nous allons procéder à quelques étapes différentes à 0 % et à 20 %. Nous allons changer la bordure, mais nous ne déplacerons pas le caoutchouc Nous avons besoin de ces deux étapes ici. Le rayon de la bordure sera nul. Ensuite, nous devons nous transformer. Traduisez avec la direction y et avec la valeur zéro. Ensuite, nous aurons 50,60 %. Sur ces étapes, nous modifierons le rayon de la bordure et déplacerons le caoutchouc vers le bas Le rayon de bordure sera de 0,035 Ram et 35 Ram. Encore une fois, pour ce qui est de la transformation, traduisez Y, ce sera 23 RAM. Enfin, les deux dernières étapes seront 65 % et 100 %. Ici, nous allons modifier le rayon de la bordure et déplacer l'élément à sa place par défaut. Le rayon de la bordure sera nul. Quant à la transformation translate Y, elle sera également nulle. OK, les images clés sont prêtes et nous pouvons lancer l'animation. Nous avons besoin du nom de l' animation ruber anim. Ensuite, la durée sera de 2 secondes. De plus, nous avons besoin que l' animation soit infinie, alors elle sera linéaire. Comme vous pouvez le constater, le caoutchouc bouge et l' animation fonctionne correctement. Nous pouvons nous débarrasser de ce retour temporaire à la couleur à partir d'ici. Bien, nous devons ensuite créer l'animation du carré. Nous devons faire correspondre le mouvement du carré et du caoutchouc. Créons de nouvelles images-clés et appelons-les anime carrés. De 0 % à 20 %, nous devons déplacer le carré légèrement vers le bas à 0 %. Nous devons transformer translation y avec la valeur de cinq images. Ensuite, de 20 % à 50 % nous devons à nouveau déplacer le carré vers le bas. La valeur sera de 40 Ram. Dans ce cas, nous modifions la vitesse. Ensuite, à 50,60 %, nous déplacerons l'élément vers le bas, mais avec une vitesse différente, la valeur sera de 64,5 RAM Viennent ensuite 62 % où nous devons avancer carrément vers le haut. La valeur sera de 45 Ram. Après cela, nous aurons 80 % ou nous devrons déplacer l'élément vers le haut. Et également pivotée, la valeur sera dix. Nous devons également ajouter ici une rotation Z de 90 degrés. Enfin, à 100 %, nous devons à nouveau nous déplacer, éléments vers le haut et les faire pivoter. La valeur sera de cinq RAM. Très bien, passons à l'animation carrée. Allons-y et exécutons-le. Nous devons entendre le nom carré Anim, puis la durée de 2 secondes, puis à nouveau infini et linéaire. Comme vous pouvez le constater, tout allait bien. Et la seule chose que nous avons à faire est de créer les animations pour les sticks. Ils devraient être inclinés une fois que le carré touche le caoutchouc. Créons les cadres clés pour le joystick gauche. Je vais l'appeler Left Stick Anim. Pendant l'animation, nous devons faire pivoter le bâton selon l'axe z. À 0,30 %, nous ne ferons pas encore pivoter l'élément. Nous avons besoin d' une rotation de transformation avec une valeur nulle. Ensuite, à 50,65 %, nous ferons légèrement pivoter le bâton. La valeur sera de deux degrés. Enfin, à 80,1%, nous allons faire pivoter le stick pour revenir à sa position par défaut La valeur sera zéro. C'est bon, donc tout est prêt. Lancez l'animation ici. Le nom a laissé Stick animal. La durée sera de 2 secondes. Encore une fois, nous avons besoin de l' infini et du linéaire. Comme vous pouvez le constater, le bâton tourne. Mais ce n'est pas ce dont nous avons besoin ici. Il pivote à partir du centre car l'origine de la transformation est définie centre par défaut, nous devons la modifier. L'origine sera située en bas au centre. Très bien, comme vous pouvez le voir maintenant, tout va bien. Exécutons également l'animation pour le joystick droit. Je vais copier ce code et le coller ci-dessous. Changeons le nom dont nous avons besoin, right stick anim. Nous devons également modifier la valeur de la fonction de rotation Z. Il devrait faire moins deux degrés. Copions la propriété de l'animation et changeons le nom. D'accord, comme je peux le voir, tout fonctionne parfaitement. La seule chose que je veux faire est de l'attribuer au titre Wrapper Overflow car les sticks se déplacent légèrement l'extérieur du rappeur C'est bon, c'est ça. Enfin, nous avons terminé ce projet et j' espère qu'il vous a plu. À la prochaine. 5. Projet 2 - Page d'atterrissage: Dans cette vidéo, nous allons créer une page de destination animée en HTML et CSS. Allons-y et jetons un coup d'œil au projet terminé. Si nous rechargeons la page, vous verrez l'image d'arrière-plan en plein écran apparaître avec une belle animation Une fois affiché, il change de forme comme si le projet n'en était qu' à ses débuts, mais j'espère qu'il sera intéressant et qu'il vous plaira. Très bien, commençons. J'ai créé un nouveau dossier sur le bureau appelé Lending Page Animation, dans lequel j'ai un autre dossier pour les images. Allons-y et ouvrons ce dossier. Et VS code crée ensuite nos fichiers de travail pour HTML et CSS. Nous avons besoin d'index HTML et de StyleTSS. Ouvrez ensuite le fichier HTML à points d'index 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 Très bien, je vais d'abord changer le titre. Ce sera une animation de page de destination. Lions ensuite le fichier CSS. Je vais ouvrir le link tag. Ensuite, nous devons définir le chemin du fichier. OK, enfin, allons-y et exécutons le projet le navigateur avec un serveur en direct. Et puis placez l'éditeur et le navigateur comme ça. Nous sommes donc prêts à commencer. Tout d'abord, je vais créer un balisage HTML. Ouvrons le tag avec un conteneur de classe. Nous aurons deux éléments différents à l'intérieur du conteneur. Le premier sera l'atterrissage. Quant au second, je vais l'appeler PG. Très bien, disons à propos du balisage HTML. Allons-y et commençons à écrire du CSS. Tout d'abord, je vais créer des styles par défaut et réinitialiser. Je vais sélectionner chaque élément à l'aide d'un astérisque. Ensuite, je vais me débarrasser de la marge et du rembourrage par défaut Réglons les deux propriétés à zéro. Ensuite, je m' occuperai du conteneur. Sélectionnons-le et définissons-le en hauteur. La largeur sera de 100 % Quant à la hauteur, je vais la faire correspondre à 100 % de la partie visible. Changez également la couleur de fond. Je vais utiliser la valeur RGB 184-16-5119 Très bien, nous avons ici le conteneur avec une couleur de fond Asseyons-nous autour du conteneur, passons à autre chose et occupons-nous de l'atterrissage. Nous allons sélectionner ces éléments. Tout d'abord, définissons avec la hauteur. Je vais définir les deux propriétés à 100 %. Ensuite, définissons l'arrière-plan. Tout d'abord, je vais utiliser la fonction de gradient linéaire. Je vais passer ici deux valeurs RGBA. Les deux seront de couleur noire avec une opacité de 0,8. Ensuite, je vais définir le chemin de l'image Nous avons besoin de l'URL, puis des images du nom du dossier, et nous devons sélectionner PG. Pg également. Adhérons, ne répétons pas. En plus de cela, je vais définir la taille de l'arrière-plan. Ça va être couvert. Nous avons donc ici l'atterrissage avec une image de fond en plein écran. Passons à autre chose et occupons-nous du deuxième élément, qui est un PG. Cet élément couvrira l'atterrissage. Une fois que nous aurons statué sur la page, elle disparaîtra et le landing s'affichera. Tout d'abord, définissons la hauteur maximale. Je vais les faire tous les deux 100 %, puis changer la couleur de fond. Je vais utiliser ici la même valeur RGB que celle que nous avons utilisée pour le conteneur. OK, nous avons donc l'arrière-plan, mais pour le moment, il est placé sous le palier, et comme je l'ai dit, nous devons le placer au-dessus du palier. Pour cela, je vais utiliser les positions et la propriété d'index z. Tout d'abord, je vais régler la position sur absolue. Définissons ensuite les propriétés en haut et à gauche. Je vais les mettre à zéro pour les deux. Ensuite, nous avons besoin d'une propriété d'index dont la valeur est supérieure à zéro. Disons dix. Bien, comme vous pouvez le voir, l'arrière-plan couvre l' atterrissage et il est maintenant temps de créer l'animation dont nous avons besoin pour faire disparaître l'arrière-plan. Une fois la page rechargée, créons des cadres CSS Je vais l'appeler BG anim. Dans l'ensemble, nous aurons trois étapes différentes. Je vais diminuer l' échelle de l'élément, mais selon l'axe y à 0,50 %, l'échelle sera de un Ensuite, nous devons transformer l'échelle y avec la valeur un. Ensuite, de 50 % à 100 % l'échelle sera réduite à zéro. À 100 %, nous devons transformer l'échelle Y zéro, les images clés déjà. Et maintenant, nous devons appliquer ces tuiles à l'élément. Nous avons besoin d'une propriété d'animation. Ensuite, nous devons d'abord définir le nom de l'animation. Ce sera G any, alors nous avons besoin d'une durée de 2 secondes. Comme vous pouvez le constater, les éléments s'animent. Mais nous sommes confrontés à deux problèmes. L'élément disparaît au centre de la page. Cela se produit parce que par défaut, l'origine de la transformation est centrale, et nous devons la modifier pour le deuxième problème. Une fois que l'élément disparaît, il s'affiche à nouveau. Nous devons d'abord maintenir l'échelle à zéro. Changeons l'origine de la transformation. Nous devons faire en sorte que ce soit au top. Maintenant, un problème est résolu. En ce qui concerne le deuxième problème, nous devons ajouter à la propriété d'animation une valeur appelée forward. Il conserve tous les styles définis à la dernière étape de l'animation. Maintenant, comme vous pouvez le constater, tout fonctionne bien. Nous devons maintenant nous occuper de la deuxième animation. Nous devons changer la forme de l'atterrissage. Je vais le faire en utilisant l'une des propriétés CSS appelée Clip Path. En fait, je peux recommander l'un des sites Web. Cherchons Clip Path où vous pourrez jouer avec différentes formes. Vous pouvez récupérer le code CSS approprié à partir d'ici. Dans notre cas, nous avons une forme à sept points différents. Pour transformer une forme en une autre avec un effet de transition, les deux formes doivent avoir le même nombre de points. J'ai tout préparé, les valeurs. En fait, vous pouvez jouer avec différentes formes et valeurs. Cela dépend de vous. Je vais créer des cadres SK avec un nom global. Nous aurons trois étapes différentes à 0,50 % qui auront la même forme Utilisons le chemin du clip avec la fonction polygone. Je vais passer ici les valeurs suivantes. Le premier poly sera zéro à 50 %, puis nous aurons 70 % zéro. Le prochain sera 100 % zéro. Puis 100 % deux fois zéro, 100 % puis nous aurons zéro deux fois 30 % et zéro. En ce qui concerne les 100 %, nous devons modifier ces valeurs. Nous avons besoin d'un polygone de trajectoire de clip. Le premier point sera de 50 %, 4 %. Ensuite, nous aurons 70 %, 10 %, puis 95 %, 95 %, 87 % et 105 %, 15 % . Le dernier point sera de 31 %, 10 %. D'accord, les images clés Lancez l'animation. Définissons le nom des images clés prêtant n'importe quelle la durée sera de 4 secondes, comme dans le cas précédent dont nous avons besoin pour les années suivantes. Si nous rechargeons la page, l'élément changera de forme en douceur. En fait, je voudrais ajouter une dernière chose. Si nous examinons le projet terminé, nous verrons que l'image d'arrière-plan se déplace doucement vers le haut. Allons-y et ajoutons également cet effet. Nous devons définir la position de fond. Par défaut, il sera placé en haut du centre. Ensuite, nous devons le changer. Dans l'animation, nous avons besoin du centre en bas. Très bien, maintenant tout fonctionne parfaitement, et avec le projet, c'est terminé. À la prochaine. 6. Projet 3 - Animation de balle: Dans cette vidéo, nous allons créer un projet d' animation CSS. Le projet ne sera qu'un petit projet, mais je pense qu'il sera intéressant et que vous apprendrez de nouvelles choses sur les animations CSS. Allons-y et décrivons le projet. Nous avons ici une boule animée qui se déplace de haut en bas. Il touche les cases qui viennent des côtés gauche et droit. De plus, nous avons ici un arrière-plan en mouvement qui donne l'illusion que la balle se déplace vers le haut. OK, asseyons-nous à propos de ce projet. Allons-y et commençons à le créer. J'ai un nouveau dossier sur le bureau appelé Ball animation, dans lequel j'ai un autre dossier pour l'image d'arrière-plan. Allons-y, ouvrons ce dossier dans le code VS, puis créons nos fichiers de travail. Nous n'aurons que deux fichiers, index HTML de style CSS. Ouvrons le fichier HTML d'index et créons un document HTML de base. Je vais utiliser un point d' exclamation, puis il faut appuyer sur Haut ou sur Entrée Tout d'abord, changeons le titre. Je vais insérer votre animation de balle. Après cela, je vais lier les fichiers CSS, les balises open link et les fichiers d'insertion à un fichier CSS OK, enfin, allons-y et lançons le projet dans le navigateur. Pour cela, je vais utiliser l'un des packages de code VS appelé Live Server. Avant de commencer à écrire le code, je vais placer l'éditeur et le navigateur côte à côte. Donc, dans un premier temps, je vais créer un balisage HTML. Ouvrons le tag avec le wrapper de classe. Il inclura l'ensemble du contenu à l'intérieur de l'emballage, qui comportera trois éléments profonds différents Les deux premiers éléments profonds seront destinés aux carrés. Quant au troisième élément profond, ce sera la balle. C'est une balise profonde ouverte avec le bloc de classe, ce sera le nom de classe commun. Mais en plus de cela, nous avons besoin d'un cours individuel, disons du bloc 1. Dupliquons cette ligne de code et changeons le nom de la classe. Nous avons besoin du bloc deux. OK ? Ouvrons un autre tag profond avec la balle de classe. Très bien, passons au balisage HTML. Pour le moment, rien n' est visible ici car tous les éléments sont vides. Il est maintenant temps de commencer à écrire du CSS. Tout d'abord, créons des styles communs et par défaut pour chaque élément. Sélectionnons un Aster Risk. Je vais me débarrasser de la valeur par défaut, de la marge et du rembourrage. Réglons les deux propriétés à zéro. De plus, je vais à nouveau définir la taille de la boîte sur la zone de bordure, disons à propos des styles par défaut tout au long de ce projet Nous allons utiliser le RAM comme unité de mesure. Par défaut, un m est égal à 16 pixels. Je veux que ce soit dix pixels. Pour cela, nous devons diminuer la taille par défaut de l'élément HTML. Nous devons le fixer à 62,5 %. OK. Ensuite, allons-y et stylisons les éléments du corps. Je vais définir la largeur et la hauteur. Réglons avec 200 % En ce qui concerne la hauteur, je vais la placer à 100 % de la fenêtre d'affichage Réglons-le sur 200 VH. Ensuite, je vais m' occuper de l'emballage. Sélectionnons cet élément et définissons-le, je vais le définir avec 270. OK, je vais faire l'emballage carré. Pour cela, je vais utiliser l'une des propriétés CSS appelée ratio d'aspect. Si je le mets à un, cela signifie que l' emballage aura une hauteur égale à 70 m. Mais si je change la largeur, disons en ATM, alors la hauteur sera également ATM Je pense que cette propriété est très pratique. Allons-y et définissons le contexte. Définissons l'URL de l'image d'arrière-plan, et nous avons besoin du chemin de l'image. Nous avons un dossier appelé images et nous devons sélectionner Gng. Comme vous pouvez le voir ici, nous avons le contexte actuel, c'est tout à propos de l'emballage. Avant de passer à autre chose, je voudrais simplement placer l'emballage au centre de la page Pour cela, utilisons la grille CSS. Je vais régler l' affichage sur une grille. Ensuite, pour placer l'élément au centre, nous devons placer les éléments au centre. OK ? Comme vous pouvez le constater, l'élément est parfaitement placé au centre. Passons à autre chose. Pour travailler sur les cases, je veux dire les carrés qui apparaissent à gauche et à droite, car vous savez qu'ils ont un bloc de classe commun. Allons-y, sélectionnons-le et définissons la largeur. Je vais me mettre à 18 RAM. Je veux que ces éléments soient des carrés. Utilisons à nouveau le rapport hauteur/largeur avec la valeur un et changeons également la couleur d'arrière-plan. Je vais utiliser votre valeur RGB. 501-18-4184, OK. Nous avons ici les carrés. Allons-y et définissons les positions. Je vais régler la position en valeur absolue. Ensuite, afin de positionner l'élément en fonction de l'emballage, définissons la position sur une position relative Ensuite, je vais définir les positions des carrés séparément. Sélectionnons le premier bloc et définissons les propriétés en haut et à droite. Je vais fixer la première position à 16 RAM. Quant à la bonne position, elle sera de 44 RAM. Ensuite, je vais dupliquer ce code. Changeons le nom rapide. Nous avons besoin du bloc deux. La première position sera la même que pour la bonne position. Je vais le régler sur huit RAM. Bien, comme vous pouvez le voir, les éléments sont correctement positionnés. Il est maintenant temps de prendre soin du ballon. Sélectionnons-le. Tout d'abord, je vais définir la largeur. Réglons-le sur 12 RAM. Nous avons besoin de la même hauteur pour le ballon. Je vais utiliser à nouveau la propriété appelée rapport hauteur/largeur avec la valeur un. Et puis changeons la couleur de fond. Utilisons le RGB, 255-11-8118 Bien, arrondissons en utilisant un rayon de bordure avec la valeur 50 %. Ensuite, prenons soin de sa position Je vais régler la position sur absolue. Ensuite, je vais définir les propriétés en haut à gauche. La position gauche sera 29 Ram. Pour ce qui est de la première place, ce sera la 22e place. D'accord, c'est tout pour le ballon. Nous pouvons maintenant commencer la partie amusante. Je parle des animations. Commençons par les carrés. Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater, les éléments viennent du haut dans l'ordre. Au début, le carré de gauche descend , puis celui de droite. De plus, l'opacité des carrés change au cours de l'animation Bien, allons-y et créons les images clés CSS dans lesquelles nous devons définir les règles CSS qui seront appliquées aux carrés lors de l'animation. Les images clés comporteront différentes étapes. Je vais l'appeler bloc d'un m de 0 % à 30 % Je veux dire qu'au début de l'animation, le carré doit se déplacer de haut en bas Et nous devons également changer son opacité à 0 %. Je vais utiliser transform avec la fonction translate y comme valeur que je vais utiliser ici, -38 Nous devons également définir ici une fonction à zéro degré. Comme je l'ai dit, nous avons besoin d'une opacité de 0,5. Bien, à 30 %, l'élément se déplace vers le bas à sa position par défaut, toujours sans rotation Nous transformons, traduisons Y par zéro et faisons à nouveau pivoter z par zéro. Encore une fois, la prochaine étape sera de 40 %. À cette étape, carré conservera sa position, mais il tournera. Et nous augmenterons également l'opacité à 40 %. Nous devons transformer la translation Y avec zéro, avec une valeur de -180 degrés Nous devons également augmenter l'opacité. Passons de 40 % à l'étape suivante. Je veux dire qu'à 45 %, nous avons besoin des mêmes cellules parce que pendant ce temps, la balle doit être sur la case et nous devons l'attendre. Placez-le ici puis ajoutons 45 %. Bien, après cela, le carré devrait se déplacer vers le bas et disparaître. La prochaine étape sera de 55 %. À cette étape, nous devons transformer la translation Y avec la valeur 38 Ram. Nous avons également besoin de la rotation. Je fais pivoter C de -180 degrés. Nous devons également diminuer l'opacité. Réglons-le sur 2,5 D'accord, nous avons besoin que ce carré reste dans cette position. À la fin de l'animation, nous aurons besoin des mêmes styles de 55 % à 100 %. Ajoutons ici 100 %. D' accord, l'animation est prête. Allons-y et exécutons-le pour le premier carré, nous avons besoin de la propriété d'animation, puis nous devons définir le nom de l'animation. Je veux dire, choisis-en un. La valeur suivante sera la durée de 5 secondes. Ensuite, nous devons exécuter l' animation à l'infini. Nous devons donc insérer l'infini. Je vais rendre l' animation linéaire. Comme vous pouvez le constater, l' animation est en cours d'exécution. Mais en fait, ce n'est pas ce que nous voulons pour le moment. L'élément pivote en fonction du centre, car l'origine de la transformation est définie par défaut sur le centre. Dans notre cas, nous devons le placer en bas à droite. Utilisons transform origin et faisons-le en bas à droite. Maintenant, comme vous pouvez le voir, le carré se déplace correctement. Une fois qu'il s' éloigne de l'arrière-plan, nous avons besoin qu'il soit masqué. Pour cela, nous pouvons attribuer un trop-plein masqué au wrapper. C'est donc à peu près le premier carré. Nous avons également besoin de la même chose pour le second. En fait, je vais dupliquer l'intégralité des images clés. Remplaçons le nom que nous avons besoin de bloquer par le suivant. Nous devons nous débarrasser des signes négatifs à partir d'ici, car nous devons faire pivoter le deuxième carré dans le sens opposé. En outre, nous devons changer l'origine de la transformation. Dans ce cas, il faut en bas à gauche. Enfin, définissons la propriété d'animation. Nous devons changer ici le nom de l'animation. Cela va bloquer tout le reste, nous avons besoin ici d'un délai pour le deuxième carré. Faisons en 2,5 secondes en fait, ce n'est pas la version finale de cette animation. Nous apporterons ici un léger changement une fois que nous aurons terminé l'animation du ballon. Allons-y et commençons à travailler dessus. Jetons un coup d'œil au projet terminé. Comme vous pouvez le voir, la balle se déplace de haut en bas et change légèrement de forme. Allons-y et créons du CSS, des images clés pour le ballon. Je vais appeler ça du ball ending. Dans l'animation de la balle, nous aurons cinq étapes différentes allant de 0 % à 45 %. La balle se déplacera vers le haut et elle rétrécira légèrement à 0 %. Je vais utiliser la transformation, traduire Y avec la valeur -20 Ram. De plus, afin de réduire légèrement les éléments, je vais utiliser la fonction d'échelle. Nous avons besoin que vous passiez 0,8 comme valeur de la direction x, dans le cas de la direction y, ce sera un. Ensuite, de 45 % à l'étape suivante, la balle doit descendre. Et nous devrions également changer l'échelle à 45 %. Nous devons transformer, traduire Y avec la valeur de zéro. Nous devons également modifier l'échelle. Ce sera 0,9 et un. La prochaine étape sera de 50 %. Sur cette étape, la balle devrait descendre. Et nous devons aussi rétrécir la balle, mais dans ce cas verticalement à 50 %, nous devons transformer, traduire y avec la valeur deux Ram. L'échelle sera de un à 0,7. Ensuite, nous devons déplacer la balle vers le haut et réduire horizontalement à 60 %. Je vais utiliser transform translate Y avec la valeur moins dix Ram. Pour ce qui est de l'échelle, ce sera le point 9.1. Bien, après cela, nous aurons besoin de la dernière étape. Nous devons déplacer la balle vers le haut et la rétrécir horizontalement à 100 %. Nous devons transformer, traduire Y avec la valeur -20 Ram. Pour ce qui est de l'échelle, ce sera le point 8.1. D'accord, les images clés sont prêtes. Allons-y et appliquons ces règles à l'élément. Utilisons la propriété d'animation. Il nous faut ici le nom de la boule d'animation. Dans tous les cas, la durée sera de 2,5 secondes. De plus, l'animation doit fonctionner l' infini et elle sera linéaire Comme vous pouvez le voir, la balle s'anime, mais elle ne touche pas les cases Nous devons être à la hauteur de notre époque. Je vais ajouter un petit délai à l'animation. Cela va prendre 0,9 seconde. Maintenant, comme vous pouvez le voir, la balle touche les carrés. En un coup d'œil, tout fonctionne bien. Mais si nous rechargeons la page, la boule et le carré de droite s' afficheront comme dans un article, ce qui n'a pas l'air sympa Nous devons rendre l' ensemble de l'animation dynamique, que nous rechargions la page ou non Pour ce faire, nous pouvons manipuler le temps de retard. En général, si nous utilisons des valeurs négatives, la propriété de délai d'animation accélérera l'animation. Jetons un coup d'œil au projet terminé. Si nous rechargeons la page, vous verrez le carré droit s' éloigner de l'arrière-plan, ainsi que la balle se déplacer vers le haut depuis une position difficile Nous devons modifier les délais pour le deuxième carré. Ça va prendre -2,5 secondes. Maintenant, si nous rechargeons la page, nous verrons le carré droit s' éloigner de l'emballage En ce qui concerne la balle, si nous ajoutons ici le signe moins, elle s'animera une fois la page déployée Mais maintenant, comme vous pouvez le constater, il ne touche pas les cases. Je vais augmenter le délai. Réglons-le sur 1,5 seconde. Bon, c'est tout pour ce qui est des animations de la balle et des cases. Maintenant, nous devons nous occuper de l'arrière-plan Avant de commencer à travailler sur l'animation, je vais ajouter quelques styles d' arrière-plan au wrapper. Nous devons définir la taille de l'arrière-plan. Cette propriété prendra deux valeurs. La largeur de l' arrière-plan sera automatique. Pour ce qui est de la hauteur, je vais la régler à 70 m. Pour que ce soit clair, je vais ajouter une bordure à l'emballage Faisons-en un RAM, solide et rouge. En plus de cela, je vais définir la répétition en arrière-plan avec la valeur no repeat. Maintenant, si je change les valeurs de la taille de l'arrière-plan, disons à 50 RAM et 60 Ram, vous verrez que la largeur et hauteur de l' arrière-plan sont modifiées. C'est ainsi que fonctionne la propriété de taille d' arrière-plan. Revenons-y. 0,70 RAM. Nous l'utilisons ici parce que nous maintenons la qualité de l'image, elle ne rétrécit pas. Nous devons maintenant animer l'arrière-plan pendant l'animation Nous devons déplacer tout l'arrière-plan vers le bas. Et je vais le faire en utilisant la propriété appelée position d'arrière-plan. Tout d'abord, créons des images-clés avec le nom BG à 0 %. Je vais régler position d'arrière-plan au centre et à zéro. En ce qui concerne les 100 %, la position d'arrière-plan sera déjà au centre et à 70 % autour des images clés. Appliquons ces règles à l'emballage. Utilisez la propriété d'animation avec le nom d'arrière-plan Anim. Ensuite, la durée sera de 5 secondes. Nous avons également besoin ici de l' infini et du linéaire. Maintenant, comme vous pouvez le voir, l' arrière-plan se déplace vers le bas. Une fois qu'il bouge, il disparaît. Et nous n'en avons pas besoin, nous devons répéter l' arrière-plan, mais dans ce cas, selon l'axe y, la propriété de répétition de l'arrière-plan sera repeat Y. Maintenant, comme vous pouvez le voir, tout fonctionne parfaitement Débarrassons-nous de cette frontière à partir d'ici. Je veux aussi ajouter une petite chose aux carrés. Ajoutons-leur un petit effet d'ombre. Utilisons l'ombre de la boîte avec les valeurs 0,2, 0,2 m, puis 0,4 comme couleur. Je vais utiliser les AA. En fait, l'ombre va se trouver à l'intérieur de l'élément dont nous avons besoin ici à St. Je veux qu'elle soit l'élément dont nous avons besoin ici à St visible tout autour de la place. Nous avons également besoin ici d'autres valeurs. -0,2 Ram, -0,2 Ram, 0,4 Ram, puis la couleur AA, et encore une fois insérée. OK, enfin avec ce projet, c'est terminé. J'espère que c'était intéressant et que vous l'avez apprécié. À la prochaine. 7. Projet 4 - Terre animée: Dans cette vidéo, nous allons créer une Terre animée, que vous pouvez voir ici sur la page. Nous allons construire ce projet en utilisant du HTML et du CSS purs. Comme vous pouvez le constater, nous avons ici deux parties différentes. Sur le côté gauche, nous avons la partie sombre de la Terre. Sur le côté droit, il y a une partie claire de la Terre. La Terre elle-même tourne selon son axe Y. Très bien, voyons ce projet. Allons-y et commençons. J'ai créé un nouveau dossier sur le bureau appelé Animated Earth, dans lequel nous avons un autre dossier pour les images. Allons-y, ouvrons ce dossier dans le code VS, puis créons nos fichiers de travail pour le HTML et le CSS. OK, ouvrons le fichier HTML indexé et créons un document HTML de base Pour cela, nous devons placer ici un point d'exclamation, puis appuyer sur Haut ou sur Entrée. Allons-y. Tout d'abord, je vais changer le titre. Ce sera une Terre animée. Lions ensuite le fichier CSS, ouvrons la balise link et spécifions le nom du fichier. Très bien, allons-y et exécutons le projet sur le navigateur en utilisant le serveur en direct. Placez ensuite l'éditeur et le navigateur côte à côte. Nous sommes prêts à commencer à écrire le code. Dans un premier temps, je vais créer le balisage HTML. Ouvrons une balise p avec un wrapper de classe. À l'intérieur de l'emballage, nous aurons deux éléments différents, je veux dire la partie et la partie nocturne Ouvrons en profondeur les classes Earth puis dupliquons cette ligne de code et changeons le nom de classe dont nous avons besoin Très bien, voyons voir le balisage HTML. Allons-y et répondons pour écrire du CSS. Tout d'abord, je vais créer des styles de réinitialisation pour chaque élément. Allons-y, sélectionnons l'astérisque et supprimons la marge et le rembourrage par défaut de chaque élément Je vais mettre les deux propriétés à zéro tout au long de ce projet. Je vais utiliser le RAM comme unité de mesure. heure actuelle, un RAM équivaut à 16 pixels, et je veux le faire égal à dix pixels. Pour cela, nous devons diminuer la taille de police des éléments HTML. Passons à 62,5 %. Très bien, allons-y et personnalisons les éléments du corps Je vais définir avec la hauteur. La largeur sera de 100 % Quant à la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Il est maintenant temps de prendre soin de l'emballage. Allons-y et sélectionnons ces éléments. Tout d'abord, définissez sa largeur. Je vais le régler sur tram. Je veux la même hauteur pour l'emballage, ATM. Pour cela, nous pouvons utiliser l'une des propriétés du CS appelée rapport hauteur/largeur. Si nous le réglons sur un, cela signifiera que la hauteur de l'emballage sera le tram Mais si nous changeons la largeur, la hauteur sera modifiée en conséquence. OK. Ensuite, je vais définir la couleur de fond. Utilisons un arrière-plan temporaire. Je vais utiliser BB et arrondir l' élément en utilisant rayon de bordure de 50 %, d'accord ? Ensuite, je vais parfaitement placer l'emballage au centre Et je vais le faire en utilisant les positions. Nous avons besoin d'une position absolue. Ensuite, nous devons définir les propriétés du haut et de la gauche. Je vais définir les deux positions à 50 %. Ensuite, afin de placer parfaitement l'élément au centre, nous devons utiliser la fonction de transformation avec traduction. Et il faut passer ici -50 % pour les directions x et y. OK, alors c'est ça. En ce qui concerne l'emballage, il est placé au centre. Maintenant, je vais m' occuper de la Terre. Comme vous le savez, nous avons deux éléments différents, je veux dire, le jour et la nuit. Nous allons sélectionner les deux éléments en utilisant le nom de classe commun. Tout d'abord, je vais définir la largeur. Passons à 100 % En ce qui concerne la hauteur, je vais réutiliser la propriété appelée rapport hauteur/largeur avec la valeur un. Réglez ensuite la position sur absolue. Arrondissez également l'élément en utilisant un rayon de bordure 50 %. Maintenant, les deux éléments sont placés l'un sur l' autre sur ce cercle. Nous pouvons maintenant définir les arrière-plans pour les deux parties. Sélectionnons le premier, définissons l'image de fond. Définissons le chemin de l'image. Nous avons le dossier appelé images, et nous devons sélectionner Earth, JPG. Ici, nous avons l'image de fond. C'est la partie légère. Allons-y et faisons de même pour le rôle. En fait, je vais dupliquer ce code. Changeons le nom de classe dont nous avons besoin ici. Et changez également le nom de l'image dont nous avons besoin. Nous voyons maintenant ici l'image de fond de la pièce. Cela se produit parce que les deux éléments ont une position absolue et que la partie jour s'est retrouvée derrière la partie nuit. La prochaine chose que nous allons faire est de réduire la moitié de la nuit. Pour ce faire, je vais utiliser l'une des propriétés CSS appelée clip path. Je vais insérer ici les valeurs , puis je vais vous montrer où vous pouvez trouver les informations sur cette propriété. Nous avons besoin d'un polygone, les valeurs seront les suivantes. Nous avons besoin de zéro deux fois, puis de 50 % de zéro, puis de 50  % à 100 %, puis de 0,100 %. Comme vous pouvez le voir, la moitié est coupée Allons-y et recherchons Clip Path dans Google. C'est le site Web où vous pouvez jouer avec différentes formes. Une fois que vous avez obtenu la forme dont vous avez besoin, vous pouvez simplement récupérer le code CSS approprié à partir d'ici et l'utiliser dans votre projet. C'est un site très utile et vous pouvez le visiter. OK, allons-y et commençons à travailler sur l'animation. Je vais créer des cadres clés CSS avec le nom Earth. Quoi qu'il en soit, nous allons manipuler les positions d'arrière-plan. Nous n'aurons que deux étapes, de 0 % à 100 %. Nous modifierons la position de l'arrière-plan exactement de la même distance que celle de l'image par rapport à la largeur. À 0 %, la position d'arrière-plan sera nulle et centrale. Ensuite, à 100 %, la position d'arrière-plan sera 192 m, soit la largeur de l' image, puis le centre. Très bien, allons-y et appliquons ces tuiles aux éléments. Les deux parties auront la même animation. Nous avons besoin ici du nom de l'animation suivi de sa durée, qui sera de 25 secondes. Ensuite, je veux que l'animation fonctionne à l'infini. Nous avons besoin de l'infini, et l'animation sera linéaire, d'accord ? Comme vous pouvez le constater, l' animation fonctionne parfaitement et nous avons un bel effet jour et nuit. Avant de terminer cette vidéo, je vais ajouter quelques ombres à la terre. Pour cela, je vais utiliser le pseudo élément before. Sélectionnons le wrapper avant l'élément. En fait, je vais donner à cet élément exactement la même forme que l'emballage. Définissons le contenu. Il va être vide. Ensuite, je vais régler la position sur absolue. De plus, je vais définir les hauteurs, les deux à 100 %, puis utiliser une couleur de fond temporaire, BB. Comme vous pouvez le voir, l'élément s'est retrouvé derrière l'emballage Nous n'en avons pas besoin, nous devons placer devant la Terre Pour cela, je vais utiliser la propriété d'index Z et arrondir l' élément. La propriété d'index z va être égale à dix. Nous avons besoin ici d'une valeur supérieure à zéro. En ce qui concerne le rayon de la bordure, je vais le régler à 50 %. D'accord, débarrassons-nous de cet arrière-plan à partir d'ici. De plus, je vais également me débarrasser de l'arrière-plan de l'emballage Nous aurons deux ombres différentes, l'une autour de la Terre. De plus, nous aurons deux ombres différentes pour les parties nuit et jour. Utilisons box shadow avec les valeurs moins un Ram, moins un Ram, deux Ram et la couleur quatre. Ensuite, nous avons besoin d'un RAM, deux fois deux RAM, et de la même couleur. Maintenant, nous avons l'ombre autour de la Terre. Quant aux ombres à l'intérieur de l' élément, insérons-les ici. Insérez dix M05 Ram et la couleur noire. Ensuite, nous devons à nouveau insérer moins 1 m02 m comme couleur. Je vais utiliser le 933. C'est bon, alors c'est tout. Enfin, le projet est terminé. J'espère que c'était intéressant et que vous l'avez apprécié. À la prochaine. 8. Projet 5 - Fleur: Dans cette vidéo, nous allons créer la fleur avec du HTML et du CSS purs. Nous avons ici la version finale du projet où vous pouvez voir une fleur ordinaire avec quelques pétales et une tige. OK, allons-y et commençons à créer ce projet. J'ai préparé un nouveau dossier sur le bureau appelé flower, qui est actuellement vide. Allons-y, ouvrons ce dossier dans le code VS et créons nos fichiers de travail pour HTML et CSS. Ouvrez ensuite le fichier HTML d'index et créez un document HTML de base. Pour cela, nous devons placer ici un point d'exclamation , puis appuyer sur Haut ou sur Entrée Très bien, dans un premier temps, allons-y et changeons le titre. Ce sera une fleur, puis je vais lier le fichier CSS. Ouvrons le lien et précisons ici le nom du fichier CSS. OK, enfin, je vais exécuter le projet sur le navigateur en utilisant un serveur en direct. Mettons également l'éditeur et le navigateur côte à côte. OK, allons-y et commençons à créer un balisage HTML. Je vais ouvrir un tirailleur avec la fleur de la classe. Il inclura l' intégralité du contenu. Ensuite, nous avons besoin d'un autre tirailleur profond qui enveloppera les pétales ainsi que le cercle placé au milieu de la fleur Au total, nous aurons 12 pétales. Créons-les. En plus de cela, nous avons besoin du cercle. Ouvrons et tirons profondément sur le cercle de la classe. De plus, nous avons besoin d'une autre traction profonde à l'extérieur des pétales, qui sera une tige Très bien, parlons du balisage H mel. Passons à autre chose et commençons à écrire du CSS. Tout d'abord, je vais créer des styles de réinitialisation et par défaut pour chaque élément. Sélectionnons-les à l'aide d'un astérisque. Débarrassez-vous ensuite de la marge et du rembourrage par défaut. Réglons les deux propriétés à zéro. De plus, je vais définir la taille de la boîte sur celle de la bordure. D'accord, tout au long du projet, je vais utiliser le RAM comme unité de mesure. Par défaut, un M est égal à 16 pixels, et je souhaite convertir un M en dix pixels. Pour cela, nous devons diminuer la taille du défaut de l'élément HM. Nous devons le porter à 62,5% actuelle, il est temps de commencer à personnaliser l'emballage. Elément Deve Je suis dans la fleur, définissons la hauteur. Je vais régler sur 100 %. Quant à la hauteur, elle sera égale à 100 % de la fenêtre d'affichage Changez également la couleur de fond. Je vais utiliser ici la valeur RGB 236 232,226 OK, c'est tout pour la fleur pour le moment, passons à autre chose et prenons soin des Je suis dans le wrapper, définissons-le avec la hauteur. Je vais définir les deux propriétés sur deux RAM. De plus, je vais utiliser ici une couleur de fond temporaire. Disons vert. En fait, je vais placer l' élément au centre. Et pour cela, nous pouvons utiliser les livres Flax de CS. Utilisons display Flax, puis justifions le centre de contenu et un centre d'éléments de ligne. OK. Ensuite, je vais sélectionner la pagaie elle-même. Définissons sa hauteur intérieure. Je vais les régler tous les deux à 15 Rams. Utilisons ici une couleur de fond temporaire. Disons jaune. Ensuite, je vais définir la position des pétales. Réglons-le sur absolu. Nous devons positionner les éléments en fonction des éléments apparents. Nous devons nous positionner par rapport aux pétales. Définissons ensuite les propriétés du haut et de la gauche. Je vais les régler tous les deux sur cinq RAM. Bien, maintenant nous ne voyons ici qu'un seul pétale, mais tous les pétales sont placés les uns sur les autres C'est pourquoi nous n'en voyons ici que l'un d'entre eux. Après cela, je veux changer la forme des pétales en utilisant le rayon de bordure. Je vais arrondir l'élément tous les côtés sauf dans le coin inférieur droit. Réglons le rayon de bordure à 50 %, puis à nouveau à 50 %, puis à zéro , puis à 50 %. D'accord , après cela, je vais incliner les pétales dans les deux sens Je veux dire que X et Y se transforment en biais. Les valeurs seront de 23 degrés dans les deux directions. Comme vous pouvez le constater, les pétales sont asymétriques. Mais en plus de cela, nous devrons les faire pivoter si nous utilisons ici la fonction de rotation avec disons 30 degrés. Cela changera la forme du pétale. Et nous n'en avons pas besoin. Nous n'avons pas besoin d'utiliser ces deux fonctions simultanément. Afin d'éviter ce problème, je vais utiliser un pseudo élément before. Nous allons créer des pétales avec l'élément before et nous les inclinerons Quant à la fonction de rotation, nous l'utiliserons avec des éléments profonds. Sélectionnons le pétale avec l'élément avant. Tout d'abord, définissons le contenu pour le rendre vide. Ensuite, nous devons définir la largeur et la hauteur. Je vais définir les deux propriétés à 100 %, la position définie par Al sur absolue, puis créer un arrière-plan. Utilisez votre fonction de dégradé linéaire avec deux couleurs différentes, je veux dire F et F. Ensuite, je vais récupérer ces styles d' ici et les attribuer au précédent, à l'élément. Débarrassons-nous également de ces couleurs d'arrière-plan temporaires. C'est bon. Ensuite, je vais créer un petit effet d' ombre. Utilisons box shadow avec les valeurs 0,3 m, trois fois, puis la couleur DD. OK, les pétales sont donc personnalisés, et maintenant nous devons les faire pivoter. Nous devons sélectionner chaque pétale séparément et utiliser la fonction de rotation Allons-y et sélectionnons le premier. En fait, nous n'avons pas besoin de faire pivoter le premier pétale. Quoi qu'il en soit, je vais définir la fonction de rotation correspondante. La valeur sera zéro. Dupliquons ce code. Je vais faire pivoter le deuxième pétale de 30 degrés. Comme vous pouvez le constater, le deuxième pétale pivote, mais il pivote à partir du centre Cela se produit parce que, par défaut, l'origine de la transformation est définie sur le centre. Et nous devons le changer, en fait, nous devons le changer pour la pédale elle-même et aussi pour l'élément before do. L'origine de la transformation se situera en bas à droite. OK, le problème est réglé. Allons-y et définissons une fonction de rotation pour le reste des pédales La différence entre les valeurs de la fonction pivotée sera de 30 degrés. Pour la troisième pédale, nous avons besoin de 60 degrés. Ensuite, le prochain sera à 90 degrés. Pour la cinquième pédale, nous avons besoin de 120 degrés. Ensuite, le prochain sera à 150 degrés. Ensuite, pour la septième pédale, il fera 180 degrés. Ensuite, nous aurons 210 degrés. Pour la neuvième pédale, il fera 240 degrés. Ensuite, nous aurons 270 degrés. Pour la onzième pédale, nous avons besoin de 300 degrés. Pour le dernier élément, il fera 330 degrés. C'est bon. Maintenant, comme vous pouvez le constater, nous avons ici un bien meilleur résultat. Ensuite, je vais t'emmener hors du cercle. Il va être placé au centre de la fleur. Sélectionnons-le et définissons-le en hauteur. Je vais les porter à cinq RAM pour les deux . Ensuite, la couleur sera blanche. Changeons la position, rendons-la absolue. Pour détecter l'élément, je vais définir les propriétés du haut et de la gauche, toutes deux à 50 %. Nous devons donc transformer Translate avec -50 % à nouveau -50 %. Ensuite, je vais définir la bordure, elle sera de 0,1 RAM solide Et la couleur DDD arrondit également l'élément en utilisant un rayon de bordure de 50 %. Bien, parlons du cercle et avant de nous occuper de la tige, je vais créer un environnement en trois D. Et je veux faire légèrement pivoter la fleur dans un espace en trois D. Afin de créer un environnement en trois D, nous devons utiliser une propriété appelée perspective. Réglons-le sur 100 RAM. Faisons ensuite pivoter la fleur. Nous devons nous transformer. Faites pivoter X avec une valeur de 40 degrés. Très bien, nous pouvons maintenant passer à autre chose et personnaliser la tige. Sélectionnons-le, et tout d'abord, définissons cette position. Faites l'absolu. Ensuite, nous devons définir la largeur. Hauteur, la largeur sera de deux. Quant à la hauteur, je vais la faire 60 m. Définissons le fond. Utilisons la fonction de gradation linéaire. La direction de la transition de couleur va être de gauche à droite. Je vais utiliser ici trois couleurs. Le premier sera RGB, 14923592. Ensuite, nous utiliserons uniquement la couleur verte. Pour ce qui est de la troisième, nous devons utiliser ici la première fonction RGB avec les mêmes valeurs. OK, nous avons donc la tige, mais comme vous pouvez le voir, nous devons changer de position. Faisons-le en utilisant la fonction transform, translate Y, réglez-la sur 50 %. En plus de cela, je vais faire pivoter la tige selon l'axe z de sept degrés. La tige est tournée. Mais encore une fois, nous devons changer l'origine de la transformation. Dans ce cas, nous devons faire en sorte que ce soit au top. Réglons l' origine de la transformation en haut. Enfin, il faut placer la tige derrière les pétales. Pour cela, utilisons une propriété d'index avec moins un. OK, tout est fait en fait. Vous pouvez ajouter ici des effets ou des animations, et vous pouvez développer ce projet vous-même . À la prochaine. 9. Projet 6 - Animation atomique: Dans cette vidéo, nous allons créer une animation atomique avec du HTML et du CSS. Le projet va être un petit projet, mais je pense qu'il sera drôle et intéressant. Vous découvrirez de nouvelles astuces et techniques CSS. Comme vous pouvez le constater, nous avons ici un atome typique, que vous avez peut-être vu dans votre cours de chimie ou que vous êtes peut-être tombé sur l'un des logos les plus populaires de l'éditeur. Je parle de l'atome. Nous avons ici quelques cercles avec des balles qui se déplacent autour de la balle principale. Passons au projet, allons-y et commençons à travailler dessus. J'ai créé un nouveau dossier sur le bureau appelé Atom. Ouvrons-le dans le code VS et créons nos fichiers de travail pour HTML CSS. Ouvrez ensuite le fichier HTML d'index et créez un document HTML de base. Pour cela, je vais placer un point d'exclamation ici , puis appuyer sur Haut ou sur Entrée Tout d'abord, je vais changer le titre. Ce sera Atom. Lions ensuite le fichier CSS. Ouvrons la balise link, spécifiez ici le chemin du fichier. Enfin, je vais exécuter le projet sur le navigateur en utilisant le serveur live. Mettons l'éditeur et le navigateur côte à côte, comme ça, et commençons. Tout d'abord, je vais créer un balisage HTML. Ouvrons le deep tag, qui sera le wrapper. Dans l'ensemble. Nous aurons trois cercles et chacun d'entre eux aura une balle. Ouvrons, tirons profondément sur le cercle de la classe, encerclons-en un, puis ouvrons un autre tag profond À l'intérieur du cercle, nous avons besoin de votre classe Ball One. D'accord ? Dupliquons ce code et changeons les noms des classes. Nous avons besoin de cercles. Je veux dire le cercle deux et le cercle trois, ainsi balle deux et la balle trois. OK, passons au balisage HD. Nous pouvons maintenant commencer à écrire du CSS. Tout d'abord, je vais créer des styles de réinitialisation et par défaut pour chaque élément. Utilisons un risque Aster. Je vais me débarrasser de la marge et du rembourrage par défaut. Faisons en sorte qu'ils soient tous les deux nuls. De plus, je vais définir la taille de la boîte sur celle de la bordure. Tout au long de ce projet, nous allons utiliser le RAM comme unité de mesure. À l'heure actuelle, un RAM équivaut à 16 pixels. Comme la taille de police du code HTML est égale à 16 pixels, je souhaite convertir un RAM en dix pixels. Et pour cela, nous devons diminuer la taille de police de l'élément HTML. Nous devons le porter à 62,5 %. Bien, allons-y, répondons pour personnaliser les éléments du corps Sélectionnons-le et définissons-le avec la hauteur. Je vais régler avec 100 %. Quant à la hauteur, elle représentera 100 % de la fenêtre d'affichage Nous allons également changer la couleur d'arrière-plan. Utilisons votre valeur RGB, 46518. D'accord. Ensuite, je vais sélectionner le wrapper, définir sa largeur Cela va faire 60 m. Ensuite, nous avons besoin de la même hauteur. Je vais utiliser l'une des propriétés appelées rapport hauteur/largeur. La valeur 1 signifie que si nous augmentons la largeur de l' emballage, la hauteur augmentera également Utilisons également une couleur d'emballage temporaire, disons CC Voici l' emballage, je vais placer au centre de la page Pour cela, utilisons la grille CSS. Nous avons besoin d'une grille d'affichage, de placer les éléments au centre. Bien, après cela, je vais créer les cercles. Sélectionnons-les en utilisant un nom de classe commun. Tout d'abord, définissons la position. Je vais faire en sorte que ce soit absolu. Soit 40 RAM, il nous faut la même hauteur. Utilisons à nouveau le rapport hauteur/largeur avec la valeur 1. Ensuite, je vais utiliser une bordure avec une largeur plus élevée, disons 0,5 RAM. Ensuite, ce style va être abandonné. C'est la couleur. Utilisons zéro. De plus, arrondissez l' élément en utilisant un rayon de bordure de 50 %. D'accord, nous avons ici les cercles. Ils sont placés les uns sur les autres, c'est pourquoi nous ne voyons ici qu'un seul cercle. En fait, nous n'avons plus besoin de cet arrière-plan temporaire, éliminons-le et plaçons ensuite ces cercles. Le centre de l'emballage. En utilisant à nouveau, c'est la grille de C. Nous avons besoin d'une grille d'affichage et d'un centre de placement des éléments. Bien, maintenant nous devons placer chaque cercle dans cette position. Je veux dire, on devrait les alterner. Nous devons les placer dans un environnement tridimensionnel. Et pour cela, je vais utiliser l'une des propriétés CSS appelée perspective. Réglons-le sur 100 RAM. Bien, après cela, sélectionnons le premier cercle et faisons-le pivoter selon les axes y et x. Nous devons faire pivoter le premier cercle selon Y, x de 70 degrés. Quant à la direction x, elle sera de 40 degrés. Comme vous pouvez le constater, le premier cercle est pivoté. Faisons de même pour le reste des cercles. Dupliquons ce code. Changez le nom de classe dont nous avons besoin ici. Faites pivoter x avec une valeur négative de -40 degrés. Encore une fois, dupliquez ce code pour le troisième cercle, nous avons besoin de valeurs différentes. La rotation Y sera de 180 degrés. Quant à la rotation X, elle sera de 90 degrés. Les trois cercles sont pivotés, mais le troisième n'est pas visible pour le moment Pour le rendre visible, nous devons regarder l'espace en trois D un angle différent. Pour ce faire, nous pouvons utiliser l'une des propriétés du CS appelée origine de perspective. Nous devons le modifier selon les directions x et y. La première valeur va être de 76 % Quant à la deuxième valeur, je vais utiliser 27 %. Maintenant, je pense que c'est un bon angle pour regarder le projet et qu'un troisième cercle est visible Bien, maintenant il est temps de passer à autre chose et de commencer à travailler sur les balles. Chaque cercle comportera une balle. Tout d'abord, afin de partager également l'environnement à trois D pour les balles, nous devons utiliser un style de transformation dans lequel la valeur préserve trois D. Maintenant que nous pouvons créer les balles, sélectionnons-les en utilisant un nom de classe commun : ball. Je vais définir la largeur, faisons-en six RAM. Ensuite, nous avons besoin de la même hauteur. Utilisons à nouveau le rapport hauteur/largeur avec la valeur un. Je vais changer le fond d'écran. Dans ce cas, je vais utiliser le dégradé radial. Il mélange les couleurs depuis le centre. La première couleur sera RGB 13521424. Ensuite, la deuxième couleur sera RGB 44, encore une fois, 44167 Nous devons mélanger ces couleurs après 70 % Utilisons ici 70 % pour changer également le rayon, arrondir l'élément. C'est 72, 50 % OK, donc nous avons les balles ici. Et maintenant, je vais les alterner parce qu'ils ne sont pas très beaux pour le moment. Nous avons besoin de la même rotation pour les première et deuxième balles. Sélectionnons-les simultanément. Et faites-les pivoter de -90 degrés dans le sens du blanc Quant à la troisième balle, nous devons la faire pivoter dans les deux sens, Y et X. La rotation Y sera de 90 degrés, rotation de X sera également de 90 degrés. , nous avons maintenant de bien meilleurs résultats, mais les balles ne sont pas placées correctement. Nous devons changer de position. Réglons la position sur absolue, alors la position supérieure sera inférieure à trois rampes. En fait, les cercles devraient être placés au centre des balles. Nous avons besoin de quelques calculs pour la position de gauche. Utilisons la fonction calc. Nous avons besoin de 50 % moins trois béliers, soit la moitié de la largeur de la balle. Bien, les balles sont positionnées et nous pouvons maintenant commencer à travailler sur les animations. Nous allons déplacer tout le cercle, pas le ballon. Allons-y et utilisons des cadres clés CSS. Je vais créer des images clés CS pour le premier cercle. Appelons le cercle d' animation « un ». Nous allons suivre deux étapes différentes. À 0 %, nous avons besoin de la position par défaut dont nous avons besoin pour transformer, faire pivoter Y. De sept degrés et pivoter de x 40 degrés À 100 %, nous avons besoin des mêmes rotations. De plus, faites pivoter Z à 360 degrés. OK, allons-y et appliquons ces styles en utilisant la propriété d'animation. Nous avons besoin du premier cercle de noms. La durée sera de 2 secondes. De plus, nous devons exécuter l' animation à l'infini. Ça va être linéaire. Comme vous pouvez le voir, le cercle se déplace et la balle se déplace également avec le cercle. Mais en fait, ce n'est pas ce dont nous avons besoin pour le ballon. Je vais également exécuter les animations pour le reste des cercles, puis nous allons résoudre ce problème. Allons-y, copions ce code à partir d'ici et collez-le pour le deuxième cercle. Changeons le nom. Dans ce cas, il suffit de rendre les valeurs des fonctions de rotation x négatives, puis de récupérer l'animation. Changez le nom. Très bien, allons-y et faisons de même pour le troisième cercle. Dans ce cas, nous avons besoin ici de valeurs différentes. Changeons le nom alors. À 0 % de rotation, y sera de 180 degrés. Quant à la rotation X, elle sera de 90 degrés. Encore une fois à 100 %, nous avons besoin des mêmes rotations I, Y et X. De plus, nous devons ajouter ici la rotation Z avec la même valeur OK, nous avons donc besoin de la propriété d'animation avec le troisième cercle. Très bien, tous ces cercles sont animés et maintenant nous pouvons nous occuper des balles Nous avons également besoin des animations pour eux. Pendant l'animation, nous avons besoin que les balles soient exposées avec leur face avant. Nous devons les faire pivoter, nous devons les faire pivoter contre les cercles pendant l'animation. Les deux premières balles auront la même animation. Utilisons SSKEFrames. Pour le bal nominatif, nous allons suivre deux étapes. À 0 %, nous avons besoin rotation selon le y x de -90 degrés. À 100 %, nous avons besoin de la même rotation. De plus, faites pivoter x de -360 degrés. Ensuite, nous lançons la boule d'animation m 2 secondes, infinie et linéaire. Maintenant, comme vous pouvez le constater, nous avons ici un bien meilleur résultat. Nous avons utilisé ici la fonction de rotation x à -360 degrés. En fait, cela compensera toujours le mouvement du cercle. OK, faisons de même pour la troisième balle. Récupérons ce code à partir d' ici et apportons quelques modifications. Je vais changer le nom, ce sera les deux. Ensuite, nous devons faire pivoter Y de 90 degrés. De plus, nous avons besoin de la rotation selon l'axe X. Avec la même valeur, à 100 %, nous devons faire pivoter Y de 90 degrés. Faites ensuite pivoter X. Afin de déplacer la balle sur tout le cercle et de maintenir la bonne position, nous devons la faire pivoter de 450 degrés car elle est déjà tournée de 90 degrés. 90 degrés plus 360 degrés feront 450 degrés. OK, utilisons l'animation. Nous avons besoin à la fois de 2 secondes quelconques, infinies et linéaires. OK, maintenant tout fonctionne bien. Nous devons juste nous occuper de la balle principale. Nous allons le créer en utilisant le pseudo élément before. Je veux dire avant le troisième cercle. Nous utiliserons le pseudo élément before car il nous aidera à gérer le bon ordre des éléments. Tout d'abord, je vais arrêter l'animation pour le troisième cercle ainsi que pour la balle afin de faciliter le processus de travail. Sélectionnez ensuite le troisième cercle avant. Définissons le contenu, rendons-le vide. La largeur sera de 12 RAM. Comme nous avons besoin de la même hauteur. Nous utilisons à nouveau le rapport hauteur/largeur avec la valeur un. L'arrière-plan sera, encore une fois, un dégradé radial. La première couleur sera le blanc. Nous avons besoin de RGB 25053 fois. Ensuite, la deuxième couleur sera, encore une fois, la valeur RGB 55132146 Nous devons mélanger ces couleurs après 50 % afin de rendre l'élément visible. Définissons la position, rendons-la absolue. Nous avons ici l'élément «   before suit ». En fait, nous devons le rendre arrondi. Utilisons le rayon de la bordure, 50 % Nous devons changer sa position. Mettons-le au centre. Nous avons besoin de la position gauche à 50 % des 50 % supérieurs. Pour placer parfaitement l'élément au centre, nous avons besoin de la fonction de transformation et de translation -50 % et -50 %. Maintenant, l'élément est correctement positionné et la seule chose à faire est de le faire pivoter Je vais faire pivoter l' élément selon l' axe X de 90 degrés. Très bien, asseyons-nous à propos de la balle principale. Revenons à l'animation du troisième cercle. Comme vous pouvez le constater, la boule principale tourne également. Et nous n'en avons pas besoin. Nous devons le maintenir tel quel. Pour cela, créons une nouvelle animation avec le nom main ball. Et nous allons procéder en deux étapes. À 0 %, nous avons besoin de la position par défaut. Nous devons traduire -50% à 50% et faire une rotation de x 90 degrés. En ce qui concerne les 100 % dont nous avons besoin ici, les mêmes valeurs plus une rotation de -360 degrés. Nous utilisons ici la même technique que dans les cas précédents. Exécutons le plan principal de l' animation, 2 secondes, infini et linéaire. Très bien, maintenant tout fonctionne bien. Avant de terminer cette vidéo, je vais faire un certain nombre de choses. Diminérons la largeur des bordures, passons-la à 0,1. De plus, je vais utiliser un délai pour la première animation du cercle. Utilisons -1 seconde. En fait, cette valeur négative signifie que l' animation manquera la première seconde et sera exécutée directement à partir de la deuxième seconde lors de la première exécution. Très bien, nous en avons enfin terminé avec ce projet. J'espère que cela vous a plu et que vous avez appris de nouvelles choses. À la prochaine. 10. Projet 7 - Hélicoptère: Dans cette vidéo, nous allons construire un hélicoptère avec du HTML et du CSS. Comme vous pouvez le constater, nous avons ici un effet de vol. L'hélicoptère survole la ville, les pales bougent. Cet hélicoptère entier est créé avec du HTML et du CSS, et en fait il ne s'agit pas d'une image. OK, tout tourne autour du projet. Allons-y et commençons à le créer. J'ai préparé un nouveau dossier sur le bureau appelé Helicopter, dans lequel nous avons un autre dossier pour les images. Allons-y, ouvrons ce dossier et ce code BS et créons nos fichiers de travail pour HTML et CSS. Ouvrez ensuite le fichier HTML d'index et créez un document HTML de base. Mettons ici un point d' exclamation, puis appuyons sur le bouton haut ou sur Entrée Très bien, je vais d'abord changer le titre. Ce sera un hélicoptère. Lions ensuite le fichier CSS, ouvrons la balise link et spécifions ici le nom du fichier. Très bien, enfin je vais exécuter ce projet sur le navigateur en utilisant le serveur live. Plongeons l'éditeur et le navigateur. Très bien, allons-y et commençons à créer le balisage HDML. Ouvrons le deep tag, qui sera le conteneur. Ensuite, nous avons besoin d'un autre remorqueur de type hélicoptère. Il comprendra toutes les pièces de l'hélicoptère. Le premier sera une assiette, qui comprendra le plat principal. Ensuite, nous aurons le must, puis le poste de pilotage. Ensuite, nous aurons des skis d'atterrissage. Nous aurons deux patins d'atterrissage et ils porteront les noms de classe communs Landing Skid ainsi que les classes individuelles Landing Skid 1 et Landing Skid Bien, après cela, nous aurons un peigne à queue. Ensuite, la partie suivante sera la nageoire caudale. Enfin, nous avons besoin ici d'un tail rotter. OK, alors passons au balisage HTML. Passons à autre chose et commençons à écrire du CSS. Tout d'abord, je vais commencer à écrire quelques styles de réinitialisation et par défaut. Nous allons sélectionner chaque élément à l'aide d'un risque. Je vais me débarrasser de la marge et du rembourrage par défaut. Réglons les deux propriétés à zéro. Ensuite, je vais également définir la taille de la boîte sur la zone de bordure. Tout au long de ce projet, nous allons utiliser le RAM comme unité de mesure. À l'heure actuelle, un RAM équivaut à 16 pixels. Et je veux convertir une RAM en dix pixels. Pour cela, nous devons réduire la taille de police de l'élément H demil, et nous devons la porter à 62,5 %. Bien, passons à autre chose et prenons soin des éléments du corps Je vais définir sa hauteur. La largeur sera de 100 % Quant à la hauteur, je vais la faire correspondre à 100 % de la fenêtre d' affichage et également changer la couleur de fond Je vais utiliser ici, vert clair. Bien, après cela, je vais personnaliser le conteneur. Sélectionnons-le et définissons sa hauteur. La largeur sera de 150 Rams de hauteur. Je vais faire 80 Rams. Changez la couleur de fond. Je vais utiliser ici la valeur RGB 88179253. Bien, nous devons placer le conteneur au centre de la page, et pour cela, utilisons une grille CSS. Nous avons besoin d' une propriété d'affichage avec la grille de valeurs. Placez ensuite les objets au centre. OK, c'est tout pour le conteneur pour le moment, nous nous en occuperons un peu plus tard. Ensuite, je vais commencer à construire l'hélicoptère. Allons-y, sélectionnons l'élément wrapper deve et définissons qu'il se trouve dans les limites de sa hauteur La largeur sera de 80 RAM. Pour ce qui est de la hauteur, je vais faire 60 Ram. Et changez également la couleur de fond, rendez-la blanche. Ensuite, je vais placer l'hélicoptère au centre du conteneur. Encore une fois, je vais utiliser une grille CSS. Nous avons besoin d'une grille d'affichage et d'un centre de placement des éléments. OK, la première partie que je vais créer est une lame. Sélectionnons-le. Définissez-le avec la hauteur. La largeur sera de 40 RAM. Pour ce qui est de la hauteur, je vais en faire deux Ram. Et changez également la couleur de fond, rendez-la noire. Voici l'assiette. Allons-y et changeons de position. Pour cela, je vais utiliser la position absolue. En fait, nous aurons besoin d' une position absolue pour chaque pièce. Sélectionnons tous les développements à l'intérieur de l'hélicoptère. Réglez la position 2 absolue. Nous positionnerons les éléments en fonction du développement du wrapper. Je parle de l'hélicoptère, nous avons besoin d'une position relative pour cet élément. OK, changeons la position de la lame. Je vais régler la propriété gauche à 20 RAM. Quant à la première place , elle sera de 15 RAM. Bon, parlons de la lame pour le moment. En fait, nous utiliserons trois effets en D pour certaines parties de l'hélicoptère. Nous reviendrons sur la lame plus tard. Ensuite, nous avons le rotor principal. Définissons sa hauteur intérieure. La largeur sera de cinq RAM. Pour ce qui est de la hauteur, je vais en faire deux Ram. Changeons la couleur de fond. le moment, je vais utiliser la couleur rouge, mais ensuite nous la changerons également. Définissons la position gauche, faisons-en 17,5 RAM Bien, passons à autre chose et personnalisons la partie suivante qui sera le poste de pilotage. En fait, cet élément sera l'ensemble de la cabine de l'hélicoptère et pas seulement la fenêtre. Définissons avec la hauteur. Je vais régler la largeur à 20 RAM. Ensuite, la hauteur sera de dix Ram. Changeons de position. Réglons la propriété supérieure à 18,5 RAM. Ensuite, la position de gauche sera de 30 Ram. Changez également la couleur de fond, rendez-la noire. OK, maintenant nous devons nous occuper de la forme du poste de pilotage. Il va être arrondi et nous allons le faire en utilisant le rayon de bordure. Le coin supérieur gauche sera 50 %, puis le coin supérieur droit 40 %, le coin droit 40 %. Nous avons besoin de la même chose pour le coin inférieur. Bien, après ça, je vais prendre le poste de pilotage dans lequel je me trouve. La fenêtre le créera à l' aide d'un élément before set. Sélectionnons le poste de pilotage avant d'utiliser l'élément. Tout d'abord, nous devons définir le contenu. Faisons-le vide. Ensuite, je vais définir la largeur et la hauteur. La largeur sera de huit RAM. Ensuite, nous avons besoin de hauteur, ce sera cinq RAM. Changeons également la couleur d'arrière-plan, faisons-la également, définissons la position sur absolue. D'accord, nous devons maintenant modifier légèrement la position de l'élément et l' arrondir pour l'adapter à la cabine. Réglons la propriété supérieure à 0,2 RAM. Ensuite, pour arrondir l'élément, je vais utiliser à nouveau le rayon de bordure. Nous avons besoin de 100 % puis de zéro, puis de 40 % à nouveau de zéro. OK. C'est tout pour le poste de pilotage. Ensuite, je vais personnaliser les skis d'atterrissage. Comme vous le savez, nous avons deux kits d'atterrissage, ils ont un nom de classe commun Utilisons-le et sélectionnons les deux éléments. Tout d'abord, je vais définir la hauteur gagnée. Réglons avec 223 Ram, alors la hauteur sera de dix Ram. Modifiez également la couleur de fond. Je vais utiliser le rouge. Ensuite, nous allons le changer. Nous créerons les véritables sites d'atterrissage à l'aide de bordures. Nous avons besoin d'une bordure inférieure avec des valeurs d'un solide RAM, la couleur sera noire. Ensuite, nous avons besoin d'une bordure gauche avec des valeurs d'un solide RAM. Transparente. Nous avons également besoin de border right, qui aura les mêmes valeurs. Enfin, afin de modifier la forme de l'élément, utilisons à nouveau le rayon de bordure. Les valeurs seront 002,5 Ram et cinq. D'accord, nous avons maintenant un bien meilleur résultat. En fait, nous n'avons plus besoin de cette couleur de fond rouge. Retirons-le. Ensuite, nous devons positionner les éléments au bas de la cabine. Sélectionnons donc Landing, Ski One. Définissez les propriétés en haut et à gauche. La première place sera 22 Ram. Quant à la position de gauche, elle sera de 26 RAM. Dupliquons ce code, changeons le nom. La première position sera de 20,5 Ram. Quant à la position de gauche, elle sera de 26,5 RAM. Très bien, les kits d'atterrissage sont positionnés et nous devons maintenant les connecter à la cabine. Pour cela, je vais utiliser les éléments avant et après. Sélectionnons-les tous les deux ensemble. Tout d'abord, nous devons définir le contenu. Il va être vide. Ensuite, nous avons besoin de largeur et de hauteur. La largeur sera d'un RAM. Quant à la hauteur, je vais la régler à cinq RAM. Changeons également la couleur d'arrière-plan, rendons-la noire et définissons la position sur absolue. Très bien, maintenant nous devons changer de position. En fait, la position inférieure des deux sera mise à zéro. Mais en plus de cela, nous devons définir une position gauche pour chaque élément séparément. Sélectionnons le plan d'atterrissage avant de régler la position gauche sur huit RAM Ensuite, je vais copier ce code. Nous avons besoin d'un, nous devons régler la position gauche à 18 Ram. Très bien, donc avec les plans d'atterrissage, c'est terminé. Et la prochaine partie que nous allons personnaliser est un peigne à queue. Encore une fois, je vais définir la largeur et la hauteur. La largeur sera de 25 RAM, puis la hauteur sera de deux RAM. Et changez également la couleur de fond, rendez-la noire. OK, nous avons donc le cône arrière. Allons-y et changeons de position. Je vais régler la propriété supérieure à 22 RAM. La position de gauche sera alors 47 Ram. Enfin, je vais modifier la forme des éléments en utilisant à nouveau le rayon de bordure. Nous avons besoin ici des valeurs zéro, 100 %, 100 % et zéro. Très bien, asseyons-nous à propos de la queue, puis de la nageoire caudale. Sélectionnons-le et définissons-le d'abord avec la hauteur. La largeur sera de deux Ram, puis la hauteur sera de huit Ram. Encore une fois, nous avons besoin d'une couleur de fond noire. OK, nous avons donc la nageoire caudale. Allons-y et changeons de position. Définissons les propriétés du haut et de la droite. La première place sera 19 Ram. Quant à la bonne position, fixons-la à 7,5 RAM. Enfin, modifions la forme de élément en utilisant le rayon de bordure. Les valeurs seront de 100 % 00 à 100 % OK, donc l'aileron arrière est prêt et nous devons maintenant nous occuper de la dernière partie de l'hélicoptère, le rotor de queue Définissons la largeur et la hauteur. La largeur sera d'un RAM. Pour ce qui est de la hauteur, je vais faire neuf Ram. Nous devons également changer la couleur de fond. Faisons en sorte qu'il soit noir. Ensuite, nous devons changer de position. Définissons les propriétés du haut et de la droite. La première place sera 18,5 Ram. Quant à la bonne propriété, définissons-la sur 6,5 RAM. Bien, avant de faire voler l'hélicoptère, nous devons personnaliser le mât qui relie la cabine à la lame Nous allons sélectionner cet élément. Tout d'abord, définissons sa hauteur intérieure. Je vais régler avec un bélier, puis la hauteur sera de deux béliers. Changez ensuite la couleur de fond, rendez-la noire. Alors changeons la position dont nous avons besoin. Propriété de gauche avec la valeur 39,5 Ram, puis position supérieure avec la valeur 17 Ram D'accord, toutes les pièces sont personnalisées et maintenant nous devons faire voler l'hélicoptère. Commençons par la lame. Comme nous l'avons dit, nous avons besoin de trois effets en D pour la lame. Pour cela, nous devons créer un environnement tridimensionnel. Pour ce faire, nous devons utiliser l'une des propriétés du CS appelée perspective. Réglons-le sur 100 RAM. Bien, après cela, nous devons faire pivoter la lame. Pour cela, je vais effectuer une transformation avec la fonction rotate x. Nous devons faire pivoter l'élément selon la direction x. La valeur sera de 90 degrés. La lame est tournée et il faut maintenant faire tourner le rotor principal Mais avant cela, nous devons partager environnement en trois D pour le rotor principal. Pour ce faire, nous devons attribuer au style de transformation de la lame la valeur « conserver trois D. Maintenant, nous pouvons faire pivoter le rotor principal ». Transformons la rotation x avec la valeur -90 degrés à droite. Ensuite, je vais ajouter une petite pièce au rotor principal. Afin d'obtenir un bien meilleur effet, nous devons faire en sorte que le rotor principal ressemble à une croix. Et je vais le faire en utilisant l'élément before. Nous allons sélectionner le rotor principal avec l'élément situé avant. Tout d'abord, je vais définir le contenu, faisons-le vide. Ensuite, nous devons définir la largeur et la hauteur. Je vais rendre les deux propriétés à 100 %. Ensuite, nous changeons la couleur de fond. Je vais utiliser ici une couleur de fond temporaire. Disons aussi bleu. Réglons la position sur absolue. Nous avons ici les quatre éléments et je vais les faire pivoter. Transformons la rotation y, la valeur sera de 80 degrés, d'accord ? En outre, nous avons également besoin d'un environnement en trois D pour cet élément. Pour cela, nous devons utiliser le style de transformation pour le rotor principal avec la valeur de conservation de trois D. Je vais également me débarrasser de ce fond blanc à partir d'ici. En plus de cela, je vais changer les couleurs du rotor principal. Faisons en sorte qu'il soit noir. Très bien, il est temps d'animer la plaque. Nous devons faire pivoter cet élément. Créons des cadres clés CSS. Le nom sera Blade An ensemble, nous aurons deux étapes, 0 % et 100 %. À 0 %, nous avons besoin fonction de transformation, de rotation X avec une valeur de 90 degrés. Faites également pivoter Z avec zéro tout au long de l'animation. Nous devons faire pivoter les éléments selon la direction z, de 0 à 360 degrés, à 100 %. Nous devons transformer la rotation x 90 degrés et la faire pivoter Z de 360 degrés. OK, les images clés sont prêtes. Allons-y et lançons l'animation. Tout d'abord, il nous faut ici le nom des images-clés. Lame n'importe laquelle, alors la durée sera de 1 point de seconde. L'animation doit fonctionner à l'infini, nous avons donc besoin ici de l'infini De plus, l' animation sera linéaire. OK ? Comme vous pouvez le voir, la lame avec le rotor principal est en mouvement. Maintenant, nous avons également besoin de la même chose pour le rotor de queue. Créons des cadres clés dans un rotor arrière. Donc, nous devons faire pivoter l'élément selon la direction x, 0-360 degrés À 0 %, nous devons transformer la rotation x par zéro. Ensuite, à 100 %, nous devons transformer la rotation x à 360 degrés. Allons-y et lançons l'animation. Le nom sera le rotor arrière Anim. Ensuite, nous avons besoin d' un point de durée d'une seconde. Encore une fois, infini et linéaire. Bien, l'hélicoptère vole et maintenant nous devons nous occuper de l' arrière-plan du conteneur. Ajoutons ici une image, nous avons besoin d'une URL. Ensuite, un dossier appelé images, et nous devons sélectionner Gng Nous avons ici le contexte, mais il ne semble pas bon. Nous devons modifier la taille de l'arrière-plan. Je vais lui donner la même taille que le contenant. La taille de l'arrière-plan aura deux propriétés, 150 RAM puis automatique. Nous avons maintenant les meilleurs résultats. Mais comme vous pouvez le constater, l'image de fond est répétée. En fait, nous devons le répéter uniquement horizontalement. Ajoutons ici la répétition x. Maintenant, l'image n'est plus répétée, mais nous devons changer sa position. Nous devons le déplacer vers le bas de 100  %. Définissons la position d' arrière-plan avec les valeurs 0,1%. D'accord, maintenant l'arrière-plan est beau et maintenant je vais y ajouter une animation Créons des cadres célestes avec le nom BGN. Nous aurons deux étapes différentes, 0 % et 100 %. Pendant l'animation, nous devons changer la position de l' arrière-plan à 0 %. La position par défaut sera 0,100 %. Quant au 100 % la position d'arrière-plan sera 150 me, cent pour cent Lancez l'animation. Nous avons besoin du nom BG Anim. La durée sera alors de 10 secondes. Encore une fois, l'animation doit s'exécuter à l'infini. De plus, ça devrait être linéaire, d'accord ? Comme vous pouvez le constater, le fond bouge et nous avons ici un bel effet de vol. En fait, nous en avons presque terminé avec ce projet. J'ai juste besoin de faire deux ou trois choses. Je vais faire légèrement pivoter l' hélicoptère. Je vais le faire pivoter dans le sens y. La valeur sera de -15 degrés. Afin de rendre le projet plus agréable, je vais modifier la forme du contenant Faisons-le en utilisant le rayon de bordure. Nous avons besoin ici de 0,5 RAM et 100 Ram. Bon, c'est tout. Enfin, avec ce projet, nous en avons terminé. J'espère que cela vous a plu et qu'il vous a été utile. À la prochaine. 11. Projet 8 - Bicyclette: Très bien, dans cette vidéo, nous allons construire un prochain projet qui est un vélo. Comme vous pouvez le constater, nous avons ici un vélo typique. Il déplace les roues et les pédales pivotent à l'aide d'animations CSS Toutes les pièces sont créées à l'aide du langage HTML. Nous n'utilisons aucune des images ici. Très bien, allons-y et commençons à construire le projet. J'ai créé un nouveau dossier sur le bureau appelé Bicycle, qui est actuellement vide. Ouvrons-le dans le code VS et créons nos fichiers de travail pour HTML et CSS. Ouvrez ensuite le fichier mail d'index et créez un document Ml basique Pour cela, nous devons placer ici un point d'exclamation, puis appuyer sur le haut ou sur Entrée Tout d'abord, je vais changer le titre. Ce sera du vélo. Lions ensuite le fichier CSS. Ouvrez le lien et spécifiez ici le nom du fichier CSS. Enfin, je vais exécuter le projet sur le navigateur en utilisant le serveur live. Placez ensuite l'éditeur et le navigateur comme si, d'accord, nous étions prêts à commencer à créer le projet. Je vais commencer par le balisage HTML. Ouvrons le remorqueur profond avec le vélo de classe. Il inclura toutes les différentes parties du vélo. Commençons par la roue avant du deep tug. Cet élément comportera deux classes différentes, l'une pour les styles courants et l'autre pour les styles individuels. Nous avons besoin d'une roue et d'une roue avant. Nous aurons également une roue arrière. Dupliquons cette ligne de code et changeons le nom de la classe. Vient ensuite la fourche avant. Cet élément inclura ensuite, nous aurons le guidon, puis Ensuite, nous aurons des cadres, le cadre un, le cadre deux. La prochaine partie sera un set tube, qui inclura d'autres développements. Ensuite, nous aurons des pédales à chaîne et du brouillard arrière Nous pouvons donc faire en sorte que toutes les pièces soient créées et nous devons maintenant commencer à les styliser. Tout d'abord, créons des styles de réinitialisation et par défaut. Je vais sélectionner chaque élément à l'aide d'un astérisque. Débarrassons-nous de la marge par défaut et en mettant les deux propriétés à zéro. De plus, je vais définir la taille de la boîte sur celle de la bordure. Tout au long de ce projet, nous utiliserons le RAM comme unité de mesure. Par défaut, un Ram équivaut à 16 pixels, et je veux convertir un Ram en dix pixels. Pour cela, nous devons diminuer la taille de police de l'élément HTML. Réglons-le à 62,5 % OK, passons à autre chose. Réponse Pour travailler sur l'élément du corps, je vais définir sa hauteur intérieure. La largeur sera égale à 100 % de la hauteur du corps. Je vais faire en sorte que ce soit 100 % de la fenêtre d'affichage. Ensuite, je vais personnaliser le vélo. Définissons sa largeur et sa hauteur. La largeur sera de 85 Ram, puis la hauteur sera de 60 Ram. Je vais également changer la couleur de fond. Utilisons ici une couleur temporaire. OK. Maintenant, je vais donner mon accord au vélo et à la page. Pour cela, utilisons la grille CSS. Nous devons attribuer à l'élément du corps une grille d'affichage et placer les éléments au centre. Très bien, le vélo est centré et je vais maintenant commencer à personnaliser les différentes parties du vélo. Allons-y et commençons par les roues. Définissons la largeur, elle sera de 30 RAM. Ensuite, je vais régler la hauteur sur la même valeur et donc utiliser l'une des propriétés appelées rapport hauteur/largeur. Nous devons le régler sur un. Dans ce cas, si nous augmentons ou diminuons la largeur, la hauteur augmentera ou diminuera automatiquement. OK, changeons la couleur de fond, rendons-le noir. De plus, je vais arrondir l'élément en utilisant le rayon de bordure, 50 % Ensuite, je vais m' occuper de la position. En fait, nous devons positionner toutes les pièces individuellement. Je veux dire, nous devons positionner en valeur absolue chaque élément du vélo. Par conséquent, sélectionnons chaque développement et assignons-leur une position absolue. De plus, nous devons positionner les éléments en fonction du vélo. Je veux dire l'élément parent, assignons-lui une position relative. Bien, définissons ensuite une position inférieure pour les roues. Je vais le mettre à zéro, puis je vais définir la bordure. Réglons la largeur, faisons-en 0,5 RAM. La frontière va être brisée. Utilisons également la couleur noire. Comme vous pouvez le constater, la bordure n'est pas visible, la couleur noire la recouvre. Pour résoudre ce problème, nous devons utiliser l'une des propriétés appelées clip d'arrière-plan avec une zone de contenu de valeur. Très bien, asseyons-nous au volant maintenant. Ensuite, nous devons créer cette partie grise à l'intérieur de la roue. Pour ce faire, nous utiliserons un pseudo-élément after. Sélectionnons Wheel avec le pseudo élément suivant. Tout d'abord, je vais définir le contenu. Il va être vide. Réglons avec 224 RAM. Encore une fois, je vais utiliser le rapport hauteur/largeur avec la valeur un, puis utiliser une couleur d'arrière-plan temporaire. Supposons que le rouge donne également une valeur absolue à la position. Ensuite, je vais créer l' élément qui l'entoure en utilisant un rayon de bordure de 50 %. Je vais également le placer au centre de la roue. Pour cela, nous pouvons utiliser une grille CSS, grille d'affichage et placer les éléments au centre. Bien, après cela, ajoutons une bordure à l'élément après. La largeur sera de 9,5 RAM. La bordure sera solide et vous permettra également de voir la couleur DDD. Comme vous pouvez le constater, la bordure a agrandi l'élément. Pour résoudre ce problème, nous devons utiliser le dimensionnement des boîtes. Border box En fait, nous avons déjà défini cette propriété dans les styles par défaut, mais elle n'est pas appliquée aux pseudo-éléments, nous devons donc la réutiliser. Bon, je vais enfin me débarrasser de cette couleur de fond rouge. OK, maintenant les deux roues sont placées ensemble et je vais déplacer la roue arrière vers la droite. Sélectionnons la roue arrière et réglons sa bonne position à zéro. Je vais me débarrasser de la couleur de fond du vélo. C'est bon. Ensuite, je vais styliser la fourche avant. Tout d'abord, définissons la largeur et la hauteur. La largeur sera de trois RAM. Pour ce qui est de la hauteur, je vais faire 17 Ram. Et puis changez la couleur de fond, rendez-la noire. Définissons la position des éléments. Réglons la propriété inférieure à 15 RAM. Quant à la position de gauche, elle sera de 16,5. D'accord, après cela, nous devons faire pivoter la fourche Nous devons le faire pivoter dans le sens Z. Nous devons transformer, faire pivoter Z avec une valeur de 20 degrés. En fait, la fourche est tournée, mais ce n'est pas ce que nous voulons Il est pivoté à partir du centre, car l'origine de la transformation est définie sur le centre par défaut Nous devons changer l'origine de la transformation. Et nous devons le faire en bas à gauche. Très bien, allons-y et jetons un coup d'œil au projet terminé. Comme vous pouvez le constater, la fourche comporte une petite pièce supplémentaire en bas. Je vais créer cette partie en utilisant l'élément before suit. Sélectionnons la fourche avant, puis l'élément avant la combinaison. Tout d'abord, définissons le contenu, rendons-le vide. Ensuite, je vais définir la largeur et la hauteur. Passons à 22 m. La hauteur sera de cinq béliers. De plus, je vais utiliser ici une couleur de fond temporaire. Utilisons à nouveau le rouge, puis définissons la position sur absolue. Ici, nous avons les éléments, nous devons changer sa position. Fixons la propriété inférieure à zéro. Ensuite, définissons la position gauche, faisons-la 0,5. Bien, enfin, nous devons faire pivoter les éléments. Nous devons également le déplacer un peu vers la gauche. Transformons alors. Faites pivoter Z de 30 degrés. Nous devons traduire fonction x avec la valeur moins un m. Enfin, changeons la couleur de fond, rendons-la noire. La prochaine partie que nous allons personnaliser sera un tube. Sélectionnons-le et définissons sa largeur et sa hauteur. La largeur sera de deux RAM. Quant à la hauteur, faisons-en 12 RAM. Changez la couleur de fond, rendez-la noire. Définissez ensuite les propriétés de gauche et de haut. La position de gauche sera de 0,5 RAM. Pour ce qui est de la première place, je vais la porter à -12 Ram Comme la fourche avant, le tube comportera également une petite pièce supplémentaire. Je parle de cette partie. Créons-le en utilisant le pseudo élément before. Sélectionnons le tube suivi du pseudo élément précédent. Tout d'abord, définissez le contenu, rendez-le vide. Ensuite, je vais régler la hauteur, les deux à trois points, changer la couleur de fond, le rendre noir. Ensuite, je vais changer la position de l'élément. Réglons la position sur absolue, puis utilisons les propriétés de gauche et du haut. La position de gauche sera de -0,5 run. Pour ce qui est de la première place, je vais réussir à 0,5 point. Disons du tube. Passons à autre chose et personnalisons la partie suivante du vélo, qui sera le guidon Tout d'abord, je vais définir avec la hauteur. Réglons avec 28 RAM, alors la hauteur sera de deux RAM. Changeons la couleur de fond, utilisons à nouveau la couleur noire. Ensuite, je vais définir les positions supérieure et gauche. La meilleure propriété sera de 18 RAM. Pour ce qui est de la position de gauche, je vais la porter à 19 Ram. OK, maintenant faisons pivoter la transformation des éléments. Faites pivoter la fonction Z avec la valeur de 15 degrés. Très bien, jetons un coup d' œil au projet terminé. Comme vous pouvez le constater, le guidon comporte des pièces supplémentaires que je vais réutiliser avant et après les éléments en CD. Sélectionnons le guidon suivi de l'élément Cd situé avant. Je vais définir le contenu, faisons-le vide. Ensuite, je vais utiliser deux formulaires. Nous avons besoin de la même hauteur. Je vais réutiliser le rapport hauteur/largeur avec la valeur 1. Changez ensuite la couleur de fond, rendez-la noire. Ensuite, définissons la position, rendons-la absolue. Ensuite, je vais changer la position des éléments et les arrondir. Réglons la propriété supérieure à moins un RAM. Ensuite, la position de gauche sera inférieure à un RAM. Et nous avons également besoin ici d'un rayon de bordure avec une valeur de 50 %. Bien, passons aux éléments précédents. Passons à la deuxième partie. Je vais sélectionner le guidon, suivi de l'élément suivant Faisons en sorte que le contenu soit vide. Ensuite, je vais définir la largeur et la hauteur. La largeur sera de 30 RAM, puis la hauteur sera de deux RAM. Changeons la couleur de fond, rendons-le noir. De plus, nous devons définir la position sur absolue. Ensuite, définissons la position gauche et faisons-la -15,5 RAM. Ensuite, je vais faire pivoter l'élément et nous devons le rendre légèrement arrondi. Utilisons transform rotate y. Dans ce cas, nous devons faire pivoter l'élément selon l'axe Y. La valeur sera de -70 degrés. Je vais également utiliser Border Radius Two Ram. Très bien, la seule chose à faire concernant le guidon est de faire pivoter l' élément après s dans un espace en trois D. Pour cela, je vais utiliser l'une des propriétés appelée perspective. Cela nous permet de créer l'environnement tridimensionnel. Définissons cette propriété, 250 RAM. Comme vous pouvez le constater, c'est tout ce qui concerne le guidon. Ensuite, je vais m' occuper de la barre transversale. Nous allons sélectionner cet élément, et tout d'abord, le définir avec la hauteur. Je vais utiliser 227 RAM. Ensuite, la hauteur sera de 3,5 RAM. Changez également la couleur de fond, rendez-la noire. Ensuite, nous devons définir les propriétés du haut et de la gauche. La première place sera 22 Ram. Pour ce qui est de la position de gauche, je vais la porter à 26 RAM. Après cela, nous devons faire pivoter les éléments. Utilisons la rotation par transformation avec la valeur 20 degrés. Encore une fois, l'élément est pivoté depuis le centre et nous devons modifier l'origine de la transformation Dans ce cas, nous devons le placer en haut à gauche. Bon, enfin, changeons la forme des éléments. Il doit être arrondi sur le côté droit. Je vais utiliser le rayon de bordure. Les valeurs seront les suivantes. Nous avons besoin de zéro, 50 %, 50 % et encore zéro. Très bien, avec la croix, c'est terminé. Ensuite, nous devons prendre ici les cadres. Sélectionnons le cadre, définissons la largeur et la hauteur. La largeur sera de 32 RAM. Ensuite, je vais atteindre une hauteur de 3,5 RAM. Changez la couleur de fond, rendez-la noire. Je vais donc définir les positions. La propriété supérieure sera de 25 RAM. Quant à la position de gauche, faisons-en 26 RAM. Ensuite, je vais faire pivoter l'élément. Transformons la rotation. La valeur sera de 45 degrés. Encore une fois, nous devons changer l'origine de la transformation. Transformons l'origine et placons-la en haut à gauche. Enfin, changeons la forme de l'élément. Utilisez à nouveau le rayon de bordure avec la valeur 0 à 50 % et à nouveau zéro. Très bien, voyons donc la première image. Passons à autre chose et personnalisons le second. Sélectionnez le cadre deux, puis définissez à nouveau la largeur et la hauteur. Dans ce cas, la largeur sera de 25 RAM. La hauteur sera alors de deux m. Changeons la couleur de fond, rendez-la noire. Ensuite, je vais définir les positions supérieure et gauche. La propriété supérieure sera de 44 m. Pour ce qui est de la position de gauche, je vais faire 45 Ram. Comme concédé, la partie de l'élément n'est pas visible, elle est placée derrière le volant. Alors allons-y et réglons ce problème. En utilisant la propriété d'index Z, je vais lui attribuer une valeur supérieure à zéro. Disons dix. Très bien, passons à autre chose et passons à la partie suivante, qui sera un tube. Définissons avec en hauteur. La largeur sera de trois RAM. Ensuite, je vais atteindre une hauteur de 18,5 Ram. Changeons la couleur de fond, rendons-le noir. Je vais modifier les positions de l'élément. La propriété supérieure sera de 30 RAM. Ensuite, nous avons besoin de la position gauche, ce sera 47 RAM. Je vais également faire pivoter l'élément. Transformons la rotation Z avec une valeur de 15 degrés, voir ci-dessus le tube. Si nous examinons le projet terminé, vous verrez que le tube comporte deux parties supplémentaires. Encore une fois, je vais utiliser des pseudo-éléments avant/après. Sélectionnons le tube suivi du pseudo élément précédent. Tout d'abord, définissons le contenu, rendons-le vide. Ensuite, je vais définir la largeur. Il y aura deux Ram. Ensuite, nous avons besoin d'une hauteur, qui sera de 11 RAM. Changeons la position, rendons-la absolue. Ensuite, je vais définir la couleur de fond sur le noir. Définissons ensuite les positions supérieure et gauche. La propriété supérieure sera -11 Ram. Pour ce qui est de la position de gauche, je vais la porter à 0,5 RAM. Bien, voyons voir la première partie. Passons à autre chose et occupons-nous de la seconde. En fait, je vais dupliquer ce code. Passons de l'avant à l'après. Ensuite, je vais changer la largeur. Ce sera 2,5 RAM. La hauteur sera de 1,5 Ram. Ici, il faut revenir à la couleur pour qu'elle soit noire. Changeons les positions supérieure et gauche. La première position sera de moins trois Ram. Pour ce qui est de la position de gauche, je vais la porter à 0,25 Ram Très bien, passons à autre chose et personnalisons le siège. Définissons avec la hauteur. Je vais faire une largeur de 12 RAM. Maintenant, la hauteur sera de trois béliers. Changez également la couleur de fond, passez au noir. Ensuite, nous devons modifier les propriétés en haut et à gauche. La première position sera de -12 Ram. Ensuite, la position gauche sera de moins six RAM. Ensuite, je vais faire pivoter le siège. Transformons-nous. Faites pivoter avec la valeur -12 degrés. Nous devons également modifier la forme du siège. Utilisons le rayon de bordure avec les valeurs 20 %, puis un Ram deux fois, et 80 %. Bien, asseyons-nous sur le siège suivant. Je vais m'occuper de la fourchette. Définissons avec la hauteur. Je vais le faire avec deux Ram, alors la hauteur sera de 25 Ram. Changeons la couleur de fond, rendons-le noir. Nous devons également modifier les positions gauche et supérieure. La position de gauche sera 60 Ram. Alors la propriété supérieure sera 26 RAM. Nous devons également faire pivoter les éléments. Transformons simplement la rotation Z avec la valeur -55 degrés telle que considérée La partie de la fourche arrière n'est pas visible, elle est placée derrière le volant. Nous devons réutiliser la propriété d'index Z. Mettons-le à dix. D'accord, comme convenu, la majeure partie du vélo est construite. Ensuite, nous devons prendre soin de la manivelle. Définissons avec et hauteur. Je vais définir les deux propriétés sur dix RAM. Changez ensuite la couleur de fond, rendez-la noire. Nous devons également arrondir l'élément en utilisant le pourcentage du rayon de bordure. Changeons ensuite la position de la manivelle. Définissons les propriétés en haut et à gauche. La première place sera 40 Ram. Pour ce qui est de la position de gauche, je vais également la porter à 40 RAM. Ensuite, ajoutons la bordure à la manivelle. La largeur sera de 0,3 RAM. La bordure sera en pointillés et définira également la couleur, rendez-la à nouveau noire Comme vous pouvez le voir, la couleur d'arrière-plan recouvre la bordure Nous devons réutiliser. Clip d'arrière-plan avec zone de contenu à valeur ajoutée. Très bien, asseyons-nous sur la manivelle. Passons à autre chose et prenons soin des pétales. Sélectionnez ces éléments définis en hauteur. La largeur sera de 1,5 RAM. Ensuite, la hauteur sera de 17 Ram. Changeons la couleur de fond, rendons-le noir. Modifiez également la position de l'élément. Nous devons utiliser les propriétés en haut et à gauche. La première place sera 37 Ram. Pour ce qui est de la position gauche, je vais lui donner 44 RAM. OK, maintenant faisons pivoter l'élément. Je vais le rendre légèrement arrondi. Utilisons la transformation Rotate Z avec la valeur -12 degrés. Nous devons également limiter le rayon de 0,5 Ram. Bien, comme vous pouvez le voir sur le projet terminé, nous devons coller les pétales eux-mêmes, ces deux parties. Encore une fois, utilisons avant et après. Voir les éléments. Les deux éléments auront des styles communs. Je vais les sélectionner tous les deux ensemble. Définissons le contenu, rendons-le vide. Ensuite, nous devons définir w et hauteur. La largeur sera de cinq, puis la hauteur sera de 1,7 RAM. Changez la couleur de fond, rendez-la noire. De plus, nous devons définir la position sur absolue. Définissons ensuite la position gauche. Ce sera -1,8 RAM. Enfin, je vais arrondir les éléments. Utilisez le rayon de bordure avec la valeur 0,3 m. À l'heure actuelle, les deux éléments sont placés ensemble. Nous devons définir les positions séparément. Sélectionnons les pétales avant et définissons la position supérieure. Faites-le fonctionner à 0,2. En ce qui concerne les pédales, après avoir défini la propriété inférieure, exécutez 2.2 C'est bon, c'est fini avec les pétales, c'est terminé. Et la dernière partie que nous devons personnaliser est une chaîne. Définissons avec la hauteur. La largeur sera de 31,5 RAM. Ensuite, la hauteur sera de 8,5 Ram. Nous avons également besoin d'une frontière. Faisons en sorte qu'il soit 0,5 RAM, noir uni. Puis définissez la position de la chaîne. La première place sera 41 Ram. Quant à la position gauche, je vais la porter à 40,5 RAM D'accord, nous devons ensuite arrondir la chaîne. Utilisons donc le rayon de bordure avec les valeurs cinq Ram, 50% 50% encore une fois cinq Ram. Enfin, nous devons rendre toute la chaîne visible car elle est actuellement partiellement masquée. Utilisons-le par rapport à l' indice dont la valeur est dix. Très bien, nous avons enfin fini de construire le vélo, et maintenant nous devons nous occuper des animations. Allons-y et commençons par les roues. Nous devons les faire pivoter de 360 degrés. Créons des images-clés. Je vais l'appeler vélo Anim. En fait, nous aurons besoin des mêmes images-clés pour toutes les pièces qui bougeront. Dans ce cas, nous allons suivre deux étapes. À 0 %, nous devons définir la propriété de transformation avec la fonction de rotation et la valeur sera nulle. À 100 %, nous devons faire pivoter l'élément de -360 degrés. Allons-y et lançons l'animation. Nous avons besoin du nom des images-clés. Bicycle Anim alors la durée sera de 5 secondes. L'animation doit s'exécuter à l'infini. De plus, ça va être linéaire, non ? Au fur et à mesure, les roues tournent et il faut maintenant faire fonctionner la manivelle et les pétales En fait, comme je l'ai déjà dit, nous aurons besoin des mêmes images-clés. Il suffit de définir la propriété d'animation. La seule chose que nous devons changer ici, c'est la durée. Cela va prendre 10 secondes pour les deux éléments. Je veux dire, la manivelle et les pédales. Comme vous pouvez le constater, la manivelle et les pédales tournent. La seule chose à faire est de lancer l'animation pour les éléments avant et après le costume. Mais dans ce cas, ils doivent être pivotés dans les directions opposées Pour cela, il faut ajouter ici une valeur supplémentaire, inversement. Voilà, nous avons fini de travailler sur le vélo, j'espère que c'était intéressant et utile. Passons au projet suivant. 12. Projet 9 - Salle 3D: Très bien, il est temps de construire notre prochain projet, qui sera une salle en trois D. Comme vous pouvez le voir, nous avons ici une pièce dans un espace en trois D. Il y a une table au centre de la pièce, et nous avons une lettre sur la table. Si nous cliquons sur le bouton, lisez plus tard, nous arriverons au tableau et la lettre tournera. Si nous cliquons à nouveau sur le bouton, nous reviendrons en arrière. OK, asseyons-nous à propos de ce projet. Allons-y et commençons à le créer. J'ai préparé un nouveau dossier sur le bureau appelé Three D room, qui est actuellement vide. Allons-y, ouvrons-le dans le code VS et créons notre index de fichiers de travail contenant le style HTML CSS et les scripts. Ce projet utilisera un peu de script Java. Ouvrons l'index du fichier HDL et créons un document HTML de base Pour cela, je vais placer ici un point d'exclamation, puis appuyer sur Tab ou Enter Tout d'abord, changeons le titre. Ce sera une salle en trois D, puis lierez les fichiers CSS et Java. Ouvrez la balise link et spécifiez ici le nom du fichier. En ce qui concerne le fichier de script, je vais ouvrir le script et spécifier le nom du fichier Gels dans l'attribut source. Très bien, maintenant je vais exécuter le projet sur le navigateur en utilisant le serveur live. Plaçons également l'éditeur et le navigateur comme si, accord, je vais d'abord créer le balisage H ml Ouvrons le tube profond qui sera la pièce à l'intérieur de la pièce, nous aurons deux éléments différents Le premier sera le bouton. Ouvrons le tag button avec la classe BTN avec le texte lu par la lettre Quant au second, ce sera la table. À l'intérieur du tableau, nous aurons plusieurs éléments différents. La première sera la lettre. Ouvrons H, trois balises d'en-tête avec la lettre de classe. Insérons ici un texte factice. Ensuite, nous aurons trois pieds de table. Ouvrons le tag avec le pied de table de la classe. Nous avons également besoin d' une autre table. Dupliquons cette ligne de code deux fois, puis changeons les noms des classes. OK, nous avons enfin besoin d'un étage. Ouvrons le tag avec l'étage de la classe. Très bien, le balisage HD mal est prêt et il est maintenant temps de commencer à écrire du CSS Tout d'abord, je vais créer des styles de réinitialisation et par défaut. Sélectionnons chaque élément à l'aide d'un astérisque. Je vais me débarrasser de la marge et du rembourrage par défaut. Réglons les deux propriétés à zéro. De plus, je vais définir la taille de la boîte sur celle de la bordure. Tout au long de ce point, nous utiliserons le RAM comme unité de mesure. Par défaut, un RAM équivaut à 16 pixels, et je veux le convertir en dix pixels. Que nous devons diminuer la taille de police de l'élément HTML. Faisons en sorte que ce soit 62,5 %. D'accord, nous sommes prêts à personnaliser la pièce En fait, je pense qu'il vaudrait mieux masquer le bouton dans la lettre pendant un moment, car je vais créer le tableau. Commentons les deux éléments, puis je vais sélectionner une pièce. Tout d'abord, définissons avec la hauteur. Je vais définir la largeur à 100 %. Quant à la hauteur, elle sera égale à 100 % de la fenêtre d'affichage Changez ensuite la couleur de fond, rendez-la noire. OK, ensuite je vais m' occuper de la table. Tout d'abord, définissons sa hauteur intérieure. Je vais définir les deux propriétés sur 60 , puis je vais changer l'arrière-plan. Dans ce cas, nous utiliserons une fonction de gradient radial. Cela nous permet de créer une transition de couleur à partir du centre de l'élément. Je vais insérer deux couleurs différentes, les deux seront des valeurs RGBA La première ligne sera de couleur blanche. Nous avons besoin de 25053 fois, puis l'opacité de 0,9 Quant à la deuxième couleur sera 3819123, et l'opacité sera de 0,9 OK, ensuite arrondissons le tableau et créons également la arrondissons le tableau et Réglons le rayon de bordure à 50 % , puis créons le bas de la bordure avec des valeurs deux solides. La couleur sera RGB 153,233,253 Ensuite , je vais placer le tableau au centre de la page Pour cela, utilisons une grille CSS. Nous avons besoin d'une grille d'affichage et d'un centre de placement des éléments. OK, le tableau est centré. Et maintenant je vais le faire pivoter. De plus, je veux déplacer la table plus profondément dans la pièce. Avant cela, nous devons créer un environnement 3D pour cela. Je vais utiliser la propriété appelée perspective. Réglons-le sur 100 RAM. Ensuite, je vais faire pivoter la table. Utilisons la propriété transform. Nous devons faire pivoter la table selon l'axe X. La valeur sera de 70 degrés. Nous devons également déplacer le tableau selon l'axe z. Traduisons Z avec la valeur dix Ram. OK, la table est pivotée. Maintenant, il faut prendre soin des jambes. Comme vous le savez, les trois pieds ont un nom de classe commun : table leg. Sélectionnons-le et définissons-le avec et hauteur. La largeur sera de trois RAM. Pour ce qui est de la hauteur, je vais faire 35 RAM. Modifiez également la couleur de fond. Utilisons votre valeur RGBA 29113116 et l'opacité 0,8 D'accord, nous avons ici les trois pieds, mais comme vous pouvez le voir, nous devons prendre soin Réglons la position sur absolue. Définissez ensuite les propriétés en haut et à gauche. La première place sera 30 Ram. Quant à la position gauche, je vais la régler sur 28,5 RAM Très bien, nous devons maintenant personnaliser chaque jambe séparément. Allons-y et commençons par le premier. Nous devons faire pivoter la jambe en fonction des X et ZX. Avant de faire pivoter la jambe, nous devons également partager un espace en trois D pour la jambe. Pour ce faire, nous devons utiliser propriété appelée style de transformation avec la valeur préservée, trois D. D'accord, après cela, nous pouvons faire pivoter le pied. Sélectionnons le premier pied de table, puis utilisons transformation, la rotation x avec la valeur -60 degrés, rotation avec la valeur 40 degrés. Très bien, comme vous pouvez le voir, la jambe est tournée. Mais il est pivoté à partir du centre car, par défaut, l'origine de la transformation est définie au centre et nous devons la modifier et la placer en haut D'accord, nous avons maintenant un bien meilleur résultat. Ensuite, je vais arrondir la jambe, donc utilisons le rayon de bordure, cinq Ram et un Ram. Je vais donc ajouter une bordure sur le côté droit et également en bas. Utilisons la bordure droite avec les valeurs 0,3 Ram solid. La couleur RGB, 388587. Dupliquons cette ligne de code et changeons la bordure, directement en bas de la bordure. Bien, asseyons-nous à propos de la première étape. Passons à autre chose et occupons-nous de la seconde. En fait, je vais dupliquer ce code. Changeons le nom de la classe. Ça va être deux. La valeur de la fonction de rotation Z sera négative. Je vais également modifier les valeurs du rayon de bordure. Nous avons besoin d'un Ram et de cinq Ram. Enfin, au lieu de la propriété border right, nous avons besoin ici de border left. OK, la deuxième étape est prête. Passons à autre chose et personnalisons le troisième. Dupliquons à nouveau le code, changeons le nom de la classe. Il nous faut ici le troisième pied de table. Dans ce cas, il suffit de faire pivoter les éléments selon x x. Et la valeur sera de -140 degrés Le rayon de la bordure sera d'un Ram. Au lieu d'une bordure en bas, nous avons besoin d'une bordure, non ? Bien, voyons voir les pieds, et en fait, la table est prête. Ensuite, je vais m' occuper du sol. Sélectionnons cet élément et définissons d' abord avec en hauteur. Pour le moment, je vais réduire un peu le sol , puis nous modifierons ces valeurs. La largeur et la hauteur seront de 60 RAM. Comme vous le savez, le sol ressemble au tableau noir de la poitrine. Et nous allons le créer en utilisant l'une des fonctions appelées gradient conique répétitif Cette fonction appartient à la propriété de l'image d' arrière-plan. Nous allons mélanger deux couleurs différentes et nous allons gérer l'alignement des cellules en utilisant quelques degrés. La première valeur de cette fonction définit la direction des cellules. Je vais passer ici à 90 degrés. Ensuite, nous devons spécifier la première couleur. Ça va être noir. Et nous avons besoin ici de zéro degré et de 90 degrés. En fait, cela créera une cellule noire. Ensuite, nous devons spécifier la deuxième couleur, qui sera 333. Je parle de la couleur grise. Nous avons également besoin ici de 90 degrés et 180 degrés. Ensuite, nous devons spécifier la taille des cellules. Nous devons utiliser la taille de l'arrière-plan, et les valeurs seront de dix RAM. Encore une fois, dix Ram. Comme vous pouvez le voir, nous avons ici les cellules, et elles ressemblent à un tableau noir sur la poitrine Comme vous pouvez le constater, les cellules se répètent. Cela se produit parce que par défaut la propriété de répétition en arrière-plan est définie pour se répéter. Si nous la modifions et qu'elle ne se répète pas, nous n'aurons que quatre cellules car la fonction conique répétitive est exécutée une fois et elle crée des cellules sur les axes x et y. OK, débarrassons-nous de la propriété de répétition en arrière-plan. Ensuite, je vais arrondir le sol. Utilisons le rayon de bordure avec la valeur 50 %. Ensuite, je vais définir la position sur absolue. Nous devons déplacer le sol en bas. Utilisons transform translate Z avec la valeur -23 Ram. accord, en fait, nous pouvons déjà augmenter la taille du sol. Changeons les valeurs de largeur et hauteur, faisons-les 160. Bien, après cela, nous devons placer le sol au centre de la pièce. Pour cela, je vais utiliser CSS Flax box, nous avons besoin de display flax. Justifiez ensuite le centre de contenu et le centre des éléments de ligne. Bien, après cela, ajoutons un effet d'ombre. De plus, je vais cacher la partie du sol qui se trouve à l'extérieur de la pièce. Utilisons Box Shadow. Nous avons besoin de l'ombre à l'intérieur de l'élément que nous devons utiliser ici dans St moins cinq, moins cinq, puis dix Ram. Et la couleur noire, là encore, nous avons besoin de cinq RAM, dix RAM, et la couleur noire pour masquer le sol qui se trouve à l'extérieur de la pièce, nous devons utiliser le trop-plein C'est bon, c'est ça. Le sol et la table sont tous deux prêts et nous pouvons maintenant nous occuper du bas et de cette dernière. Pour le moment, ils sont cachés. Allons-y et rendons-les visibles. Nous allons sélectionner le bas pour définir la hauteur. Je vais définir les deux propriétés sur 15 RAM. Changez ensuite la couleur de fond. Cela change également la couleur du texte. Utilisons la valeur RGB 252357. OK, ensuite je vais changer la position du bas. Réglons la position sur relative, puis définissons les propriétés du haut et de la gauche. La première place sera dix Ram. Pour ce qui est de la position de gauche, je vais passer à -40 Bien, ensuite, je vais changer la forme du bas Je vais également y ajouter une bordure. Changeons la forme de l'élément en utilisant valeurs de rayon de bordure de 50 % deux fois, puis de 0,50 %. Quant à la bordure, je vais lui donner 0,3 RAM La couleur sera RGB 252357. Très bien, après cela, allons-y et personnalisons le texte du bas. Je vais augmenter la taille du téléphone, faire deux RAM, puis transformer le texte en majuscules. De plus, je vais créer un espace entre les lettres, soit 0,2 RAM. Ensuite, je vais augmenter la hauteur de la ligne. Passons à 1.5 Enfin, changez le type du curseur, faites-en un pointeur. Très bien, le bouton est personnalisé. Ensuite, je vais m' occuper de la lettre. Sélectionnons-le. Et tout d'abord, définit la hauteur intérieure. Je vais régler avec 215 Ram, puis la hauteur sera de 25 Ram. Changeons la couleur de fond, rendons-le blanc. Ensuite, je vais créer l' espace à l'intérieur de la lettre. Faisons-le en utilisant un rembourrage. Réglons-le sur deux Ram en haut, un Ram sur le côté droit, deux Ram en bas et un Ram sur le côté gauche. Changeons la couleur, faisons-la 555. Utilisez également un petit effet d'ombre. Utilisez box shadow avec la valeur 00.1 Ram et l'appelant AAA. C'est bon. Il est maintenant temps de prendre soin du téléphone, de la lettre. En fait, je vais utiliser l'un des téléphones Google. Allons-y et visitons le site Web de Google Phones. Je vais chercher un téléphone appelé Dancing Script. Nous allons sélectionner le premier style, puis cliquer sur Importer, récupérer l'URL et la coller dans le fichier CSS. Bien, maintenant nous pouvons définir la famille de téléphones. Attribuons au script de danse le cursif, puis changeons la taille du téléphone, 1,5 Enfin, je vais créer une petite indentation Utilisons du texte en dents avec une valeur de 0,5 Ram. C'est bon, donc tout est prêt. Maintenant, nous pouvons faire fonctionner ce bouton. Une fois que nous avons cliqué dessus, nous devons nous déplacer dans la pièce, atteindre la table, et la lettre doit pivoter. Pour cela, je vais utiliser un peu de Javascript. Nous devons ajouter un écouteur d'événements au bouton en cliquant sur un événement Tout d'abord, je vais sélectionner le bas. Nous allons interroger la méthode du sélecteur. Nous devons spécifier ici le nom de la classe, BTN. Ensuite, nous devons ajouter un écouteur d'événements en bas avec un événement de clic Et nous devons également passer ici une fonction de rappel qui sera exécutée une fois que nous aurons cliqué sur le bouton Je vais ajouter une nouvelle classe au tableau. Ensuite, en utilisant cette classe, nous définirons de nouveaux styles en CSS que nous devrons ajouter à l'élément au clic. Nous devons maintenant sélectionner la table. Utilisons à nouveau la méthode de sélection de requêtes. Le nom de la classe sera table. Ensuite, nous devons utiliser une propriété appelée liste de classes qui nous donne toutes les classes de l'élément. Je vais maintenant utiliser l'une des méthodes appelées togal. En fait, cette méthode nous permet d'ajouter une classe à l'élément s'il n'en a pas et de la supprimer. Si c'est le cas, le nom de la classe sera, disons, change. Bien, passons au Javascript. Revenons au fichier CS et sélectionnons la table avec un changement de classe. Nous devons faire pivoter la table en fonction de x, xs. De plus, nous devons le déplacer selon les directions y et z dont nous avons besoin ici. Faites pivoter la valeur de la fonction x de 80 degrés, puis traduisez Y, la valeur sera de 30 RAM. Et traduisez également Z avec une valeur de dix Ram. Une fois que j'ai cliqué sur le bouton, nous allons entrer dans la pièce, mais comme vous pouvez le voir, nous devons rendre cet effet plus fluide. Pour cela, je vais utiliser la transition. Nous avons besoin de nous transformer ici. Et la durée de 2 secondes, nous avons maintenant un bien meilleur résultat. Mais comme vous pouvez le constater au clic suivant, nous n'avons plus d'effet lisse. Nous avons besoin d'une autre transition par défaut pour la table. Maintenant, tout fonctionne bien. En fait, je pense que nous devons faire pivoter la table un peu plus en fonction du x x. À l' heure actuelle, elle pivote de 70 degrés Changeons la valeur et faisons-la 80 degrés. Bien, je pense que c'est bien mieux. Allons-y et prenons soin de la lettre. Sélectionnons Class Change, suivi de la lettre. Je vais faire pivoter la lettre en fonction de x x. La valeur sera de -80 degrés, comme indiqué Ce dernier tourne, mais il tourne à partir du centre. Nous devons changer l'origine de la transformation. Ce sera le plus bas. Maintenant, le problème est résolu et nous devons rendre la rotation plus fluide. Utilisons à nouveau la transition. Nous devons nous transformer. La durée sera d'une seconde. Nous avons également besoin ici d'un petit délai. Ça va prendre 2 secondes, comme sur la table. Nous avons besoin d'une autre transition par défaut. Bien, maintenant tout fonctionne bien. La seule chose que je veux faire est d'ajouter un délai pour la table une fois que nous nous en sommes éloignés. Ajoutons ici 1 seconde. C'est bon, alors c'est tout. Tout fonctionne parfaitement avec ce projet, c'est terminé. J'espère que c'était intéressant et que vous avez appris de nouvelles choses. Rendez-vous dans le prochain projet. 13. Projet 10 - 3D Swing: Bien, il est temps de créer notre dernier projet de ce cours. Ce sera une balançoire en trois D. Comme vous pouvez le voir, nous avons ici quelques balançoires dans un espace en trois D. Ils se balancent. Et nous avons également ici une petite balle qui se déplace d'une balançoire à l'autre. Nous allons créer ces effets à l'aide animations CSS et de trois transformations en D. OK, c'est tout à propos du projet. Allons-y et commençons à le construire. J'ai créé un nouveau dossier sur le bureau appelé Three D Swing, qui est actuellement vide. Ouvrons-le dans le code VS. Créez nos fichiers de travail pour HTML et CSS. Ouvrez ensuite l'index du fichier HDL et créez un document HTML de base Mettons ici un point d' exclamation , puis appuyons sur Haut ou Entrée Changeons le titre. Je vais insérer ici trois D Swing, puis lier le fichier CSS, ouvrir la balise link, et spécifier ici le nom du fichier CSS. OK, enfin, je vais exécuter le projet sur le navigateur en utilisant un serveur en direct. Nous allons également placer l'éditeur et le navigateur de cette façon. Très bien, nous sommes prêts à construire le projet. Tout d'abord, je vais commencer par le balisage HTML. Ouvrons le remorqueur profond, qui servira de conteneur Ensuite, je vais créer la balançoire. Ouvrons de Tu avec le swing de classe. Swing one À l'intérieur de la balançoire, nous aurons plusieurs éléments différents. Nous aurons quatre cercles. Ouvrons le cercle de la classe en tirant en profondeur et en encerclons un Ensuite, je vais dupliquer cette ligne de code trois fois et changer les noms des classes. Nous aurons également deux cordes. Ouvrons le tag avec la classe rope et rope one, puis dupliquons cette ligne de code et changeons le nom de la classe. OK, au total, nous aurons six balançoires. Mais pour le moment, je pense que nous serons meilleurs si nous n'en créons qu'un. Une fois que nous l'aurons personnalisé, nous nous occuperons du reste. OK, c'est tout à propos du balisage HTML. Pour l'instant, allons-y et commençons à écrire du CSS. Tout d'abord, je vais créer des styles de réinitialisation et par défaut. Sélectionnons chaque élément à l'aide d'un astérisque. Je vais me débarrasser de la marge et du rembourrage par défaut. Réglons les deux propriétés à zéro. De plus, je vais définir la taille de la boîte sur celle de la bordure. Tout au long de ce projet, nous utiliserons le RAM comme unité de mesure. Par défaut, un RAM équivaut à 16 pixels et je veux le convertir en dix pixels. Pour cela, nous devons diminuer la taille par défaut de l'élément H timul. Réglons-le à 62,5 % D'accord Passons ensuite au contenant Je vais définir la hauteur du web. La largeur sera de 100 % Quant à la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Ensuite, je vais changer l' arrière-plan du conteneur. Dans ce cas, je vais utiliser une fonction de gradient radial. Si nous examinons le projet terminé, vous verrez que la transition de couleur du noir au bleu commence dans le coin supérieur gauche de la page. Tout d'abord, nous devons spécifier cet endroit. Je vais utiliser le site le plus proche à 5 %10 % En fait, ces valeurs en pourcentage sont comme les coordonnées. Ensuite, spécifiez les couleurs. Le premier sera de couleur noire. Utilisons le RGB avec des zéros. Quant à la deuxième couleur, elle sera bleue. Utilisons le RGB 115488. OK. La dernière chose à faire en ce qui concerne l'arrière-plan est d'augmenter la transition de couleur. Et pour cela, ajoutons ici 1 000 %. Très bien, arrêtons-nous sur le contenant Pour l'instant, passons à autre chose et occupons-nous de la balançoire. Tout d'abord, définissons avec la hauteur. Je vais régler avec 242 Ram, puis la hauteur sera de 20 Ram. Modifiez également la couleur de fond. Je vais utiliser la valeur RGBA 2621691 et l'opacité 0,7. Ici, nous avons le swing, et nous devons le placer au centre de la page Pour cela, je vais utiliser CSS Flexbox. Nous avons besoin de Display Flex. Justifiez ensuite le centre de contenu et le centre des éléments de ligne. Très bien, maintenant je vais faire pivoter la balançoire, puis nous lui donnerons une forme en trois D. En fait, je vais faire pivoter la balançoire dans les trois directions. Je veux dire x z et y x. Donc, lorsque vous transformez puis faites pivoter la fonction x, la valeur sera de 70 degrés. Ensuite, nous devons faire pivoter Z si la valeur est de -40 degrés. Enfin, faites pivoter de cinq degrés. Bien, l' élément est pivoté. Comme je l'ai dit, je vais donner à la balançoire une forme en trois D. Tout d'abord, nous devons créer un environnement 3D pour cela. Je vais utiliser une perspective avec une valeur de 150 Ram. Je vais créer une forme en trois D en utilisant des éléments avant et après le CD et nous devons également partager un espace en trois D avec eux. Pour cela, je vais utiliser propriété appelée transform style avec la valeur preserve three D. Bien, sélectionnons ensuite un swing avec un élément before. Tout d'abord, définissons le contenu, rendons-le vide. Ensuite, je vais définir la largeur et la hauteur. La largeur sera d' un Ram par rapport à la hauteur du poly. Je vais le faire à 100% Changez également la couleur de fond. Je vais utiliser ici la couleur B4b 65 pour définir également la position absolue OK, nous avons ici l'élément avant le costume sur le côté gauche de la balançoire. Allons-y et faisons-le pivoter. Transformez la rotation Y avec une valeur de 90 degrés. L'élément pivote, mais comme vous pouvez le voir, il pivote à partir du centre Nous devons changer l'origine de la transformation. Utilisons transform origin et faisons-le à gauche. Le côté gauche est prêt. Allons-y et occupons-nous de la face avant. Je vais sélectionner Swing with after see the element. Définissons le contenu, rendons-le vide. Ensuite, je vais régler la hauteur sur un Ram. Ensuite, la largeur sera de 100 %. Changez la couleur de fond, je vais utiliser ici la couleur deux, C six. Changez également la position, rendez-la absolue. OK, nous avons ici les éléments suivants. Comme vous pouvez le constater, nous devons changer de position. Il doit être placé devant la balançoire. Définissons la propriété inférieure et mettons-la à zéro, d'accord ? Ensuite, je vais faire pivoter les éléments. Dans ce cas, nous devons le faire pivoter dans le sens x. Réglons la fonction de rotation x à 90 degrés. Comme vous pouvez le constater, comme pour l'élément précédent, nous devons changer l'origine de la transformation. Ici, ce sera le fond. D'accord ? Comme vous pouvez le constater, la balançoire a une forme en trois D. Ensuite, je vais parler des cercles, je veux dire des détails placés dans les coins de la balançoire. Sélectionnons le cercle défini en hauteur. Je vais définir les deux propriétés sur trois RAM, puis changer la couleur de fond. Je vais utiliser ici le C5757. Ensuite, je vais arrondir l'élément en utilisant un rayon de bordure d'une valeur de 50 %. Ensuite, je vais m'occuper de la position des cercles. Réglons la position sur absolue. Ensuite, je vais définir les positions séparément pour chaque cercle. Commençons par le premier. Je vais définir les propriétés en haut et à gauche. Réglons les deux positions sur un seul Ram. Ensuite, je vais dupliquer ce code pour changer le nom de la classe. Nous avons également besoin ici de la position droite au lieu de la gauche. Vient ensuite le troisième cercle alors que le code change à nouveau le nom de la classe. Dans ce cas, nous avons besoin de positions en bas à droite. Ensuite, fixons la position pour que le dernier cercle soit le quatrième. Nous avons besoin du bas et de la gauche. Bien, les quatre éléments sont positionnés. Ensuite, je vais créer ces éléments blancs qui sont placés au-dessus des cercles. Nous les créerons en utilisant l'élément Before suit. Sélectionnons le cercle suivi de l'élément précédant le costume. Tout d'abord, définissons le contenu. Il faut qu'il soit vide. Ensuite, je vais régler la hauteur, les deux à 1,8 RAM. Changez ensuite la couleur de fond. Je vais utiliser ici le 988. Définissez également la position sur absolue. Nous avons ici les éléments précédents. Allons-y et arrondissons-les. Et nous devons également les placer au centre des cercles. Utilisons le rayon de bordure, faisons-le à 50 %. Ensuite , pour placer les éléments au centre, je vais utiliser une grille CSS. Nous avons besoin d'une grille d'affichage et d'un centre de placement des éléments. Très bien, maintenant pour créer un effet plus agréable, je vais déplacer les cercles blancs un peu vers le haut dans un espace en trois D. Tout d'abord, nous devons partager un environnement en trois D avec l'élément précédent. Pour cela, je vais utiliser style de transformation avec la valeur conserver trois D. Ensuite, pour déplacer les éléments vers le haut, je vais transformer la fonction translate Z avec une valeur 0,3 m. Très bien, voyons les cercles sortants. Passons à autre chose et prenons soin des cordes. Sélectionnez-les en utilisant un nom de classe commun. Je vais définir la largeur et la hauteur. Réglons la hauteur à 40 Ram et la largeur sera de 0,3 Ram. Je vais également définir la couleur de fond sur le blanc. Ici, nous avons les ficelles du métier et nous devons prendre soin des positions Réglons la position sur absolue. Ensuite, je vais définir les positions de la corde 1 et de la corde 2 séparément. Commençons par la corde. Je vais définir les propriétés en haut et à gauche. La première place sera dix Ram. Quant à la position de gauche, je vais la porter à 2,5 RAM. Dupliquons ce code, changeons le nom de la classe. Nous avons besoin de la deuxième corde au lieu de la position gauche. Nous avons besoin de la bonne position. OK, les cordes sont positionnées, et ensuite je vais les faire pivoter et les déplacer un peu vers le haut Transformons-nous. Nous traduisons que la valeur de la fonction Z sera de 20 m. Ensuite, je vais faire pivoter l'élément selon les axes x et y. La valeur de la fonction de rotation x sera de 90 degrés. Ensuite, nous devons faire pivoter y avec la même valeur. À l'heure actuelle, les cordes sont tournées depuis le centre. Et nous devons changer l' origine de la transformation. Dans ce cas, nous devons le mettre en haut. Très bien, les cordes sont prêtes, je veux dire les parties supérieures, et maintenant nous devons créer les pièces supplémentaires ci-dessous. Et je vais le faire en utilisant des éléments before et after do. Sélectionnons une corde avec, avant que les éléments ne définissent le contenu, nous devons être vides. Ensuite, je vais définir la largeur et la hauteur. La largeur sera de 0,3 RAM. Pour ce qui est de la hauteur, je vais faire 23 Ram. Je vais utiliser des années sur une couleur d'arrière-plan temporaire, disons le rouge, puis définir la position sur absolue. Nous avons ici les éléments précédents. Nous devons changer de position. Je veux dire que nous devons les déplacer vers le bas et également les faire pivoter. Transformons la fonction translate y. La valeur sera de -23 Ram. Et nous avons également besoin de la fonction de rotation Z avec une valeur de 21 degrés. Les éléments sont pivotés à partir du centre. Et nous devons changer l' origine de la transformation. Dans ce cas, il devrait être en bas. Très bien, c'est ça, à propos de l'élément qui précède. Changeons la couleur de fond, rendons-le blanc. Afin de créer la deuxième partie, dupliquons ce code. Nous devons passer de l' avant à l'après. Et nous devons également modifier la valeur de la fonction de rotation. Dans ce cas, il nous faut ici une valeur négative. Très bien, le swing est enfin prêt et il faut maintenant créer l'animation. Avant cela, je vais légèrement modifier la position de la balançoire. Réglons la position sur absolue. Ensuite, je vais définir la première position. Faisons en sorte qu'il soit de 50 % tout au long de l'animation. Nous allons déplacer la balançoire selon l'axe y. Je veux dire horizontalement dans un espace en trois D. Créons des cadres célestes. Je vais l'appeler Swing An, nous allons avoir plusieurs étapes différentes. À chaque étape, nous modifierons la valeur de la fonction translate y. En outre, nous devons spécifier la rotation actuelle de l'élément à chaque étape. Commençons par le 0 % Je vais récupérer la rotation actuelle à partir d'ici. Ajoutons la fonction translate y. La valeur de la première étape sera de 100 m. Ensuite, 20 % Copions la propriété de transformation de la valeur de la fonction translate y. Dans ce cas, je vais vous insérer 21 RAM. Viennent ensuite 25 %, la valeur sera de 27 RAM. Ensuite, à 35,40 %, nous aurons ici les mêmes styles. Insérons ici Transformer et modifier la valeur de la fonction translate Y qui sera nulle. À 50 %, la valeur sera de -60 Ram. Puis viennent 55 %, je vais changer la valeur et la porter à -55 Ram Ensuite, à 65,70 %, la valeur sera de -84 Ram. Enfin, à 100 %, nous devons masquer la balançoire. Je vais utiliser une valeur plus élevée, disons -800. D'accord, les images clés sont prêtes Nous pouvons maintenant lancer l'animation. Sélectionnons Swing One. Nous devons insérer ici le nom de l'animation. Swing anim, puis la durée de l'animation sera de 20 secondes. Nous devons exécuter l' animation à l'infini. Définissons également la fonction de synchronisation de l'animation. Je vais choisir entre et sortir. Comme vous pouvez le constater, la balançoire bouge et l' animation fonctionne bien. Je voudrais faire ici un certain nombre de choses. Tout d'abord, je souhaite modifier l'origine de la transformation. Mettons-le en haut. De plus, au début de l'animation, nous avons ici les barres de défilement. Pour résoudre ce problème, nous devons utiliser Overflow Ten. OK, le premier swing est prêt. Il est animé. Dupliquons le premier swing dans le H tm du fichier. Changez le nom de classe dont nous avons besoin ici, Swing two, puis je vais dupliquer ce code en CSS. Modifiez le nom de la classe. De plus, je vais ajouter ici un temps de retard, mais avec une valeur négative, nous avons besoin de -4 secondes. Cela signifie que les 4 premières secondes de l'animation seront manquées pour le deuxième swing. D'accord, tout fonctionne parfaitement de la même manière. Je vais également créer trois autres balançoires. Dupliquons ce code trois fois. Changez le nom des classes de trois à cinq. Ensuite, dupliquez également l' animation dans le fichier CS. Changez les noms des classes, et nous devons également modifier les temps de retard. Il nous faut -8 secondes, puis -12 secondes et -16 secondes Très bien, tous les swings bougent bien, et maintenant nous devons nous occuper du ballon, ce qui rend le projet plus amusant pour le ballon, je vais créer un swing supplémentaire Allons-y, répétons le swing une fois de plus, puis insérons ici un tir profond avec la balle de classe Ici, nous avons une nouvelle balançoire qui ne bouge pas pour le moment car nous n' avons pas l'animation nécessaire. Je vais maintenant personnaliser le ballon. Définissons la largeur, faisons-en sept RAM. Ensuite, nous avons besoin de la même hauteur. Je vais utiliser ici une propriété appelée ratio d' aspect avec une valeur de un. Et puis changeons le fond. Dans ce cas, je vais utiliser une fonction de gradient radial. Nous devons mélanger deux couleurs. La première sera RGBA 159-23-8156 et l'opacité 0,9 Quant à la deuxième couleur, elle sera 3116, et l' 159-23-8156 et l'opacité 0,9 Quant à la deuxième couleur, elle sera 3116, et l'opacité 0,8 OK. Ensuite, je vais changer la position de la balle, et nous devons également la rendre arrondie. Réglons la position sur relative, puis définissons les propriétés de gauche et de haut. La position de gauche sera de 15 Ram, puis la position supérieure sera de 10 Ram. Utilisons également ici le rayon de bordure de 50 %, d'accord ? Après cela, nous devons faire pivoter la balle. Nous devons le faire pivoter dans les directions x et y. La fonction de rotation X sera de 90 degrés. Quant à la valeur de la fonction de rotation y, je vais la porter à 40 degrés. Encore une fois, nous devons changer l'origine de la transformation car à l'heure actuelle , la balle tourne depuis le centre Réglons l' origine de la transformation en haut. Très bien, ajoutons enfin un petit effet d'ombre à la balle. Utilisez box shadow avec les valeurs 00,2 Ram lors de l'appel de 333 Bon, voilà, le ballon est prêt et maintenant nous devons nous occuper de l'animation. Nous allons créer l'animation du sixième swing. Ensuite, nous allons finalement masquer ce swing nouvellement créé et n'afficher que le ballon. Créons des images-clés S. Je vais l'appeler swing six et nous n' aurons que trois étapes à 0 %. Encore une fois, la rotation actuelle du swing, comme dans les images clés précédentes, déplacera les éléments selon l'axe y. Je vais ajouter ici la fonction translate y, et la valeur sera nulle. Ajoutez ensuite 50 %, nous devons déplacer l'élément de 30 m. Pour ce qui est de la dernière étape, je veux dire 100 %, nous devons à nouveau traduire Y zéro. OK, allons-y et lançons l'animation. Sélectionnez swing six, le nom de l'animation. Swing six, Anum, la durée sera de 4 secondes. Ensuite, nous avons besoin ici d'un délai avec à nouveau une valeur négative de -1 seconde. L'animation va être infinie. Nous devons également nous assouplir ici. OK ? Comme vous pouvez le constater, la balançoire est en train de bouger. Nous devons le cacher. Nous devons tout cacher sauf le ballon. Allons-y et cachons tous les développements du swing six, sauf le ballon. Passons à six. Ensuite, nous devons utiliser une pseudo-classe. Nous devons spécifier ici le nom de la classe, Paul. Pour masquer les éléments, je vais utiliser l'opacité zéro OK ? Ensuite, je vais masquer les éléments avant et après. Sélectionnons également le swing six avec avant et après. Utilisez à nouveau l'opacité zéro. Enfin, je vais rendre transparente la couleur de fond de la balançoire. C'est ça. Nous avons fini de travailler sur ce projet. Tout fonctionne parfaitement. J'espère que vous avez apprécié ce projet, et c'était intéressant. En finissant ce projet, notre cours est terminé. J'espère que c'était le bon cours pour vous, et que vous apprendrez de nouvelles choses sur ces deux technologies, je veux dire, le HTML et le CSS. Le cours était relativement avancé. Si vous avez du mal à comprendre et à suivre les vidéos, je vous recommande de les regarder à nouveau, tester le code et d'essayer créer vous-même des projets similaires. C'est bon. Je te souhaite tout le meilleur. Bonne chance. Au revoir.