Codage créatif : Créer un collage CSS

1. Créer des collage CSS – Introduction: Bonjour, je suis Aga et j'ai hâte de vous inviter à mes cours. Nous créons un collage CSS avec du code simple. Nous allons utiliser de la magie CSS. Nous allons créer un collage CSS. Ne vous inquiétez pas si vous pensez avoir besoin Photoshop ou de tout autre éditeur graphique logiciel. Nous allons utiliser seulement la puissance du code. Avec quelques lignes de code, nous allons créer un fait vraiment intéressant dans votre navigateur web. N' oubliez pas de poster votre travail dans la section projet. se voit dans la leçon suivante. Au revoir. 2. outils: Parlons des outils que nous allons utiliser dans ces cours. Tout d'abord, nous allons utiliser notre navigateur web préféré. J' utilise habituellement Chrome. Nous pouvons également utiliser Firefox. Nous allons beaucoup utiliser les outils de développement. Quels sont nos outils de développement ? Ce sont des outils de développement web, et ils sont intégrés directement dans chaque navigateur. J' aime vraiment utiliser les outils de développement dans Chrome, mais peut-être que vous avez des préférences différentes. Voyons comment nous pouvons les lancer et ce qui est réellement à l'intérieur. Nous avons le Chrome ouvert. Nous faisons un clic droit, inspectons et bang, nous avons les outils de développement ouverts sur notre côté droit de la fenêtre. Ce que vous pouvez voir ici est l'ensemble du code, HTML de notre site web sécurisé. Nous avons ce site Web Skillshare ouvert. Vous pouvez simplement vérifier quelle partie du code est responsable de la couche. Par exemple, si vous voulez savoir dans le code où se trouve la navigation, vous suffit de cliquer sur cette flèche et d'y accéder. Maintenant, vous savez que ce morceau de code est responsable du rendu de la navigation. Ici, nous avons des styles, donc nous pouvons accéder au fichier CSS. Nous pouvons revenir aux éléments, donc notre code HTML et voir quels styles sont appliqués ici. Pour l'instant, ça peut sembler compliqué, mais ne vous inquiétez pas, je vais tout expliquer étape par étape. Si vous souhaitez avoir cette fenêtre dans une autre position, vous pouvez décider si elle doit être creusée à gauche ou peut-être dans une fenêtre séparée. Nous pouvons également ouvrir des outils de développement dans Firefox. La règle est le même clic droit, inspecter l'élément et vous pouvez voir la fenêtre des outils de développement, qui font partie du navigateur Web Firefox. Encore une fois, nous avons le code HTML, nous avons CSS. Nous pouvons également changer la position des outils de développement. Par exemple, les creuser à droite. L' autre chose que nous devons avoir, c'est un éditeur de code. Je vous recommande d'utiliser Atom. Vous pouvez le télécharger gratuitement à partir du site web atom.io. Il est disponible pour Mac OS et Windows. Peut-être que comme d'autres éditeurs de code comme Sublime Text, n'hésitez pas à utiliser ce qui convient à vos besoins. En résumé, nous allons utiliser, le navigateur web, les outils de développement et l'éditeur de code. N' oubliez pas de télécharger le package. C' est sous la section de votre projet. 3. HTML et CSS: Si vous n'êtes pas familier avec HTML et CSS, je vous recommande fortement de visiter mes cours sur le codage de votre propre site Web. Je montre ici comment créer des classes CSS, expliquant ce que nos sélecteurs CSS. Je vous recommande également de vérifier l'animation SVG avec du code CSS simple, donc, mes classes d'éditeur où je montre aussi comment créer des sélecteurs, des sélecteurs CSS, des classes CSS. Donc, vous avez tout ici. 4. Cheminde Clip-path: Dans cette leçon, nous allons apprendre ce que fait le clip-path. Clip-path est une propriété CSS. En général, cela nous aide à découper certaines formes. clip-path n'est qu'une limite de formes. écrêtage définit la zone d'image qui doit être visible. L' écrêtage est similaire à couper des morceaux de papier. Tout ce qui est en dehors du chemin sera caché tandis que tout ce qui se trouve à l'intérieur du chemin sera visible. Par exemple, si une fonction de cercle définit un masque d'écrêtage sur le dessus d'une image, vous verrez la partie de l'image qui se trouve dans le cercle. Vérifions comment le chemin clip-path fonctionne dans la réalité. Nous avons un div simple avec un arrière-plan. Le fond sont des carreaux roses, nous aimerions appliquer ici le chemin de clic, qui découpera un cercle de ce carré. J' écris clip-path dans la classe des tuiles. Vous pouvez voir que cette div a des tuiles de classe et pour ce sélecteur, nous écrivons clip-path, circle. Je voudrais que le rayon du cercle soit la moitié de la hauteur et de la largeur de ce carré. Nous n'avons pas besoin d'utiliser Photoshop pour découper des éléments. En dehors des cercles et des rectangles qui sont des formes très basiques et simples, nous pouvons également appliquer quelque chose de plus compliqué. Vérifions, je colle maintenant le morceau de code. Nous avons clip-path et un polygone défini. Chacun de ces éléments est les coordonnées. Grâce à eux, nous pouvons créer une forme. Dans cet exemple, nous avons trois sommets. C' est le résultat final, qui est un triangle. Vous pouvez maintenant vous demander comment je peux créer une telle forme ? Dois-je expérimenter avec les chiffres pour trouver la forme parfaite ? Bien sûr, tu n'en as pas besoin. Il y a beaucoup d'outils. C' est l'un des exemples d' un outil très cool que vous pouvez utiliser pour créer des formes plus compliquées. C' est ce qu'on appelle CSS clip-path maker. Vous pouvez choisir quelque chose parmi les formes déjà préparées comme l'octogone, l'hexagone pentagone, etc. Avec cet outil, vous pouvez également personnaliser la forme. Vous pouvez simplement faire glisser les points et changer leurs coordonnées. Appliquons ce message parce que c'est assez amusant. Allons le rendre plus biaisé comme ça. La chose que je dois faire est de copier le code. Je suis là, dans mes fichiers locaux. Je le rafraîchis. J'ai toujours le rectangle. Ici, je colle le en tant que code CSS et j'ai ma forme. C' est aussi facile que ça. Pour résumer, nous utilisons clip-path pour découper certains éléments. Nous rendons certaines parties de l'image visibles et d'autres cachées. Tout dépend de la forme que nous définissons. Nous avons commencé avec un cercle simple, où nous venons de définir un rayon du cercle et dans le second exemple, nous utilisions un polygone. Dans la leçon suivante, nous allons apprendre comment appliquer des formes personnalisées créées, par exemple dans Illustrator. Nous allons utiliser la fonction URL. 5. Cheminde Clip-path : exercice: Faisons l'exercice avec clip-path et la fonction URL. Nous ouvrons le dossier appelé pince à paillettes. Double-cliquez sur l'index HTML pour voir ce qu'il y a à l'intérieur. Donc, à l'intérieur, nous avons le fichier qui sont déjà préparés pour vous. C' est un fichier HTML, et si nous lançons des outils div, nous pouvons voir que c'est la section avec la div appelée classe glitter, scintillement shadow et texte. Je voudrais appliquer la forme ici. Je voudrais découper de ce rectangle une éclaboussure. Si nous ouvrons des images, sous-dossier nous verrons qu'il y a splash.svg, que nous connaissons déjà. Tout ce que nous avons à faire est que nous devons appliquer cette forme svg en utilisant la propriété clip-path. Ce qui est intéressant ici, c'est que nous avons un fichier gif. Donc, il bouge, c'est en fait des paillettes. C' est ce que j'aime dans cet exemple que nous pouvons appliquer gifs et clip-path fonctionne dessus. C'est génial. J' ai également ajouté une forme par pseudo classe. Si vous ne savez pas ce que sont les pseudo-classes et CSS, ne vous inquiétez pas. Je vais créer une autre classe dédiée à ce sujet, mais pour l'instant, prenons-le pour acquis. On ouvre tout le dossier, c'est scintillant. Nous avons index.html, et comme dans l'exemple précédent, j'ai déjà préparé un squelette pour vous svg squelette où vous pouvez ajouter un chemin de clip-path. Je vois qu'il manque un pipe-chemin ici, donc je l'ajoute. Ici, je vais ajouter notre forme définie dans le fichier svg. Ceci est commun à un HTML Si vous n'êtes pas familier avec cela, cela signifie qu'il ne sera pas rendu sur la page, c'est juste l'information pour moi [inaudible]. Ouvrons splash.svg. Dans l'exemple précédent, nous copions uniquement le chemin et le collons entre le chemin de clip-path, désolé, il devrait être ouvert, donc le changer aussi. Coller, je peux supprimer id et classe parce que nous n'en avons pas besoin. Nous l'enregistrons, et c'est maintenant le moment d'appliquer le chemin de clip-path à la certaine classe. Si je le rafraîchis, rien n'a changé. Nous voulons appliquer le chemin clip-path sur cette div. C' est la classe div appelée paillettes. Si j'écris ici fonction URL clip-path, nous devons faire référence à la forme qui est définie dans le document HTML, en référence à id, donc c'est le hachage et le nom de notre id. Encodisons. Nous vérifions index.html. n'y a rien de défini, donc nous devons définir id. C'est appelé splash, rien de nouveau, et rafraîchir à nouveau parce que nous avons fait un changement. Clip-path, la fonction URL et nom de l'ID splash, et cela fonctionne. Comme vous pouvez le voir, l'éclaboussure est appliquée sur les paillettes, qui a le gif de paillettes comme arrière-plan. Si on le décommande, tu verras que les paillettes ont disparu. Mais nous devons également appliquer ce chemin de clip-path à la classe suivante, la pseudo-classe d'avant. Ce que je fais en ce moment, c'est que j'ouvre l'ombre à paillettes et ici je clique sur la pseudo-classe avant la pseudo-classe. Si nous décliquons l'arrière-plan, vous verrez qu'il disparaît. C' est le bon endroit. Nous voulons appliquer ici un chemin clip-path, en l'appliquant également. Maintenant, nous avons un effet vraiment intéressant. Rappelez-vous le fait que si vous changez quelque chose dans les outils div, il est seulement conservé dans votre navigateur Web, et il est conservé uniquement dans cette session que vous avez votre navigateur ouvert. Si je rafraîchis la page, mes modifications seront supprimées. Nous devons donc les ajouter dans notre fichier CSS. Ouvrons un fichier CSS. Nous étions en train d'ajouter clip-path aux paillettes et à la pseudo classe d'ombre pailletée avant. Sauvegardons, actualisons, et ça marche. N' oubliez pas d'enregistrer le fichier HTML et styles.css. Parce que très souvent c'est la raison pour laquelle vos modifications ne sont pas reflétées dans le navigateur Web. Maintenant, nous avons les paillettes découpées dans cette belle forme d'éclaboussures. 6. Clip-path - Fonction url: rappel, pour une propriété de chemin d'élément, nous pouvons utiliser des formes de base déjà définies dans le navigateur Web. Nous pouvons, par exemple, utiliser un encart, qui fera un rectangle hors de notre carré et nous pouvons également avoir des coins ronds, nous pouvons également avoir un cercle, ellipse, un polygone pour des formes plus compliquées. Pour les formes personnalisées, nous pouvons utiliser SVG. SVG signifie Scalable Vector Graphics, et nous pouvons le créer dans des objets logiciels graphiques vectoriels tels que Catch, Adobe Illustrator ou Inkscape. C' est une excellente solution parce que nous pouvons décider quelle devrait être la forme que nous pouvons dessiner dans éditeur graphique et il est très pratique pour nous plus tard d'appliquer à la forme HTML et code CSS. Comment on devrait le faire. Il est grand temps pour la fonction URL. Je vais vous montrer comment le faire en faisant l'exercice. Donc maintenant, nous pouvons ouvrir le dossier appelé url-function, qui est le dossier où nous pouvons faire l'exercice. J' ai déjà préparé le squelette, squelette HTML pour vous. Vérifions ce qu'il y a à l'intérieur en double-cliquant. Donc, il s'ouvre dans le navigateur Web et comme vous pouvez le voir, c'est juste un rectangle avec une image. Nous pouvons voir ce qui se passe dans le code en cliquant avec le bouton droit, inspecter. Nous lançons donc les outils de développement et voici le code HTML. Comme vous pouvez le voir, nous avons la div avec une classe appelée splash et ici nous avons un style CSS appliqué pour cette classe. Nous avons donc l'arrière-plan, nous avons la largeur et la hauteur ensemble et quelques propriétés d'arrière-plan. Maintenant, nous aimerions appliquer le chemin SVG qui va découper, éclabousser hors de ce rectangle. Nous allons donc ouvrir le dossier entier avec les fichiers de fonction URL dans l'éditeur de code. J' utilise Atom. Voici donc les dossiers. Comme vous pouvez le voir, vous avez le sous-dossier images, les styles et l'index HTML. Donc, nous pouvons voir le squelette du HTML et voici la balise SVG cependant, elle est vide. Il n'y a rien écrit ici et ici nous aimerions appliquer notre chemin SVG. Donc, si vous vérifiez dans le dossier, nous avons des images et nous aimerions appliquer cette forme pour découper le splash du rectangle. Nous allons donc utiliser Clip path. Donc nous ouvrons cette forme SVG, désolé. Donc, nous ouvrons Splash SVG et voici le code SVG. Il ressemble à du HTML, mais c'est XML parce que SVG est un format basé sur XML, et ce qui nous intéresse est cette balise de chemin, donc nous copions simplement la balise de chemin et la collez entre les développeurs. Devs est synonyme de définition. Cela signifie que ce SVG ne sera pas rendu sur la page. Ainsi, vous ne verrez pas le splash dans le document HTML. Si nous actualisons la page, vous verrez que rien n'a changé cependant, nous avons ce SVG dans le code. Ce qu'il manque ici, c'est la balise de chemin de clip et l'ID. Nous devons fermer le chemin du clip ainsi ne pas l'oublier. Vous pouvez avoir le tag ici. Ainsi, vous pouvez voir que cette balise s'ouvre et qu'elle a la balise de fermeture, ID, appelons-la splash. Nous pouvons supprimer l'ID et la classe car il est généré par Adobe Illustrator, nous ne l'utilisons pas. Nous avons juste besoin de toutes les coordonnées qui définissent notre forme. Donc, ce que nous devons faire maintenant est que nous devons faire référence en quelque sorte à partir de notre CSS, qui est dans le dossier de styles et nous devons appliquer cette propriété de forme et de chemin de clip. Donc, nous savons tous comment le chemin du clip doit être écrit. Nous écrivons juste chemin de clip et ici au lieu de cercle ou ellipse ou encart, nous écrivons la fonction URL et ici nous avons l'écriture de la définition, de la forme. Notre forme est déjà définie dans index.html et l'ID est splash. Donc, ce que nous avons à faire, c'est que nous avons juste à faire référence à son ID. Donc, hachage signifie ID et CSS et le nom de cet ID, c'est splash. On doit juste le sauver. Nous pouvons également enregistrer index.html et maintenant faisons référence à la page et bang quelque chose a changé. Enfin. Si nous allons à splash, class, splash dev, et vérifier la fenêtre avec les styles, afin que nous puissions voir que ce chemin de clip est appliqué. Si nous y arrivons, nous voyons toujours le rectangulaire. Si nous arrivons maintenant, nous voyons que le rectangle, facile que cela. Alors faisons un autre exercice. Dans notre dossier, il y a une autre forme, la forme SVG. Donc, au lieu de splash, nous voulons avoir la forme SVG. Donc, ce que nous faisons, c'est que nous copions juste la balise chemin de la même façon que ce que nous avons fait avec Splash SVG. Nous le collons dans index.html au lieu de notre chemin précédent. Vous pouvez toujours avoir ID splash. Nous supprimons le code inutile, l'enregistrons et l'actualisons et maintenant nous avons la forme qui est définie pour splash. Donc, en résumé, ce que nous devons faire est d'ouvrir le code SVG, copier la partie du code qui est responsable de la génération de la forme. Voici donc la balise de chemin que nous collons dans le fichier HTML, à SVG, qui est déjà défini à la définition. Nous avons le chemin du clip et le chemin du clip a l'ID créé. Nous pouvons écrire le nom, ce que nous voulons, sorte qu'il peut être même élément et plus tard en CSS, nous avons juste à y faire référence dans la propriété de chemin de clip en utilisant la fonction URL. Donc, au lieu de splash, nous devons écrire l'élément ici et si nous actualisons, rien n'a changé juste le nom de la forme à laquelle nous référençons. 7. Cheminde Clip-path - Exercice paillettes: Alors faisons l'exercice avec clip-path et la fonction URL. Nous ouvrons le dossier appelé « Pince à paillettes ». Double-cliquez sur « index.html » pour voir ce qu'il y a à l'intérieur. A l'intérieur, nous avons le fichier qui sont déjà préparés pour vous, c'est le fichier HTML. Si nous lançons des outils de développement, nous pouvons voir que c'est la section avec le div appelé paillettes avec une petite classe de paillettes, paillettes - ombre et texte. Je voudrais appliquer la forme ici. Je voudrais découper de ce rectangle une éclaboussure. Si nous ouvrons le sous-dossier images, nous verrons qu'il y a splash.svg, que nous connaissons déjà. Tout ce que nous avons à faire est que nous devons appliquer cette forme svg, en utilisant la propriété clip-path. Ce qui est intéressant ici, c'est que nous avons le fichier GIF. Il bouge, c'est en fait des paillettes. C' est ce que j'aime vraiment dans cet exemple que nous pouvons appliquer gifs et clip-path fonctionne dessus. C' est génial. J'ai également ajouté une forme par pseudo classe. Si vous ne savez pas ce que la pseudo classe est en CSS, ne vous inquiétez pas. Je vais créer une autre classe dédiée à ce sujet. Mais pour l'instant, prenons-le pour acquis. Nous ouvrons tout le dossier. C' est un pince à paillettes. Nous avons index.HTML. Comme améliore exemple, j'ai déjà préparé squelette pour vous, svg squelette où vous pouvez ajouter clip-path. Je vois ce remorqueur. manque un remorqueur à trajectoire clipsée ici, donc je l'ajoute. Ici, je vais ajouter notre forme, définir un « fichier svg ». Ceci est un commentaire en HTML, si vous n'êtes pas familier avec lui. Cela signifie qu'il ne sera pas rendu sur la page. C' est juste cette information pour moi ou le code ou avec le codeur. Ouvrons splash.svg. Dans l'exemple précédent, nous avons copié le chemin uniquement et collé entre le chemin de clip-path. Désolé, ça devrait s'ouvrir. changer aussi. Coller, je peux supprimer l'ID et la classe parce que nous n'en avons pas besoin. On le sauve. Il est maintenant temps d'appliquer le chemin de clip-path à la certaine classe. Si je l'actualise et que rien n'a changé, nous voulons appliquer le chemin de clip-path sur cette div. C' est la classe div appelée paillettes. Si j'écris ici la fonction URL clip-path, nous devons faire référence à la forme qui est la définition d'un document HTML, et vous faites référence à ID, donc c'est le hachage et le nom de notre ID, vérifions, nous allons coder. Nous vérifions index.HTML. n'y a rien de défini, donc nous devons définir ID, qui s'appelle Splash, rien de nouveau. Actualiser à nouveau parce que nous avons fait un changement, donc clip-path, fonction URL et nom de l'ID splash. Ça marche. Comme vous pouvez le voir, le mécontentement est appliqué aux paillettes, qui a le gif de paillettes comme fond. Si nous le décommentons, vous verrez que les paillettes ont disparu. Mais nous devons également appliquer ce chemin de clip-path à la classe suivante, la pseudo classe d'avant. Ce que je fais en ce moment, c'est que j'ouvre l'ombre scintillante et je clique ici sur la pseudo-classe, avant la pseudo-classe. Si nous décliquons l'arrière-plan, vous verrez qu'il disparaît, donc c'est le bon endroit. Nous voulons postuler ici à clip-path. L' appliquer aussi. Maintenant, nous avons un effet vraiment intéressant. Rappelez-vous que si vous changez quelque chose dans les outils de développement, il est seulement conservé dans votre navigateur Web. Il est conservé uniquement dans cette session que votre navigateur est ouvert. Si je rafraîchis la page, mes modifications seront supprimées. Nous devons les ajouter dans notre fichier CSS. Ouvrons un fichier CSS. Nous avons ajouté clip-path aux paillettes et à la pseudo classe d'ombre pailletée avant, sauvegardons, actualisons, et cela fonctionne. N' oubliez pas d'enregistrer le fichier HTML et styles.css parce que très souvent c'est la raison pour laquelle vos modifications ne sont pas reflétées dans le navigateur Web. Maintenant, nous avons les paillettes découpées dans cette belle forme d'éclaboussures. 8. Masquage: Nous apprenions à utiliser la propriété Clip-Path et quelles sont les différentes possibilités. Il est grand temps d'en savoir plus sur le masquage, en particulier la propriété de masque-image. Les masques sont utilisés pour afficher ou masquer certaines parties des éléments, certaines parties de l'image. Bien sûr, cela ressemble à une coupure, alors quelle est la différence ? La principale différence est que les masques sont des images et les clips sont des chemins. Je parlerai des différences dans la section suivante. Pour l'instant, voyons quelles sont les possibilités avec le masquage. Ouvrons le dossier appelé Masque. A l'intérieur, nous avons index.html, styles et images. Qu'y a-t-il à l'intérieur ? C' est le fichier HTML que j'ai préféré pour vous aussi pour cet exercice clip-path. Mais ici, nous allons appliquer un masque, alors lançons les outils de développement. Maintenant, nous aimerions appliquer à cette div, avec les paillettes de classe, une image de masque. Tout ce que vous devez savoir est que la propriété est appelée mask-image. Maintenant, nous pouvons ajouter la fonction URL. Nous faisons référence à un fichier et aux images. Si nous ouvrons ce dossier, nous pouvons voir que dans Images nous avons deux fichiers : mask-gradient, vous pouvez voir ici que nous avons la transparence, et circle-masque, juste un cercle. C' est un fichier PNG, donc c'est un graphique raster. Je tape la fonction URL. Le chemin d'accès à l'image, donc les images, et le nom du fichier qui est circle-mask.png. Ce que vous pouvez voir est que le masque n'est pas appliqué et la raison est que nous devons utiliser des préfixes fournisseur. Cela signifie que nous devons ajouter webkit parce que nous utilisons Chrome. Pour Firefox, c'est moz de Mozilla. Je tape la même propriété juste avec le préfixe webkit, donc masque-image et exactement la même chose. Images/circle-mask.png et le cercle est appliqué. Cela fonctionne presque de la même manière qu'un écrêtage, mais ici nous utilisons le fichier raster. Si nous regardons de plus près, vous verrez des pixels, l'effet pixélisé. Nous allons parler de cet effet et le comparer à l'écrêtage dans un certain temps. Ce que vous pouvez voir, c'est que le cercle est découpé sur le fond. C' est parce que l'image ne rentre pas entièrement dans ce carré. Heureusement, nous avons quelque chose comme la propriété de taille de masque et nous pouvons définir. Ce sont les mêmes valeurs que pour l'arrière-plan en CSS. Nous pouvons utiliser contenir, cela signifie que l'ensemble du masque sera nous contenue ici. Nous devons aussi l'appliquer à notre ombre. Nous allons à la pseudo-classe, en collant le code, et vous verrez que le masque est appliqué. Quelque chose d'étrange se passe ici. C' est parce que le masque est répété. Si nous définissons la taille du masque pour un plus petit, si nous ajoutons ici comme 50 pixels, vous verrez que nous avons des tonnes de petits masques appliqués à notre rectangulaire. Nous pouvons également le faire pour l' ombre, en tapant 50 pixels. C' est un effet vraiment intéressant. Vous pouvez vraiment expérimenter avec cela beaucoup. Si vous n'aimez pas répéter le masque, il existe une propriété CSS appelée mask-repeat. Nous pouvons décider si nous voulons répéter, si nous voulons répéter seulement dans l'axe X ou en Y. Faisons-le comme ça encore une fois. Rappelez-vous que pour Chrome, vous devez toujours ajouter le préfixe webkit, mais nous devons également ajouter seulement la propriété sans ajouter de préfixes pour l'autre navigateur. Mask-répétez et on a repeat-x. Il sera barrée ici parce que cela ne fonctionne pas dans Chrome, mais pour d'autres navigateurs, cela peut fonctionner. Je vais copier ça pour l'ombre scintillante. Faisons l'inverse, il faut appliquer Y, donc on a quelque chose comme ça. Vous pouvez créer des effets vraiment fous. Vous pouvez également ajouter aucune répétition, ce qui signifie que le masque ne peut être appliqué qu'à un seul endroit. Ne répétez pas ici. Ombre scintillante, sans répétition. On en a un plus petit. Nous pourrions également changer la taille pour que l'ensemble du masque s'intègre dans l'image. Répéter et contenir. 9. Masquage - partie 2.: Faisons un bref résumé sur le masquage. Ce que nous savons, c'est que nous appliquons propriété mask-image afin de masquer ou de montrer certains éléments concernant le masque. Pour un adulte, nous devons nous souvenir du préfixe webkit parce que sinon cela ne fonctionnera pas. Souvenez-vous s'il vous plaît. Une autre chose à propos du masquage est que nous pouvons appliquer la taille du masque pour définir ce qui devrait être la taille du masque. Le masque entier peut tenir dans l'image ou à l'élément. Nous pouvons également appliquer une répétition de masque afin de répéter le motif sur le masque. Ce sont donc les propriétés qui peuvent également être appliquées pour l'arrière-plan en CSS. Donc, nous pouvons dire que le masque est en quelque sorte lié à l'arrière-plan, et évidemment nous pouvons nous souvenir des préfixes webkit pour ces propriétés aussi bien. Les masques peuvent être des images raster avec différents niveaux de transparence. Donc, le meilleur format est le fichier png, et nous allons appliquer png avec des transparents juste dans une minute. Dans notre dossier d'exercices, nous avons également cercle-masque-gradient. Donc, ce que nous pouvons voir ici, c'est que, sur le cercle, l'arrière-plan s'estompe. Essayons d'appliquer ce type de masque. Donc, dans l'exemple précédent, nous appliquions juste une image simple et opaque. Faisons-le maintenant clairement dans l'éditeur de code. Donc nous avons notre div à paillettes, ombre à paillettes. On a le texto. 10. Exercice final - Collage à l'eau: Il est temps de passer le dernier exercice avec le masquage et l'écrêtage. J' espère que vous apprécierez vraiment jouer et expérimenter avec ces propriétés CSS. Ouvrons le dossier collage-eau. Nous pouvons vérifier ce qui est dans l'index html. Il y a des rectangles, des photos et le titre. Cependant, l'effet que nous aimerions obtenir en fin de compte est le suivant. Donc, ce que vous pouvez voir est que nous appliquons une splash, nous découpons certains éléments de l'image en utilisant l'écrêtage et le masquage. Je vais faire cet exercice avec vous pas à pas. Donc, j'ouvre le dossier entier dans l'éditeur de code Atom et si je regarde dans html, je peux voir que j'ai déjà une structure construite. J' ai l'endroit pour coller du code svg pour les chemins de clip et j'ai aussi un dossier avec des images. Si nous allons à la page, vous verrez que nous devons appliquer cette splash au conteneur avec ce dégradé. Donc, nous pouvons utiliser DevTools pour vérifier quel est le nom de classe qui génère ce bloc avec gradient. En fait, c'est avant, c'est cette pseudo-classe appliquée au conteneur. Vous pouvez voir que c'est son arrière-plan et à ce conteneur, à ce bloc, nous devons appliquer notre chemin de clip, celui-ci. Donc, si nous ouvrons des images, nous pouvons voir que ce flash est quelque chose, c'est quelque chose que nous appliquons à notre conteneur. Donc, le nom est la classe splash-2.svg. Donc on l'ouvre, on copie le chemin. Bien sûr, nous devons créer une balise de chemin de clip, fermer et coller le chemin à l'intérieur. Bien sûr, nous pouvons nous débarrasser des choses que nous n'utiliserons pas. Par exemple id, nous l'enregistrons et nous devons ajouter id pour le chemin du clip car nous allons y faire référence en CSS. On peut ajouter des éclaboussures à gauche parce qu'il est sur le côté gauche. Je peux voir que j'ai fait la dactylographie donc je dois le réparer. Oui, maintenant c'est correct, l'enregistrement et ensuite nous devons appliquer clip pour conteneur avant. Donc, c'est le chemin de clip, fonction url et à l'intérieur, nous écrivons splash gauche, et bien sûr, point-virgule à la fin de la ligne et rafraîchissant la page. Je peux voir que ma forme est appliquée. Les autres formes que je dois découper sont ces deux-là. Encore une fois, nous pouvons utiliser l'écrêtage mais nous pouvons aussi essayer de le masquer, cela fera de même. La raison pour laquelle je suggère de couper C'est parce que nous avons des fichiers svg. Nous allons faire le petit bonus pour cet exercice avec le masquage, mais pour l'instant nous allons utiliser l'écrêtage. En haut à droite, nous avons cette forme, donc c'est Splash Dash un. Donc, j'ouvre ici, copier le chemin, le coller à l'index html avec la même chose. Donc, la balise ClipPath, id, permet de le mettre splash, en haut à droite. Fermons le tag, pas de fautes de frappe en ce moment. Coller le chemin, désolé, coller le chemin, supprimer l'identifiant, enregistrer. Vérifions en utilisant DevTools à quelle classe nous devons appliquer cette lecture. C' est juste l'eau. Donc nous cherchons de l'eau d'abord, c'est ici. Nous appliquons le chemin du lien, la fonction url, splash, droits supérieurs, l'enregistrement, l'actualisation. On fait appliquer notre splash. Le dernier. Donc, c'est le tiret splash gratuit, copier, ClipPath, id, bouton de démarrage droit, coller, et bien sûr fermer l'onglet. La dernière chose, c'est que nous devons postuler. Vérifions juste à quel cours parce que je ne suis pas sûr. Ça s'appelle l'eau seconde. Donc, je suis à la recherche de l'eau seconde dans mon fichier CSS. La même chose, en appliquant simplement ClipPath, fonction url, laissons juste de l'espace ici. C' est éclaboussures, en bas à droite. Rafraîchissez, et l'exercice est terminé. Ce que je voudrais mentionner ici, c'est que c'est le conteneur. Commentons ça pendant un moment. C' est le conteneur avec l'arrière-plan. J' ai également ajouté la pièce jointe de fond fixe. Donc l'arrière-plan est fixe et nous avons ce genre d'effets parallèles dans le mouvement. C' est pourquoi je pense que c'est différent et intéressant. Vous pouvez avoir cela à l'esprit lorsque vous réalisez vos projets. C' est fait. Donc, la dernière chose est le petit bonus pour cet exercice. 11. Bonus d'exercice: Je viens de créer des masques. Ce sont des fichiers PNG. On peut voir qu'ils sont transparents ici en bas. Appliquons ces deux éclaboussures. Au lieu d'écrêter, ajoutez le masquage. fichiers PNG, c'est l'image de masque, la fonction URL, les images, splash- 2 PNG, et bien sûr, l' ajout de préfixe fournisseur, qui est webkit. Rafraîchissons la page. Nous pouvons voir que l'éclaboussure est lisse et floue d'une manière ou d'une autre, mais le masque est répété. Bien sûr, nous devons ajouter une répétition de masque, pas de répétition. Désolé. Bien sûr, avec le préfixe fournisseur et la taille du masque, ajoutons contient, et la même chose avec webkit. Bien sûr, les mêmes propriétés que nous pouvons appliquer à notre classe d'eau. Au lieu de clip, nous ajoutons la barre oblique 1. Enregistrer, rafraîchir, et c'est le même flou affecte. Bien sûr, vous pouvez expérimenter avec beaucoup. On peut faire quelques trous à l'intérieur du masque. Tout est prêt pour votre créativité et l'effet final que vous souhaitez obtenir. N' oubliez pas d'appuyer sur votre projet.