Apprendre à coder en faisant de l'art : développer des compétences en CSS en utilisant CodePen

1. Introduction: Hé tout le monde. Je m'appelle Christina Gorton et je suis un développeur frontal à distance. Je suis aussi un développeur autodidacte, et l'une des façons dont j'ai appris à coder était par le codage créatif. Dans ce cours, nous allons examiner beaucoup de propriétés CSS avancées et intermédiaires, mais nous allons les appliquer de manière amusante tout au long du cours dans un projet d'image CSS. Nous allons travailler ensemble sur CodePen, et à la fin du cours, vous aurez fois une image et une animation à partager. Commençons. 2. PROJET DE CLASSE: Dans cette vidéo, je voudrais décrire brièvement ce que sont les images CSS et ensuite nous allons parler de ce que notre projet va être dans cette classe. Les images CSS sont toutes les images que vous créez avec CSS et HTML. Comme vous pouvez le voir ici sur CodePen, il y a beaucoup d'images CSS et beaucoup de choses que vous pouvez faire avec CSS. Vous pouvez même créer une image CSS avec un seul élément div qui permet propriétés CSS comme vous voyez ici sur le site Lynn Fisher à singlediv.com. Je vais partager plusieurs liens vers des sites et des profils CodePen avec des images inspirantes dans notre document source de classe. Maintenant, pour ce cours, nous allons créer cette image CSS. À chaque leçon, je vais introduire un nouveau concept CSS, nous appliquerons ensuite ce que nous venons d'apprendre à notre projet de classe. À la fin du cours, vous aurez appris et appliqué plusieurs nouvelles propriétés CSS et nous aurons cette image CSS complétée avec animation à partager. J' aimerais que vous partagiez votre travail tout au long du cours dans notre section des projets de classe. Pour ceux d'entre vous qui le souhaiteraient, je vais collecter et partager les projets finaux dans une collection CodePen de classe. Vous pouvez même faire preuve de créativité et changer les couleurs, les formes, l'ombre de la boîte, tout ce que vous voulez faire ou même simplement créer une image complètement différente et j'aimerais toujours partager cela, à fois dans notre collection CodePen de classe, et sur mon compte Twitter. Commençons. 3. Se faire Getting: Dans cette vidéo, nous allons faire une brève introduction à Sass. Je ne vais pas entrer dans tout sur Sass. Il y a beaucoup à voir avec Sass. Mais pour notre projet, nous allons utiliser Sass pour quelques choses comme les variables et l'imbrication. Donc, je voudrais passer en revue ces. Ils sont vraiment utiles. Ils sont une bonne introduction à Sass, et à partir de là, vous pouvez passer à autre chose et apprendre des partiels mixins et des boucles et toutes sortes de trucs amusants que Sass offre. Un préprocesseur CSS vous permet simplement de prendre une langue et compiler en CSS afin que vous puissiez utiliser les fonctionnalités qui sont dans cette langue, dans ce cas, Sass. Il y a aussi moins de stylistes, mais Sass semble être le préprocesseur le plus populaire à utiliser dans le développement web en ce moment. Sass a deux syntaxes différentes, en fait. Celui que vous verrez plus couramment maintenant est SCSS, que vous pouvez voir ici, et CodePen, vous pouvez simplement, aller dans les paramètres et vous pouvez choisir votre préprocesseur. Ils sont Sass, SCSS, Stylus, PostCSS. Nous allons utiliser SCSS et c'est parce qu'il ressemble le plus étroitement à CSS régulier. Si vous utilisez Sass régulier et pas Sassy CSS, qui est SCSS, vous n'avez pas à faire des parenthèses, mais vous devez vous soucier de l'indention. Il y a certaines façons de mettre en retrait et vous ne pouvez pas simplement prendre n'importe quel code CSS que vous avez et commencer à l'utiliser. Avec Sass, vous devrez revenir en arrière et reformater tous vos CSS. Voici donc quelques exemples de Sass que vous pourriez voir dans notre projet. Nous allons donc passer quelques minutes dans notre prochaine vidéo, et nous allons choisir des couleurs et créer des variables avec elles. Donc les variables sont utiles parce que vous pouvez écrire le code une fois ici j'ai ma couleur. Ce sont des bleus différents, et je peux le mettre tout au long de mon projet. Dans ce petit projet, il peut ne pas sembler une grosse affaire d'avoir à écrire la couleur à chaque fois. Mais quand vous faites un énorme projet, si vous changez cette couleur du tout, un designer revient et dit, « Hé, je veux que cette couleur soit rouge au lieu du bleu. » C' est tellement plus facile juste ici d'écrire, rouge, et là où j'ai mis cette couleur bleue qui changera tout au long de mon projet. Donc si j'avais des titres, des bordures [inaudibles], si j'avais quelque chose qui était cette couleur bleue, ils changeraient tous en rouge maintenant. Super utile. Vous verrez également que les gens l'utilisent pour des choses comme des en-têtes ou des points d'arrêt. Partout où vous allez écrire quelque chose plusieurs fois où vous pourriez utiliser le même type de police d'en-tête ou les mêmes points d'arrêt sur différentes requêtes de médias. Vous voulez mettre cela dans une variable afin que vous n'ayez qu'un seul endroit pour le changer et vous n'ayez pas à parcourir toutes vos feuilles de style et à la rechercher. L' une des autres choses que vous verrez dans notre projet est l'imbrication. imbrication est vraiment utile. Lorsque vous pensez au HTML, vous avez une hiérarchie imbriquée et visuelle claire de vos éléments HTML. CSS n'offre pas vraiment cela. Mais avec l'imbrication, quelque chose comme un nav où vous auriez un UL et LI et un lien d'ancrage. Vous pouvez maintenant voir qu'ici, ils sont tous ensemble, ils ont du sens. C' est très facile à entretenir, alors que vous vous répétez ici, nav ul, nav li, nav a. Quand vraiment il est juste plus facile de les garder tous ensemble. Vous pouvez surpasser les choses de nid, cela peut devenir compliqué à remplacer et à maintenir, donc vous devez être prudent avec cela, mais avec quelque chose comme un nav, il est logique de garder tous vos trucs ensemble dans l'imbrication. Une autre chose cool que vous pouvez utiliser avec Sass est les opérateurs, et j'utilise souvent beaucoup les opérateurs. Je vais faire des calculs pour comprendre mes largeurs en fonction de ce que je fais, mais je les utilise beaucoup avec les couleurs. Donc, si j'ai une couleur qui est la même, ces deux couleurs sont toutes les deux chez Brown, et je veux que l'une soit un peu plus claire et l'autre qu'elle soit un peu plus foncée. Je vais les multiplier. Si vous montez, passez un qui le rend plus léger. Si vous descendez sous une couleur qui le rend plus sombre et c'est juste un moyen facile, et en quelque sorte d'aller chercher une autre couleur et le mettre, vous pouvez simplement la multiplier. Donc c'est plutôt cool. Dans la vidéo suivante, je vais vous montrer comment je génère généralement des couleurs, comment je trouve une palette de couleurs, puis nous allons ajouter certaines de nos couleurs en utilisant les variables Sass, puis tout au long de notre projet, nous allons utiliser plus de Sass, donc vous le verrez dans le reste du projet. Commençons. Dans cette vidéo, je vais vous parler de la façon dont je pourrais générer des couleurs si je n' ai pas de programme comme Sketch ou Adobe produits. Donc, c'est juste un site gratuit que j'utilise beaucoup. C'est plutôt cool. Il s'appelle refroidisseurs dot com, et j'aurai un lien pour cela dans nos ressources de classe. Ce que cela fait est, il vous permet de générer des palettes de couleurs. Si je clique simplement sur cette barre d'espace sur mon clavier, je peux passer à travers et voir bouquet aux palettes de couleurs. Je peux les accompagner, trouver des palettes de couleurs qui vont avec ça. Mais ce que je fais habituellement avec mes images CSS, c'est que je trouve une image que je pourrais vouloir recréer en ligne, puis je peux aller ici, et si j'ai une capture d'écran de celle-ci ou si j'ai l'URL, je peux déposer cela et je peux obtenir le palette de couleurs de cette façon. Donc si je bouge ça, j'ai le bleu. Je peux cliquer sur celui-ci et ensuite je peux le mettre où je veux. Je peux obtenir une couleur brune et cliquer sur celle-ci. Je peux avoir cette petite couleur d'accent ici. C'est vraiment cool. À ce stade, vous pouvez ensuite générer les couleurs, que j'ai eu ma palette de couleurs ici. Super utile. Vous pouvez exporter ceci si vous le souhaitez. Vous pouvez saisir les couleurs, vous pouvez le faire. Vous pouvez les copier et mettre les couleurs sur. Vous pouvez même les exporter et ils les exporteront en tant que variables pour vous. C' est un site gratuit. Tu n'as pas à t'inscrire. Si vous vous inscrivez, il suffit d'enregistrer des palettes de couleurs pour vous. Je l'utilise tout le temps. C'est super utile et je voulais partager ça avec vous. Alors allons de l'avant et commençons à ajouter certaines de nos couleurs dans notre projet en utilisant des variables Sass. Si c'était un projet où je travaillais au travail, je ne nommerais probablement pas des choses ciel et bois ou des choses comme ça pour mes variables, je les nommerais comme texte principal, choses qui ont du sens pour d'autres développeurs à venir et l'utiliser aussi, mais lorsque vous créez des images CSS, vous pouvez les nommer, ce qui est logique pour vous. Donc pour nous, nous avons notre couleur du ciel. Nous allons ajouter, nous avons notre couleur bois. Nous avons une couleur blanche. On a un trou noir ici. Nous avons la couleur d'accent, nous avons la tache , puis nous avons une bordure, et ce seront nos couleurs que nous allons utiliser pour tous nos projets. Vous verrez que nous les ajouterons plus tard, et je peux vous montrer comment le faire si vous voulez commencer avec une des couleurs, nous pouvons aller de l' avant et l'ajouter à notre arrière-plan, ciel de fond. Ne vous inquiétez pas pour ça. Le cadre ou le HTML ici, nous allons le faire dans notre prochaine vidéo avec positionnement. Donc, pour l'instant, il suffit d'esquisser vos variables et de mettre votre arrière-plan en tant que Sky, et ensuite nous arriverons à notre vidéo de positionnement vers le haut. 4. Enfiler: Chaque fois que je démarre une nouvelle image CSS, la première chose que je fais habituellement est de configurer un cadre pour cette image. cadrage de l'image nous donne une bonne occasion de passer sur le positionnement en CSS. Il y a donc six valeurs pour la propriété position, elles sont statiques, relatives, absolues, fixes, collantes et héritées. Ensuite, cette classe nous allons passer sur le positionnement relatif et absolu. Certaines des choses délicates à savoir sur le positionnement relatif et absolu sont, est que si nous avons un élément enfant avec une position absolue, l'élément parent l'ignorera. Donc, afin de rendre l'élément enfant positionné absolu en fonction de l'élément parent, nous devons d'abord définir la position des parents sur relative. Je vais vous montrer un exemple ici. Dans cet exemple, nous avons deux éléments parents et deux éléments enfants. L' un des parents a la position relative qui lui est appliquée et l'autre non. Donc, lorsque nous ajoutons le positionnement du top 0 à cet élément enfant, il est positionné par rapport à son parent, tandis que celui-ci est ignoré par son parent et sa position par rapport au corps du document. Donc, si nous décommentons ce code ici, nous verrons que l'élément enfant est maintenant positionné par rapport à son foyer parent. Donc, pour notre projet, nous voulons que tout le contenu soit positionné par rapport au cadre que nous avons ajouté et non par rapport au corps du document. Nous ajoutons donc la position par rapport à la trame de classe. Alors faisons-le maintenant dans notre projet. Certaines des autres choses ici sont juste des choses que je fais généralement dans chaque projet. Je donne à notre cadre une largeur et une hauteur. J' ai dit débordement caché si je ne veux pas montrer quoi que ce soit en dehors du cadre et je fais marge 0 auto pour qu'il soit au centre ici. Donc, pour notre projet, les premières choses que nous allons faire sont ces cercles ici. Dans notre projet, il s'appelait border_1, border_2, bordure trois, puis un trou. Allons de l'avant et ajoutons le premier border_1 à notre projet. Juste une note rapide sur le code pen. Il y a un plugin intégré que vous pouvez également obtenir sur beaucoup d'éditeurs de texte appelés émettent. Je l'utiliserai tout au long du cours. Il améliore considérablement le flux de travail HTML et CSS. Ça le rend beaucoup plus facile. Donc, quand vous me verrez faire quelques choses, je vais le signaler au début, mais nous l'utiliserons tout au long du cours. Donc avec lui du tout je dois faire si je veux un autre div est que je peux faire point et puis je peux mettre le nom de classe déjà boarder_1 et puis je peux appuyer sur « Tab », et puis j'ai div classe border_1 déjà ici avec la balise div de fermeture. Donc, nous allons commencer à ajouter le code pour notre première bordure et je commence généralement avec une largeur et une hauteur, que vous ne verrez pas tant que nous ne lui donnons pas une couleur de bordure. Donc on va faire la frontière. Deux pixels solides, puis notre bordure de couleur que nous avons saisi plus tôt. ce moment, c'est un carré et donc si nous voulons le faire rond comme dans notre exemple, nous lui donnons un rayon de bordure, 50 pour cent, et cela le rendra parfaitement rond. Lorsque vous avez une largeur et une hauteur qui sont de taille égale. Ensuite, nous voulons faire la position absolue. On va aller à gauche à environ 30 pour cent et parler de 21e. Les images CSS, ce positionnement de gauche et de haut, c'est juste quelque chose que vous avez à jouer avec. Si je le mets plus de 50 pour cent à gauche, ce serait un peu trop loin et je veux que tout soit centré par rapport à l'élément parent, qui dans ce cas est le cadre. Alors j'ai fait les 30 pour cent. Parce que nous avons la position relative sur le parent, il reste 30 pour cent de l'ancêtre le plus proche, qui serait notre élément parent ici, le cadre. Donc ça va de 30 pour cent de plus de notre cadre. Juste pour montrer qu'un peu mieux, j'ai mis une bordure, deux pixels solides pour entourer notre cadre très rapidement et je peux effectivement voir que 30 pour cent n'est pas vraiment centré. C' est un peu fini. Donc si on y allait peut-être 25 pour cent, je pense que nous serions un peu plus et plus de centres. Parfois, il est bon d'ajouter un petit cadre à votre image afin que vous puissiez voir exactement ce qui serait au centre de votre positionnement ici. Donc, nous pouvons aller de l'avant et nous pouvons travailler à ajouter notre prochain trimestre. Donc encore une fois, nous allons faire l'ordre des points deux frappé « Tab », et encore une fois nous avons un div d'ouverture et de fermeture avec la classe déjà. Ce border_2 va également avoir une bordure de deux pixels, solide, puis la couleur de bordure, et il aura également un rayon de bordure de 50 pour cent. Donc, au lieu de faire cela deux fois dans notre code, nous pouvons garder notre code un peu plus sec en putting.border_1 puis mettre une virgule et then.border_2, puis simplement ajouter notre code ici et le sortir d'ici. Cela appliquera la bordure à la fois border_1 et border_2. Donc, pour notre border_2, nous allons vouloir avoir une largeur qui est juste un peu plus petite que notre première bordure. Donc, je vais essayer avec 23rem et hauteur 23rem. Alors nous voulons lui donner cette couleur. C' est notre couleur d'accent. Donc, nous allons faire l'accent de fond. Alors nous voulons que ce soit fini juste un peu. Donc, je suis allé de l'avant et a fait marge 0.3rem. Encore une fois, c'était juste jouer avec elle et voir ce qui le centrerait dans le border_1. Vous pouvez voir que j'ai sauté un peu en avant parce que border_3 et le tout sont très similaires à ce que nous venons de faire avec border_1 et border_2. Donc encore une fois, nous voulions juste avoir une largeur et une hauteur un peu plus petites sur ces deux et ensuite nous voulions avoir la marge que je devais jouer un peu avec. Celui-ci avait 0,5rem et celui-ci avait 0,2, et pour garder notre code sec, parce que nous aurions dû répéter cette bordure, deux pixels, bordure solide et rayon de bordure 50 pour cent quatre fois différentes. Donc, nous l'ajoutons juste ici et mettons chaque nom de classe juste ici pour être appliqué à elle. Ensuite, les deux prochaines vidéos, je vais vous montrer comment utiliser les pseudo-éléments avant et après, et comment utiliser le chemin de clip et un peu plus sur border-rayon. Commençons. 5. Éléments de pseudo: Maintenant, nous allons parler de pseudo-éléments, qu'une fois que vous aurez appris, vous trouverez que vous pouvez réellement utiliser tout le temps. J' utilise des pseudo-éléments à peu près tous les jours, dans chaque projet que j'utilise, plusieurs fois, ils sont super utiles. pseudo-éléments avant et après créent un pseudo élément qui s'insère avant l'élément ou après l'élément que vous ciblez. Ce n'est pas dans le DOM. Vous ne mettez cela dans le HTML nulle part. Tout cela est juste dans le CSS et je vais vous montrer comment cela est fait. Dans notre exemple, nous avons un bouton et dans notre HTML nous avons juste un div, nous avons notre bouton et nous avons les mots, Cliquez sur moi.Il n'y a rien d'autre ici. Mais comme vous le verrez quand nous aurons notre bouton, nous avons un emoji licorne et nous avons une flèche. Ceux-ci sont appliqués avec juste après et avant des pseudo-éléments. Comme vous pouvez le voir dans notre code, nous avons ciblé notre bouton avec l'avant et l'après. Pour le faire en vol stationnaire, c'est un peu délicat. En fait, j'ai mal fait ça la première fois que j'ai dû le chercher. Tu es en train de le baser sur le vol stationnaire du parent. Donc, le vol stationnaire viendrait avant l'avant ici. Ensuite, quand nous avons un vol stationnaire, nous obtenons maintenant l'emoji et la flèche. L' emoji est l'avant, c'est avant le clic moi, et la flèche est le après il vient après le texte ici. Dans notre prochaine vidéo, nous allons appliquer ce que nous venons d'apprendre ici dans notre projet de classe. Commençons avec ça. Notre projet, nous allons utiliser des pseudo-éléments à deux endroits. On va l'utiliser pour cette partie moelleuse de base de pont qui sort ici. C' est notre après et ensuite nous l'utilisons aussi sur nos chevilles, puis le petit point qui est à l'intérieur de nos chevilles est l'après. Allons de l'avant et faisons cela dans notre projet. Vous pouvez voir dans notre HTML j'ai ajouté un div avec la base du pont de classe, et ensuite j'ai ajouté dans quelques CSS ici. Nous avons des antécédents et nous entendons dire que nous utilisons du bois. Donc, voici encore une fois notre classe SAS ou les variables SAS, désolé. Ensuite, nous avons une largeur et une hauteur. C' est juste quelque chose avec lequel j'ai joué et deviné. Nous avons positionné l'absolu pour que nous puissions le positionner là où nous le voulions, et comme c'est en dessous, sa position par rapport au cadre, et ensuite nous avons un top 60 pour cent de la trame, il reste 27 pour cent de la trame. Il a une bordure supérieure pour le rendre un peu plus léger et réellement besoin de commenter l'ombre de la boîte. C' est quelque chose que nous allons entrer dans une autre vidéo. Mais maintenant que nous avons cette base ici, nous pouvons ajouter notre, ce que j'ai mis en avant juste pour vous montrer les gars avant que nous positionnons absolu. Dans ce cas, peu importe si c'est avant ou après. Mais puisque nous utilisons un après plus tard, je suis allé de l'avant et j'ai utilisé l'avant. Donc, chaque fois que vous utilisez les pseudo-éléments, vous devez avoir un contenu, et cela pourrait avoir du contenu si vous le voulez. Mais comme nous n'avons pas vraiment besoin d'ajouter quoi que ce soit, nous le laissons vide. Mais cela est nécessaire que nous positionnons absolu et cela est positionné par rapport à la base du pont, puis nous faisons en bas, négatif 48 pour cent, à gauche 10 pour cent, nous faisons une largeur et une hauteur et un fond bois sombre. Allons-y et sortons ça et ça va apparaître ici. Vous pouvez voir qu'il apparaît en dessous. ce moment, il ne ressemble pas vraiment à la façon dont nous l'avons dans notre produit fini, parce que nous n'avons pas encore passé le clip. Donc pour l'instant je vais juste le laisser comme ça, c'est bon. On y retournera et on le réparera et il sera plus joli une fois qu'on aura passé le clip. Allons de l'avant et ajoutons les chevilles aussi. Ok, je suis allé de l'avant et j'ai ajouté les chevilles dans notre HTML. Je ne vais pas m'asseoir ici et coder chacun pour que vous puissiez voir. Je suppose que vous savez au moins comment coder HTML en CSS. Donc on veut se rendre à ce qu'on fait ici avec eux. Donc, pour ce cas, j'ai fait peg et j'ai donné à chacun une autre classe, peg 1, peg 2 , peg 3, peg 4, peg 5, peg 6 et je vais vous montrer pourquoi dans notre CSS en seulement une minute. Donc, pour tous pour faire notre sécheur de code, je leur ai donné la cheville de classe parce qu'ils vont tous avoir un rayon de bordure de 50 pour cent, ils vont tous avoir la même largeur, la même hauteur, la même notre arrière-plan est l'accent variable, la position absolue, et ils vont tous être à 50 pour cent du haut de cette base ici. Encore une fois, nous allons entrer dans l'ombre de la boîte dans une autre. Donc pour l'instant tout va paraître très plat. Quand nous faisons notre après, tout ce que cela fait est d'ajouter ce petit point que nous avions sur notre photo. Ça peut sembler bizarre en ce moment, et c'est parce qu'ils sont tous en fait au-dessus de l'autre. Ils sont tous positionnés absolument. Ils sont tous au même endroit. C' est pourquoi j'ai fait la classe supplémentaire de peg 1, peg 2, etc. Parce que nous pouvons maintenant juste avoir à écrire la propriété gauche que nous voulons ici et jusqu'où nous voulons qu'elle aille à gauche. Allons de l'avant et commentons ceci et vous pouvez voir de quoi je parle ici. Maintenant, ils sont tous positionnés différemment les uns des autres. Ils se chevauchent un peu, et ils ont tous leur petite place ici, ce qui est notre après. Donc c'est comme ça que nous utilisons l'après dans ce cas, nous n'avons pas eu à entrer et écrire un tas de divs qui finiraient par être petits endroits que nous avons positionnés absolus puis mis sur le dessus des spots, nous avons pu le faire sans avoir à mettre un autre élément HTML. C' est vraiment génial, c'est pourquoi avant et après peuvent être très utiles. Dans la vidéo suivante, je vais parler du niveau du sentier. Je vais vous montrer un exemple de la façon dont vous pourriez réellement l'utiliser en production, et ensuite nous allons faire en sorte que notre petite base ici ressemble un peu mieux. Alors allons-y. 6. Clip-Path et rayon Clip-Path: Clip-path est une propriété intéressante que j'ai ici de l' Indien parce qu'ils font du bon travail de juste avoir quelques démos ici pour vous montrer. C' est un exemple de ce à quoi ressemblerait un cercle. Vous pouvez faire un cercle de chemin de clip qui est une propriété qu'ils ont, clip l'ellipse de chemin et ensuite vous mettez dans certains points ici ou vous pouvez faire polygone et encore mettre dans certains points que nous allons passer en une seconde ce que certains d'entre eux signifient. Si vous ajustez cela, vous pouvez voir que la forme de cette image a peut-être été plus longue. Cinquante pour cent, ce que vous penseriez normalement si vous faites le rayon de la frontière, le sinus plus profond. Si quelque chose a la même largeur et la même hauteur fera un cercle. Mais si ce n'est pas la même largeur et la même hauteur, ça ne va pas faire un cercle donc ici c'était 40 pour cent. C' est quelque chose que vous pouvez continuer et vous pouvez jouer avec. Je vais essayer de supprimer le lien vers cela dans nos ressources de classe. La syntaxe peut être un peu difficile à s'habituer au début, mais vous pouvez soit faire comme nous l'avons vu en indien, vous pouvez mettre une forme de base comme un cercle ou une ellipse. Vous pouvez faire une source ellipse, qui peut être une URL si vous avez déjà une image ou si vous pouvez faire une zone de géométrie. Maintenant, si on regarde ici, c'est comme ça que je les fais souvent. C' est juste un polygone et ensuite vous avez tous ces nombres. Quels sont ces chiffres ? Il va découper toutes les images en forme de losange ici. Mais pourquoi ? Tout dépend des valeurs de ce qu'on appelle les sommets. Dans le diagramme suivant, ici fait un très bon travail de montrer cela donc c'est pourquoi je suis allé sur ce site. C' est le point sur place. Il est appelé introduction de la propriété de chemin de clip CSS. Ici, nous avons 50 pour cent, zéro pour cent de nos deux premiers points. Nous sommes plus de 50 pour cent sur notre x et nous sommes zéro pour cent sur notre y qui est tout le haut. On a fait 100 pour cent sur notre y que vous voyez ici et 50 pour cent, c'est fini. Ce sont nos points ici. Nous sommes 100 pour cent sur notre x ici et seulement 50 pour cent ici sur notre y et encore ici nous sommes à 0 pour cent sur notre x et 50 pour cent sur notre y. C'est quelque chose que vous pouvez jouer avec. Vous pouvez essayer de comprendre vos chiffres, mais une grande ressource que beaucoup de gens aiment utiliser, je l'utilise tout le temps, rend super simple, il s'appelle clippy. Laisse-moi te montrer. C' est clippy. Clippy vous pouvez choisir une forme que vous pourriez vouloir. Si nous voulions un trapèze et puis vous pouvez venir ici et vous pouvez le réparer si vous voulez des formes vraiment bizarres, descendre, venir, tout ce que vous voulez faire et ensuite vous pouvez juste copier le code ici. Il a déjà tous les points pour vous. Vous le copiez et vous le mettez dans tout ce que vous utilisez, peu importe ce que vous essayez de cliquer. C' est si facile. C' est vraiment agréable à utiliser. Vous pouvez faire toutes sortes de formes. Beaucoup de gens aiment utiliser cette ressource donc je vais m' assurer de mettre cela dans nos ressources de classe pour que vous puissiez voir. Cas d'utilisation commun pour le chemin de clip que vous verrez sur le web partout en ce moment est ce petit angle que vous obtenez dans une image de héros. Tout ce que vous avez à faire est que vous avez votre image, puis dans la même zone où vous avez votre image d'arrière-plan, dans ce cas, c'est dans mon en-tête, vous ajouteriez votre chemin de clip et ensuite vous changeriez les points pour correspondre à cela. Si je change certains de ces points, vous pouvez voir qu'il peut changer radicalement où se trouve le chemin du clip. Ici, j'ai changé ce 100 pour cent à zéro. Vous pouvez voir à quel point ça a changé. Là, on pourrait changer ça à 50 pour cent. Pourtant, dans toutes sortes d'images folles, il est vraiment facile de jouer avec votre inspecteur ou comme je l'ai dit sur le site, clippy. Allons de l'avant et ajoutons ce petit chemin de clip à notre projet ici. On descendra à la base du pont et à l'avant. Ensuite, j'ai un webkit ici parce que le chemin du clip n'est en fait pas très pris en charge. Pourtant, les chemins de clip SVG sont beaucoup plus pris en charge. Lorsque j'utilise des éléments de production, j'utilise souvent des chemins de clip SVG. Mais pour faire ces images de la façon dont la plupart des gens font des images CSS sur CodePen, vous les verrez en utilisant le chemin de clip comme celui-ci. Je veux parler rapidement d'une autre façon de créer des formes, c'est-à-dire avec le rayon de bordure ou la bordure. Dans beaucoup de mes images, je n'utilise pas forcément clippy. Je pense que j'ai utilisé un chemin de clip ici. En fait, j'utilise souvent une bordure pour créer toutes ces formes. Si nous regardons ici, sont que des divs carrés sur lesquels j'ai utilisé un rayon de bordure. Nous pouvons faire rouler le doigt gros, le rendre vraiment petit. Vous pouvez modifier radicalement les formes de vos images à l'aide d'un rayon de bordure ou d'une bordure. Pour un bon exemple de certaines des formes que vous pouvez simplement créer avec une bordure, vous pouvez consulter CSS TRICKS. Ils ont créé des formes de CSS et beaucoup de ces formes. C' est un rayon de frontière. Ce sont des frontières. Toutes ces formes sont créées avec des bordures différentes, où il n'y a qu'un quart d'affichage sur un côté, mais vous avez beaucoup de pixels ou quelques côtés de tout le lot de pixels et ne pas afficher sur les autres côtés et c'est ainsi vous créez ces triangles. Vous voyez beaucoup en ligne qui vont sous comme des menus ou des drapeaux différents. Vous pouvez créer toutes sortes de formes avec une bordure ou un rayon de bordure. C' est un peu fastidieux. Beaucoup de gens ne veulent pas créer ces formes avec un rayon de bordure ou une bordure, donc beaucoup de gens vont utiliser soit le chemin de clip SVG, soit le clippage. Dans la prochaine vidéo, je vais vous parler de tout ce que vous pouvez faire avec l'ombre de la boîte. Il y a beaucoup de choses que vous pouvez faire avec l'ombre de la boîte. Je suis heureux de vous montrer quelques exemples de pixel que j'ai créé avec l'ombre de la boîte. Certains des effets sympas que vous pouvez créer sur des choses comme boutons et comment nous allons ajouter un peu de profondeur à notre projet afin qu'il ne soit pas si plat en utilisant l'ombre de boîte alors passons à cela maintenant. 7. Ajouter de la profondeur avec l'ombre de boîte: Dans cette vidéo, nous allons parler de box-shadow. Quand vous pensez à box-shadow, vous pouvez simplement penser à ajouter un peu d'ombre sous quelque chose pour le faire apparaître un peu. Ça ajoute juste un peu de profondeur. Mais il y a en fait beaucoup de choses que vous pouvez faire avec box-shadow qui est vraiment cool. Regardons box-shadow une seconde. Plus il y a box-shadow. Dans la boîte à ombre, vous avez un décalage horizontal, vous avez un décalage vertical, un rayon de flou, puis vous avez un rayon d'étalage facultatif et une couleur. Si vous souhaitez modifier la couleur par défaut est noire. Regardons un exemple très rapidement, qui le montre vraiment bien. Ceci est juste un générateur de box-shadow en ligne. Vous pouvez l'utiliser pour générer vos ombres de boîte, si vous ne voulez pas avoir à comprendre toutes les différentes propriétés ici. Juste pour vous montrer un exemple, notre longueur horizontale va le long de l'axe des x ici, notre longueur verticale va le long de l'axe des y. Le flou est à quel point vous le voulez. Que vous vouliez qu'il soit complètement croustillant ou que vous vouliez qu'il ressemble un peu plus à une ombre, puis étalé pour l'étaler. Vous pouvez changer votre couleur. Il y a tout ce que vous pouvez faire avec box-shadow, juste pour avoir quelque chose derrière et lui donner un peu plus de profondeur. Mais regardons d'autres façons d'utiliser box-shadow. Ce sont quelques effets de survol simple que vous pouvez faire avec box-shadow. Vous les verrez en ligne partout. Celui-ci est fait par Giana. Je crois que vous voyez son nom sur CodePen. Si on regarde ça, tu peux voir que ça fait tout. Ceux qui entrent, ceux-ci animent une box-shadow encart, et ceux qui sortent sont la box-shadow normale. Une autre chose cool que vous pouvez faire avec box-shadow aller avec nos images CSS ici, est que vous pouvez créer de l'art pixel avec box-shadow. La prémisse ici est que vous pouvez dessiner des images de pixels dans un seul élément en utilisant une grosse boîte d'ombre compliquée. Si vous voyez dans cet exemple simple ici, vous avez trois petits carrés. Parce que, si vous déclarez un décalage vertical et horizontal pour la box-shadow mais pas un flou, vous obtenez ces carrés vraiment nets, ces carrés noirs, l'ombre de boîte originale. Ensuite, ceux-ci viennent de la gauche et de la droite. Vous pouvez faire un dessin entier comme celui-ci ici avec l'ombre de boîte comme ça. Vous pouvez même animer box-shadow. Regarde comme cette chauve-souris est cool. Vous pouvez voir la grosse boîte compliquée ici. Ils l'ont dans une animation, que nous allons passer, animations d' images clés, un peu plus tard. Ceci est une petite démo rapide de la différence entre box-shadow normal et box-shadow inset. Votre box-shadow régulier sortira de n'importe quel élément est et l'encart ira à l'intérieur. Dans la vidéo suivante, nous allons aller de l'avant et commencer à appliquer une partie de la box-shadow à notre projet, afin que vous puissiez voir comment cela fait apparaître les différents éléments. Cela leur donne beaucoup plus de profondeur. ce moment, notre image est très plate. Au fur et à mesure que nous continuons et que nous finissons le projet, nous continuerons à ajouter box-shadow à nos différents éléments que nous ajoutons. Allons-y. Maintenant, nous allons passer à travers et nous allons ajouter un peu d'ombre à certains des trucs que nous avons déjà ici. Nous avons notre base de pont, et si nous ajoutons un peu d'ombre, vous pouvez voir qu'il apparaît un peu. Ce n'est pas si plat. On dirait qu'il sort un peu de la page, ce qui est cool. On dirait que le pont sort de ce qui serait notre guitare. Je veux vous montrer ici, dans l'inspecteur à quoi ressemblera une partie de ça si je change un peu. ce moment, je l'ai comme un pixel, un pixel, et trois pixels. Disons que nous avons fait cinq pixels, qui va sortir beaucoup plus à gauche. Au lieu d'être centré sur la façon dont je l'avais avant, où ça sort un peu de sorte qu'on dirait que la lumière vient d'un côté parce qu'elle est sur la gauche et pas sur la droite, mais ça ne semble pas si drastique ici. On dirait que la lumière vient de côté et de bas, c' est ce que nous voulons à notre image. Celle-ci est notre flou pour que nous puissions le rendre vraiment floue, vous pourriez faire cinq, sept huit. Tu pourrais continuer avec ça et ça le rend encore plus pop. Mais j'aime ça à trois heures. Je pense que ça a l'air sympa. Je pense que ça a l'air bien. C' est à vous de décider. Vous pouvez changer toujours autour, vous pouvez jouer avec. Vous pouvez faire ces images, les vôtres. Maintenant faisons la même chose avec l'après et avec nos chevilles pour qu'ils aient l'air d'apparaître un peu. Dans notre code, je suis désolé, c'était notre avant. Nous pouvons maintenant décoller et ajouter notre box-shadow. Attendez une seconde pour qu'il se charge. Vous verrez maintenant que ça donne l'impression qu'il est penché un peu comme un pont sur une guitare. Ensuite, quand on l'ajoute à nos chevilles, ça va les faire apparaître un peu trop et leur donner un peu de profondeur. Vous pouvez jouer avec ceux-ci. Vous aimeriez que ça ait l'air un peu différent. Vous pourriez trouver une couleur différente ici, peut-être plus d'un brun au lieu du noir. C' est un peu marron. C' est juste un brun foncé. C' est la même couleur que la tache. Je vais vous donner une seconde pour regarder le code. Ensuite, nous allons l'ajouter à un autre endroit et nous allons réellement faire l'encart cette fois. Voici notre trou, nous allons l'ajouter ici. Ensuite, prenez une seconde pour qu'il puisse charger. Maintenant, vous pouvez voir à cause de l'encart, il semble que cela va tomber maintenant. Il ressemble plus à un trou réel, au lieu d'un point noir qui est au milieu de la page ici. C' est tout ce qu'on va ajouter pour l'instant. Nous allons ajouter un peu plus et notre projet, après avoir ajouté quelques éléments supplémentaires. 8. Transformes et transitions: Dans cette vidéo, nous allons parler des transformations et des transitions. Un peu plus tard, nous allons parler d'animations, mais pour y arriver, d'abord, nous allons parler de transitions et de transformations. Quand nous parlons d'animation, je vais vous parler de la façon dont les transformations et l'opacité sont les façons les plus performantes d'animer. Cela peut sembler un peu limitatif au début, mais une fois que vous comprenez toutes les choses que vous pouvez faire avec les transformations, vous verrez que ce n'est vraiment pas limitatif du tout. Commençons à les apprendre un peu. Aussi, je veux faire une note rapide et juste dire que j'ai construit certains de ces exemples tout au long du cours que je vous ai montré tous, et ceux-ci seront dans une collection que je partagerai dans nos ressources de cours afin que vous pouvez revenir en arrière et jouer avec eux, changer les choses et apprendre un peu plus de cette façon aussi. Regardons la première transformation que nous avons ici. Nous avons une échelle de transformation, et cela sera mis à l'échelle à la fois sur l'axe x et l'axe y lorsque nous l'avons de cette façon. Il augmente deux fois sa taille. Passons la souris ici et voyons son échelle. Ici, il va, en mettant à l'échelle à la fois le x et le y. Si nous voulions qu'il aille juste le x, nous pourrions l'écrire de cette façon, 'scalex', et il sera mis à l'échelle à travers l'axe des x ici deux fois sa taille. Vous pouvez faire la même chose pour le y lorsque vous utilisez l'échelle, et cela sera en fait la mise à l'échelle vers le bas, donc si vous passez au-dessus d'un, donc si vous passez au-dessus d'un, vous augmentez la taille. Cela va être la moitié de sa taille en faisant 0,5 ici. Vous pouvez voir qu'il se rétrécit maintenant. Si j'avais monté, il aurait grandi vers le haut. Le suivant est biaisé. Vous pouvez faire soit skewx ou skewy, et vous utilisez des degrés pour cela. De cette façon, tu vas faire des skewx 40 degrés. Vous pouvez utiliser des nombres négatifs ou positifs. On verra ce que c'est avec l'inclinaison ici, et c'est une inclinaison négative de 25 degrés sur l'axe Y. Notre prochaine transformation est la rotation. C' est une rotation de 30 degrés. Tu pourrais faire un négatif de 30 degrés si tu le veux. Vous pouvez faire pivoter juste sur l'axe des y, ce qui l'inversera. Comme vous voyez les cartes maintenant en ligne. Les gens ont des cartes différentes, alors utilisez une face arrière et permettez une visibilité faciale, et vous pouvez voir l'arrière d'une carte comme ce qu'ils sont appelés lorsque vous les utilisez sur le Web. On peut faire la même chose avec le x, et je vais juste retourner dans l'autre sens, donc rotatex, maintenant il est retourné de haut en bas. Ensuite, il y a transformation : rotatez. C' est une rotation de 90 degrés. Notre dernière transformation est la traduction. Cela va se déplacer à la fois sur l'axe x et l'axe y. Vous verrez qu'il dépasse 50 tout en descendant 20 pixels. Si tu voulais juste y aller, tu pourrais faire Transformx. Cela va dans la direction négative. Vous pourriez faire le positif si vous voulez que je fasse juste le Y. Maintenant, il irait vers le bas, et si nous mettons un négatif ici, il monterait. Vous pouvez voir même s'il n'y a que quatre choses que vous pouvez transformer, vous pourriez en fait faire beaucoup avec chacun d'eux. Avoir les différents x et y et les différentes façons que vous pouvez transformer sur eux, cela crée juste beaucoup d'occasions d'essayer différentes transformations. Si nous revenons dans notre code ici, vous verrez que j'ai eu une transition sur ceux-ci tout le temps. J' ai eu toute transition, et si je n'ai pas eu de transition sur eux, voyons quel est l'effet. Vous pouvez voir maintenant quand je survole que tout se passe tout de suite. n'y a pas d'assouplissement qui donne juste une meilleure expérience utilisateur lorsque vous avez un peu de temps entre les deux. C' est choquant. C' est pour cela que nous utilisons les transitions. Venant ici pour les astuces CSS, nous pouvons regarder ce que chacune de ces propriétés sont. Vous pouvez voir que j'écrivais la propriété abrégée pour la transition. Vous pouvez réellement l'écrire sur la propriété de transition, puis lui donner sa valeur, durée de transition, lui donner sa valeur, mais la plupart du temps, vous verrez qu'il est abrégé comme celui-ci. Voyons ce que sont ces valeurs. La propriété de transition est tout ce que vous essayez de faire la transition. Si vous essayez de faire passer votre couleur d'arrière-plan, alors vous le mettrez ici. J' ai eu la transition tout ce qui serait transition de tout ce que j'avais mis l'effet de vol stationnaire, comme nous survolons. Ensuite, nous avons la durée de transition. Combien de temps vous voulez que ça dure, et ici c'est 0,5 seconde. Vous pouvez également mettre cinq millisecondes si vous voulez utiliser, ou 500 millisecondes, si vous voulez utiliser des millisecondes, alors nous avons la fonction de synchronisation de transition, et c'est l'assouplissement. Vous pouvez utiliser les fonctions d'assouplissement intégrées, il y a facilité, facilité linéaire , facilité de sortie et facilité de sortie, je crois, mais vous pouvez également créer le vôtre avec quelque chose appelé un cubic-bezier. Regardons ces très vite. Ceci est juste un créateur de cubique-bezier en ligne. Ils sont partout. Vous pouvez juste google cubic-bezier, et vous verrez probablement un pop up. Je vais essayer de me rappeler d'en mettre un dans nos ressources de classe, pour que vous puissiez jouer avec elle aussi. Dans notre projet, nous avons eu de la facilité, et si vous suivez celui-ci ici, vous verrez ce que fait la facilité, cela ralentit juste au début et va ensuite vite. Si vous vouliez créer votre propre facilité, vous pouvez déplacer ces petites poignées et regarder la rose ici. Vous verrez qu'il est plus ralenti vers le milieu, ce qui arrive quand vous l'avez comme ça. Si on en parle jusqu'au bout, tu verras que ça va très vite. Si on l'a fait tomber, ça le change à nouveau. Vous pouvez jouer avec ça. Vous pouvez faire de la facilité, vous pouvez faire de la facilité dans, vous pouvez voir à quoi il ressemble si vous faites un linéaire ou une facilité. Vous copieriez ce cubique-bezier, tout ce truc ici, et ensuite vous le mettiez dans, alors copions. Je pourrais le mettre au lieu de la facilité, je le mettrais ici. Maintenant, nous avons notre facilité personnalisée. Je sais que c'était une vidéo plus longue, mais je voulais m'assurer que j'ai vraiment passé les transformations et les transitions avec vous parce que nous allons les appliquer maintenant à notre projet et ensuite un peu plus plus tard aussi lorsque nous faisons certaines de nos animations. Passons à cela maintenant avec notre projet. Les gars, alors prenez un peu avec moi dans cette vidéo, parce qu'on va ajouter beaucoup de code. J' ai déjà ajouté beaucoup de choses dans le mien, sorte que nous ne prenons pas beaucoup de temps avec moi juste taper le code, mais je vais le revoir avec vous, et je ne veux pas que vous vous inquiétez trop à ce sujet parce que j'ai chaque d' entre eux dans un exemple qui sera dans nos ressources de classe. Il va y avoir une collection qui va avoir chaque vidéo et où le code commence et où le code se termine. Ensuite, il y aura un projet final que vous pouvez passer et vous assurer que tout votre code est correct. Mais allons de l'avant et parlons de la transformation et de la traduction dès maintenant. Dans mon HTML, tout le chemin après ma dernière cheville, vous pouvez ignorer la chaîne pour l'instant, mais quelque chose que j'ajouterai dans quelques minutes. Après ma dernière cheville, ma cheville 6, j'ai ajouté ce pont de classe div. Le pont est juste là. C' est ce que tes cordes seraient passées dans une guitare. Lorsque vous regardez habituellement un instrument, ceux-ci sont généralement légèrement inclinés dans un sens. Ils ne sont pas parfaitement en face comme ça. C' est ce que nous allons faire ici avec notre transformation, et nous allons traduire ce pont juste un peu. Dans votre CSS, allez de l'avant et ajoutez votre classe de bridge. On va faire l'arrière-plan et c'est la couleur qui est l'accent. Je l'ai fait 13.9 rems. J' ai fait la hauteur, 0,6 rems, position, absolue. Je voulais l'absolu relatif à la base ici. Ensuite, on a fait le top 25 pour cent, il descend de 25 pour cent et il en reste 22 pour cent. Puis je lui ai donné un peu d'un rayon de bordure de 10 pixels. Maintenant, nous allons ajouter à notre transformation. J' ai ajouté des préfixes fournisseur parce que transform n'est pas nécessairement pris en charge dans tous les navigateurs. Pour une bonne mesure, nous mettons les préfixes -webkit- dans -ms- fournisseur. Si nous descendons et nous regardons, nous verrons que ça a l'air très léger. Il ne fait que 0,5 degrés. Ce n'est pas vraiment une rotation ici. Je me rends compte que je continuais à dire traduire. Nous ne traduisons pas, nous le faisons tourner. Nous avons tourné à 0,5 degrés. On pourrait faire une rotation plus drastique. Tu pourrais faire deux degrés négatifs. Vous verrez que c'est un peu plus haut. Je ne pensais pas que ça avait l'air aussi sympa. Encore une fois, les préférences personnelles. Si vous voulez qu'il soit plus haut, vous voulez qu'il soit plus incliné, vous pouvez le faire. Je vais le remettre à 2,5 degrés ici. Le code suivant que nous allons ajouter sont nos chaînes qui sont dans notre projet final. Quand nous les faisons sur notre projet en ce moment, vous ne les verrez pas parce que nous allons les avoir en tête zéro pour cent. C' est pour que lorsque nous faisons l'animation, nous pouvons la faire grandir à partir du bas, tout le chemin du bas, jusqu'à tout un tas. C' est là que vous obtenez cette animation des cordes animées. On va faire ça dans un peu. Mais comme nous mettons ce code, vous pourriez ne pas voir les chaînes réelles et c'est correct. Nous les verrons quand nous ajouterons l'animation. Si nous revenons à notre HTML ici, l'intérieur de chaque div peg, s'il vous plaît mettre la chaîne de classe div. Ensuite, vous pouvez soit ajouter le délai maintenant ou vous pouvez ignorer cela. C' est ce que nous allons utiliser lorsque nous faisons les animations. Si vous voulez l'ajouter maintenant, vous pouvez ou vous pouvez attendre jusqu'à ce que nous fassions les animations dans un peu. Mais nous allons avoir six cordes. Ils ont tous besoin du même nom de classe. Nous n'avons pas à faire une chaîne 1,2 ou quoi que ce soit comme ça en ce moment. Juste une corde sous chaque cheville ici. Si vous voulez pointer la chaîne dans votre CSS, vous pouvez ignorer ce délai pour l'instant. On va encore appeler ça l'accent de fond. Nous lui donnons une très petite largeur, donc la largeur 0.1 rem, ça va être top zero. C' est tout le chemin ici en ce moment. Ça va être la position absolue, gauche 40 pour cent, et tout est relatif à nos piquets, parce que c'est à l'intérieur de nos piquets. C' est 40 % à l'intérieur de notre cheville. Puis j'ai réalisé que je tournais cela que j'ai z-index 3. Laisse-moi te montrer pourquoi j'ai fait ça. Ici, dans notre projet terminé, vous pouvez voir que les cordes semblent être sur le pont, comme sur une guitare. Si je retirais l'indice z 3, ils iraient sous le pont comme ça, ce qui n'est pas l'effet que je voulais. Mais alors j'ai réalisé que je pouvais simplement utiliser le positionnement dans le HTML pour le faire. Nous n'avons pas vraiment besoin de l'index z 3. Si nous ne voulons pas ajouter cela, vous devrez l'ajouter lorsque nous retournerons à notre CSS. Mais dans votre HTML, si vous allez ici et que vous prenez le pont en dessous de la dernière cheville, puis l'amener et le mettre sous la base du pont, il est maintenant sous l'index z des chevilles de toute façon, donc nous ne doivent mettre un index z dans. Si quelque chose arrive en premier, le pont, quel que soit le prochain sera au-dessus de cela dans votre HTML dans l'index z, sorte que vous n'avez pas à mettre dans l'index z 3 pour ce que vous faites avec l'index, tant que vous avez le pont avant les piquets. On va aller de l'avant et sortir ça de notre ficelle ici. Notre chaîne aura une ombre de boîte. Vous ne le verrez pas maintenant, donc nous n'avons pas besoin de l'ajouter maintenant. Nous voulons mettre un peu d'ombre de boîte sur notre pont, qu'il ne soit pas si plat. Si vous revenez au pont que nous avons ajouté il y a juste un peu, et puis j'ai fait box-shadow un pixel, trois pixels, cinq pixels, et puis j'ai choisi la couleur brunâtre à nouveau. Ça donne juste l'impression que le pont est en train de sortir de la base du pont ici et ne semble pas si plat. Ensuite, quand nos cordes vont dessus et qu'ils ont l'ombre de la boîte sur eux, aussi ils auront l'air de sortir de tout ça juste un peu. Il semble plus réaliste, ressemble plus à une guitare. Je sais que nous n'avons pas passé trop de transformations dans cette vidéo en particulier, mais nous allons appliquer plus dans nos animations pour notre avion dans un petit peu. Dans la vidéo suivante, nous allons passer en revue quelques SVG, puis nous allons faire des animations CSS. 9. Utiliser SVG: Parlons de SVG. SVG sont des graphiques vectoriels évolutifs. Ils sont un langage de balisage basé sur XML, et les bonnes choses à propos de SVG sont qu'ils peuvent être recherchés, indexés, scriptés et compressés, et vous pouvez les créer dans un éditeur de texte ou n'importe quel logiciel de dessin. Je fais souvent le mien dans Sketch ou Affinity Designer. D' autres personnes le font dans Adobe, puis vous pouvez les exporter. J' optimise le mien habituellement avec un programme appelé SVGOMG, puis je les mets dans mes fichiers. Il y a d'autres raisons pour lesquelles vous pouvez utiliser SVG. SVG sont cool parce que peu importe la taille que vous faites votre photo ou la taille que vous faites votre SVG, vous allez toujours avoir l'air agréable. Ils ont toujours l'air croustillants. Ils ne semblent jamais flous comme des images peuvent à différentes tailles d'écran et parce qu'il s'agit d'une image basée sur XML, vous pouvez animer à peu près n'importe quel morceau d' un SVG que vous pouvez trouver et extraire du DOM. Ici, je m'anime avec une bibliothèque appelée GSAP. Notre projet, va faire des animations CSS avec le SVG mais je veux juste vous montrer quelques-unes des choses que vous pourriez faire avec SVG. Ici, j'anime toutes ces différentes pièces individuelles. Ils changent de couleur et ensuite ils la traduisent. Une autre raison pour laquelle je pourrais utiliser un SVG, disons comme dans mes images CSS, est parce que je pourrais vouloir créer des formes cool qui sont difficiles à faire avec CSS. Je pourrais peut-être les faire avec CSS, mais ils vont prendre beaucoup de temps. Souviens-toi que je suis une mère de trois petits, donc je n'ai pas beaucoup de temps. Si je veux créer quelque chose de cool parfois, je vais le faire avec en SVG. Tout le reste ici est CSS. Tout est fait avec CSS, mais c'est ici, surtout avec ces angles, c'est fait avec un SVG. Si vous avez suivi le projet et que vous retirez cela de nos ressources de cours. Nous avons un SVG qui est commenté. Maintenant, nous pouvons utiliser ce SVG. Je l'ai enveloppé dans un cours appelé Jet. Allons de l'avant et commençons à appliquer cela à notre projet. Juste avant notre dernière div de fermeture ici, nous allons commencer à ajouter nos jets. Il va y avoir un jet, un jet, un jet, un jet deux comme nous l'avons avec nos piquets. Nous allons répéter le SVG six fois. Laisse-moi te montrer ici, maintenant je jette ça là-dedans. Donc nous avons jet, jet 1, jet 2, jet 3, et ainsi de suite jusqu'au jet 6. Allez-y et répétez vos SVG dans une classe div six fois et vous pouvez ajouter le jet, jet 1, le jet 2, jet 3, le jet 4, jet 5 et le jet 6. La première chose que nous allons faire est d'utiliser juste cette classe .jet qui est sur tous et nous allons tout positionner absolu. La bonne chose à propos de l'enregistrement, c'est que je peux trouver choses que j'ai mal faites la première fois et que je peux les sortir. Je viens de réaliser à nouveau, et je n'ai pas besoin de l'index z cette fois. Une fois que j'ai enlevé l'index z de cette chaîne, je n'en avais plus besoin pour mettre le SVG sur le dessus de la chaîne. On peut l'enlever. Nous n'avons pas vraiment besoin de ça. Ensuite, je vais faire un autre petit vidage de code ici, mais nous allons passer en revue. Maintenant, nous avons chacun de nos jets, jet 1, jet 2, et ainsi de suite et puis nous les positionnons tous à gauche. A gauche 36,5 pour cent. Je sais que ça devient très précis. C' est beaucoup de moi juste aller dans les « outils de développement » et inspecter puis le déplacer jusqu'à ce que je me sens comme il est aligné avec les chevilles, et la chaîne et la chaîne viennent avec l'animation. C' est tout ce qu'on avait à voir avec ça en ce moment. Dans notre prochaine vidéo, nous allons commencer à animer. Nous animerons notre chaîne et animerons nos SVG. Ensuite, nous allons finir et donc nous en avons presque fini avec le projet. Commençons par la suivante. 10. Animations CSS: D' accord. Maintenant, nous allons parler des animations CSS. Les animations CSS sont beaucoup de plaisir. Allons-y ici. Il y a beaucoup de propriétés dans l'animation, mais elles sont très similaires aux transitions que nous avons passées auparavant. On aurait un nom, celui-ci s'appelle Stretch. Nous aurions une durée d'animation comme dans nos transitions, donc celui-ci le fait plus d'une seconde. Fonction chronométrage, celui-ci est plus facile. On pourrait faire le cubic-bezier qu'on a déjà passé. Nous avons un retard, donc si je voulais retarder l'animation, je pourrais mettre un nombre supérieur à 0. Nous avons une direction d'animation. Celui-ci alterne en ce moment, il va et vient. Je pourrais juste le déplacer vers l'avant, ou je pourrais juste le déplacer vers l'arrière. Nous avons infini. Cela va encore et encore, c'est notre nombre d'itérations. Je pourrais juste en mettre un ou deux et l'animation n' arriverait que peu importe le nombre que j'ai mis ici, 20, 30, quoi que vous vouliez faire. Notre mode film d'animation est, si votre animation n'est pas en cours d'exécution. Ici, si je mets 2 et il est allé 1, 2, et puis je mets en avant, ça commence là où il a commencé. Ensuite, nous avons couru. ce moment, l'animation est en cours d'exécution. Il était en cours d'exécution lorsque nous avons chargé la page. Si nous mettons pause, il n'exécuterait pas l'animation lorsque nous avons chargé la page ou si parfois vous voulez juste mettre pause parce que vous essayez de déboguer votre animation un peu, donc vous pouvez mettre pause afin que l'animation ne continue pas et vous pouvez changer les choses. Ensuite, c'est la main longue pour l'animation. Si nous voulions faire le raccourci pour l'animation, tout comme notre transition, comment est le raccourci ? Tu peux le faire comme ça. Ce serait animation, deux-points, et ensuite nous aurions notre nom d'animation, notre durée, notre fonction d'assouplissement, notre retard, notre direction, notre compte, qu'il ait un mode de remplissage ou non, et ensuite nous l'aurions en cours d'exécution. Juste écrire ça ne vous donnera pas vraiment d'animation. Vous devez avoir votre cadre clé ici. Ajoutez des images clés et puis nous avons notre nom d'animation. C' est ce qui nous dit ce que l'animation va être. Ici, nous l'avons transformant, traduire X, 50 pixels, le rayon de bordereau, et puis nous l'avons fait la couleur. Encore une fois, nous traduisons le Y puis la couleur à nouveau. Vous pouvez faire de et à partir. Ceux-ci peuvent être des propriétés que vous avez ici, et donc vous devriez, et puis vous auriez un crochet et ensuite dire où vous voulez qu'il aille. disant ça, je me rends compte que c'est mal, tu ferais vraiment de et puis à. Vous voulez commencer par où vous commencez et ensuite où vous allez. Ou vous pouvez faire des pourcentages, comme ici, nous avons 0 pour cent, 50 pour cent, 100 pour cent. Vous pouvez faire 0, 10, 20, vous pouvez aller jusqu'au bout si vous le voulez, vous pouvez faire 12 pour cent. Vous n'avez pas à faire 0, 50 et 100. Ce n'est qu'un exemple ici. Entre ces parenthèses, vous dites ce que vous voulez changer les heures supplémentaires ici. Entre 0 et 100 % de la seconde, nous voulons changer ces choses. Maintenant, je vais vous montrer quelques exemples d'où vous pourriez voir quelques animations CSS. Un bon exemple est avec une icône. C' est notre icône de menu et il anime la transformation qui se passe. Ensuite, nous avons ici quelques chargeurs qui sont animés avec CSS aussi. Elles sont toutes animées avec opacité ou transformation. Vous pouvez voir que vous n'êtes vraiment pas limité, si ce sont ce que vous utilisez. Vous pouvez faire des choses comme l'arrière-plan, comme nous l'avions dans notre premier exemple, mais ceux-ci ne sont pas demandé performance. Il est suggéré que vous essayez d'animer simplement votre opacité, puis vos transformations. Mais vous pouvez voir, il y a beaucoup de choses que vous pouvez faire avec ça ici. Ce gars ici n'est qu'une animation amusante. Vous pouvez voir que si vous faites des images CSS, vous pouvez les donner à la vie après les avoir créées avec juste une animation. Je suis désolé, mon internet est un peu lent, donc cela est en retard ici, mais vous pouvez voir l'animation maintenant. Il est mignon, leur donnant vie. Cela pourrait être juste une image et ne pas avoir d'animation, ce sera toujours mignon, mais c'est agréable d'ajouter l'animation aussi. Dans la prochaine vidéo, ce que nous allons animer sont nos cordes et nos avions. Ils vont venir et il va y avoir un peu de retard. Ces cordes viendront d'abord que celles-ci , puis les cordes extérieures avec les plans qui les suivent. Dans cette vidéo, nous allons maintenant ajouter notre animation et nous allons juste finir tout ce que nous avons peut-être manqué une ombre de boîte que nous pourrions vouloir ou tout endroit où nous aimerions ajouter un peu plus de détails, nous va finir ça dans cette vidéo aussi. Notre animation, notre première, je l'ai appelé queue. Ce sont nos ficelles, elles sont censées imiter la queue d'un avion pendant qu'il vole. Comme je l'ai dit dans la vidéo précédente, si vous avez déjà où votre position est au début où vous voulez qu'elle aille, vous n'avez pas besoin de mettre le pourcentage zéro. Vous pouvez juste aller directement au 100 pour cent parce que je veux qu'il passe d'un endroit à l'un à 100 pour cent. Je n'ai pas à faire zéro pour cent ou 50 pour cent ou tout ça. Je sais que cela ressemble à un nombre fou, supérieur négatif 3 800 pour cent, mais si vous pensez à notre chaîne ici, c'est par rapport à la cheville, donc si je mets 100 pour cent haut, ça ne ferait que jusqu'au sommet de la cheville ici. Si je veux tout faire, je dois lui donner une grande hauteur et je dois lui donner ce pourcentage très élevé ici, négatif 3,800 pour cent. Ça va amener les ficelles jusqu'ici. Maintenant, la prochaine chose que nous faisons est de faire descendre nos avions. Ils étaient jusqu'ici, on veut qu'ils soient sur le dessus des piquets. On a transformé, traduit Y, on se déplace juste sur l'axe y, 500 pixels. C' est encore quelque chose que je viens de tester. J' ai regardé dans mon inspecteur ici et j'ai joué avec les chiffres jusqu'à ce que je vois qu'il était au-dessus des chevilles et 500 pixels était au-dessus des chevilles ici. Pour notre animation, nous allons juste le ramener à zéro là où il était. On n'a pas besoin de 50 pour cent ou de zéro pour cent. Nous allons juste du bas où nous avons mis l'avion tout le chemin vers le haut, donc nous pouvons aller droit et juste mettre 100 pour cent, donc nous allons le transformer, le Y, à nouveau transformer traduire Y, zéro pixels. Cela ne signifie pas le déplacer à zéro pixels, cela signifie le déplacer sur l'axe y à partir des 500 pixels qu'il est maintenant, jusqu'à zéro pixels. Si vous vous souvenez que j'ai dit, nous allons revenir et nous allons ajouter dans notre HTML, un retard si vous ne l'aviez pas déjà fait. Sur chaque avion, nous voulons ajouter un délai afin qu'ils montent à différents moments. Avion 1, je n'ai rien ici, et puis j'ai du retard 2 pour le second, retard 3 pour le troisième, retard 4, du retard 5 et du retard 6. passant par ça, je veux vraiment y retourner une seconde parce que j'ai réalisé qu'on pouvait vraiment rendre notre code un peu plus sec. Je ne l'ai pas fait sur mon original, mais c'est le positif de revenir à travers votre code, c'est que vous pouvez voir où vous pouvez apporter des améliorations. Là où nous avions juste l'avion, nous pouvons garder ça. Ensuite, nous avons retard 2, retard 3, alors nous pouvons avoir celui-ci aussi être un retard 3. Parce qu'ils vont aller au même rythme, nous pouvons faire celui-ci le délai 2, au lieu de delay 5, car il va aller au même rythme que la deuxième chaîne. Alors notre dernier, nous n'avons rien à avoir parce que les deux avions vont juste en dernier et ils n'ont aucun retard sur eux. Ce que je vous montrais là-bas, je changeais juste dans mon original, c' est pourquoi vous avez vu l'animation se produire avec les cordes aussi, mais allez-y et changez cela dans votre code afin qu'il puisse être un peu plus sec. Vous n'avez pas besoin d'avoir tous les différents retards comme je l'ai dit à l'origine. Quand nous allons le mettre dans notre CSS, nous pouvons aussi rendre notre CSS un peu plus sec aussi, ce qui est agréable. La première chose que nous allons faire est d'ajouter l'animation à notre classe d'avion ici. Notre animation, on l'appelait voler. Ensuite, nous voulons aller 1,5 seconde, nous nous assouplissons, puis 0,6 seconde est le retard ici. Ça va de l'avant, donc c'est juste rester au sommet. Quand nous voyons notre animation, nous voyons que tous vont en même temps maintenant. n'y a pas encore de retard. Nous voulons faire en sorte qu'il semble que ces deux-là vont d'abord, puis ces deux-là, et ensuite le dernier. Allons-y et faisons-le ici. Nous avons notre délai 2, et celui-ci va avoir le même nom d'animation, 1,5 seconde, c'est combien de temps cela va prendre, la durée et la facilité d'entrée. Mais cette fois, nous n'attendons que 0,5 seconde, puis refaisons l'avant. Sur le délai 3, qui sont ces deux, nous voulons qu'ils aillent encore plus vite, donc nous avons juste un retard de 0,4 seconde. Ces classes de retard que nous avons créées, nous pouvons maintenant les ajouter également à nos chaînes afin qu'elles puissent correspondre avec les plans que nous avons ici. Notre premier n'aura pas de classe spéciale, et nous allons juste ajouter de l'animation à la classe de chaîne qui est déjà là, puis sur nos deuxième et cinquième chaînes sous la cheville 5, nous allons mettre un delay 2 puis sous notre peg 3 et peg 4 cordes, nous allons mettre le délai 3. Tout cela va au même rythme que les avions. Regardons notre code ici et continuons et ajoutons notre animation à notre classe de cordes. Voici notre classe de chaîne, et nous allons ajouter la queue d'animation à cela. Nous voulons faire 1,5 seconde, nous voulons alléger en 0,6 seconde, puis en avant. Maintenant, nous pouvons également ajouter cette ombre de boîte à nos cordes pour les faire croire qu'elles sont juste un peu debout. Cela donne juste un peu plus de profondeur aux cordes. Ils ont l'air un peu plus épais maintenant avec l'ombre aussi et ils ont l' air d'être sur le pont ici un peu mieux. C'est ça. Nous avons maintenant une image CSS complète et une animation. De là, vous pouvez changer ça si vous voulez. Vous pouvez essayer de jouer avec les retards ici, faire cela aller plus lentement ou plus vite, vous pouvez complètement le refaire. J' ai vu cette image où il est en fait laisse de plus en plus. Ce sont des stocks, puis des feuilles qui sortent et des oiseaux. Vous pouvez vous sentir libre de le faire et de le partager avec la classe, ce serait merveilleux. 11. Rédiger: Si vous l'avez fait jusqu'ici, cela signifie que vous avez maintenant une image CSS impressionnante et une animation. J' espère que vous avez aimé apprendre CSS grâce au codage créatif. J' ai aimé vous enseigner tout ce chemin et si vous avez terminé le projet, ou si vous avez changé le projet, ou si vous avez fait une toute autre image, j'aimerais que vous partagiez nos projets de classe, et aussi dans les commentaires, laissez-moi savoir si je peux partager dans notre collection CodePen et aussi sur mon compte Twitter.