Créez de la magie avec CSS - Filtres et modes de fusion pour les débutants

1. Intro: Salut, je suis Aga et j'ai créé un super créatif classes CSS pour vous. Si vous souhaitez devenir un CSS Harry Potter, l'heure est maintenant. Dans mes exercices, vous allez jouer avec filtres CSS tels que les niveaux de gris, les contrastes, la saturation, mais aussi pour appliquer vraiment bel effet déchiré zuo juste dans quelques lignes de code en utilisant les modes de fusion CSS. Si votre curieux, eh bien, vous pouvez faire seulement avec CSS pour obtenir sur photoshop, ou autre éditeur graphique. S' il te plaît, reste avec moi. Les cours sont destinés aux personnes qui ont déjà lu des lignes de code. Mais si vous n'êtes pas familier avec CSS, je vous recommande fortement de regarder mes autres cours. Au revoir, on se voit dans mes cours. 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 DevTools. Qu' est-ce que DevTools ? Ce sont des outils de développement web, et ils sont intégrés directement dans chaque navigateur. J' aime vraiment utiliser DevTools 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, « Inspecter » et bang, nous avons les DevTools ouverts sur notre côté droit de la fenêtre. Ce que vous pouvez voir ici, c'est tout le code, HTML de notre site, c'est ici, nous avons le site de ce Skillshare ouvert. Vous pouvez simplement vérifier quelle partie du code est responsable de la mise en page. 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 en bas à gauche ou peut-être dans une fenêtre séparée. Nous pouvons également ouvrir DevTools dans Firefox. La règle est la même, clic droit, « Inspecter l'élément » et vous pouvez voir la fenêtre des DevTools, 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 DevTools. Par exemple, faites-les glisser vers la droite. Une 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 et il est disponible pour macOS et Windows. Peut-être comme d'autres éditeurs de code comme Sublime Text. N' hésitez pas à utiliser ce qui convient à vos besoins. En supposant que nous allons utiliser, navigateur web, DevTools et éditeur de code. 3. Filtres CSS et exercices: Dans cette leçon, vous allez en apprendre davantage sur les filtres CSS. Les filtres CSS nous aident à obtenir des effets comme dans Photoshop, tels que le flou, l'ajustement du contraste ou le changement de couleur. Les filtres CSS disponibles sont le flou, la luminosité, le contraste , l'ombre portée, les niveaux de gris, la rotation des teintes, l'inversion, opacité, la saturation et la sépia. Ouvrez le dossier de filtres CSS, puis cliquez sur index HTML. C' est le site où nous allons faire l'exercice de filtrage CSS. Nous avons les images qui nécessitent un peu de modifications, telles que la modification de la luminosité ou du contraste, vous pouvez vous sentir libre de faire ce que vous voulez. Je vais vous montrer ma façon d'améliorer ces images. Tout d'abord, nous allons lancer les outils de développement. Le moyen le plus rapide consiste à utiliser le raccourci avec un clavier ou à cliquer avec le bouton droit de la souris pour inspecter. Comme vous pouvez le voir, nous avons du code HTML pour le, pour ces deux pics. Et nous allons appliquer des filtres CSS. J' écris un filtre, et disons que je voudrais augmenter le contraste. Si je tape 1, cela signifie que l'état ne change pas. Si j'écris 1.1, cela signifie que le contraste est augmenté de 10 pour cent. Si j'écris 0,9, cela signifie que le contraste est diminué de 10 pour cent. Nous allons augmenter le contraste de 20 pour cent, et nous aimerions ajouter de la luminosité ainsi que ceux que rien n'a changé. Mais augmentons de 20 pour cent. La photo est plus sombre en ce moment. Pour mettre l'image dans une ambiance plus ancienne, je vais utiliser un filtre saturé aussi. Nous allons combiner tous ces filtres libres, et j'écris saturer et j'aimerais augmenter la saturation de 30 pour cent, disons. J' ai tapé 1.3. Comme vous pouvez le voir, l'image est améliorée maintenant. Peut-être une saturation un peu plus. Vous pouvez voir maintenant que l'image a un mot clave différent. Bien sûr, nous pouvons le changer dans Photoshop, mais en CSS, c'est beaucoup plus facile si vous n'avez pas déjà Photoshop ouvert. Je vais copier le code et le coller dans l'éditeur Atom. Je cherche le sélecteur de gauche en CSS, je colle, j'enregistre et je me réfère à la page afin que je puisse voir que l'image [inaudible] sont enregistrées. Ce que je vais faire maintenant, c'est d'appliquer l'effet de vol stationnaire. Je voudrais que cette image soit floue parce que c'est comme l'image qui est derrière l'image avec les vagues, donc je vais appliquer un calque de filtre de flou. Pour le flou, nous devons définir la valeur en pixels. Par exemple, je voudrais que l'image soit floue de quatre pixels et en survol, je voudrais déflouter l'image. Copions le code et collez-le dans notre éditeur Atom, dans notre fichier CSS. Et en survol, donc j'écris maintenant la pseudo-classe, je voudrais avoir les mêmes valeurs donc j'ai besoin de les copier, pas de réinitialiser et de flou, zéro. Vérifions l'effet. Je rafraîchis la page et si je survol, le flou est parti. Vous pouvez faire des tonnes d'effets différents. Jouer des pseudo-classes, jouer avec des filtres, avec d'autres images. Je vous recommande fortement d'aller audacieux et d'expérimenter avec eux. Votre devoir est d'appliquer des filtres à cette image et à l'arrière-plan aussi bien. Pour l'arrière-plan, cela fonctionne exactement de la même façon. Nous appliquons simplement le filtre, par exemple, inverse 0,8 ou saturer 1,5. Dans le prochain exercice, je vais vous montrer de la magie avec le filtre d'ombre portée. 4. Filtre CSS :: Cette partie que nous allons jouer avec le filtre Ombre Drop-Shadow. Pour l'ombre portée, nous devons définir quatre valeurs. Le premier est décalé dans l'axe x, le second est en axe y, troisième définit comment le flou va être étalé, donc le rayon de flou et le dernier est la couleur. Maintenant, consultez l'ombre portée en pratique. Nous ouvrons le dossier de l'ombre portée et l'index HTML. C' est le site où nous allons implémenter le filtre d'ombre portée. Ouvrons les outils de développement comme toujours et ici nous allons appliquer un filtre à cette image. J' écris l'ombre portée du filtre et le premier décalage en x. disons, cinq pixels, offset en y, disons 10 pixels, le rayon de flou, disons, zéro et la couleur, pour l'instant, essayons-le avec le blanc. On a l'ombre. Ce qui est le plus cool à propos de l'ombre portée dans la propriété filter est qu'elle aborde réellement la forme du fichier PNG. Nous avons le dossier qui a de la transparence. Nous avons l'image qui est découpée, vous pouvez voir la forme de la main et les feuilles et son mieux d'utiliser filtre car il aborde la forme. Si nous appliquons Box-Shadow à la place, vous verrez que l'effet est un peu différent. Écrivons 10 pixels du décalage, 10 pixels du flou et la couleur blanche ainsi que vous pouvez voir ici l'effet est assez étrange. Commandions la transformation, afin qu'elle ne soit pas tournée. La chose est que box-ombres ne fonctionne que quatre boîtes, donc peu importe si vous avez découpé l'image et enregistré dans le fichier PNG, il traite votre image comme le rectangulaire ; il a donc défini la hauteur et la largeur. Il peut différencier les formes à l'intérieur de l'image. Ce qui est cool à propos de l'ombre filtrante, c'est qu'il respecte réellement cela Nous pouvons avoir des combinaisons vraiment cool et des effets vraiment sympas. Ce que j'aime vraiment dans l'ombre portée, c'est que nous pouvons également utiliser RGBA, donc nous pouvons changer le canal alpha de la couleur, ce qui signifie que nous pouvons changer sa transparence, donc avons la couleur noire, donc c'est 000 et si vous voulez comme ça, la fermeture. Nous avons la couleur noire mais si nous ajoutons la quatrième valeur, qui est dans le canal alpha, le canal de transparence, disons 50 pour cent, vous pouvez voir qu'il y a de la transparence, ce qui est génial. Peut-être que nous allons avoir 30 pour cent et nous allons le brouiller un peu. Peut-être pas tant que ça. Peut-être par cinq pixels. Peut-être que nous allons l'avoir un peu sur les parties inférieures de l'image. C' est vraiment intéressant en fait parce qu'il ressemble à une chose 3_D, donc votre site Web n'est plus plat et vous pouvez jouer beaucoup avec elle grâce à la propriété de filtre d'ombre tombante. Je vous recommande fortement de le vérifier et d'appliquer vos propres idées et solutions. La dernière chose que je veux mentionner ici est que nous pouvons également jouer avec le filtre d'ombre portée en utilisant des animations CSS. Comme vous pouvez le voir, la chose est très simple, il suffit d'appliquer l'animation, l'animation d'image clé qui change la position de décalage pour x et y. Si nous regardons dans le code, vous verrez que nous avons les images clés, ou pour la première image, nous aurons quelques sortes de valeurs et pour la dernière, il a augmenté le décalage pour l'axe des x et aussi la plus grande diffusion du flou. Je suis vraiment curieux de savoir ce que vous allez accomplir en mélangeant toutes ces propriétés telles que le filtrage et les animations, alors faites-le moi savoir en mettant votre travail dans la section projet. La dernière partie de cette classe est, nous allons nous concentrer sur les modes de fusion CSS. C' est super excitant. Reste avec moi, s'il te plaît. 5. Motifs de mélange CSS - Introduction: C' est le moment de commencer à jouer avec les modes de fusion. Les modes de fusion CSS nous permettent de fusionner les éléments avec les éléments derrière. Nous pouvons utiliser le mode mix blend, où nous mélangeons l'élément et cet élément derrière lui. Pour le mode de fusion d'arrière-plan, nous définissons le mélange entre l'image d'arrière-plan des éléments et sa couleur d'arrière-plan. [ inaudible] pourrait être familier avec les modes de fusion. Par exemple, dans Photoshop, où vous pouvez appliquer cet ami affecte sur le calque D. Par exemple, nous pouvons avoir un mode de thérapie ou de fusion de superposition ou une lumière de broche. Cela signifie que notre image du calque deux est mélangée, est mélangée, le calque qui a derrière elle. C' est pourquoi nous pouvons atteindre ces couleurs étonnantes. Comme vous pouvez le voir ici, nous avons la liste complète des modes de fusion disponibles dans Photoshop. La beauté du mode de fusion CSS est que nous avons le même disponible en couleur. Vérifions comment CSS fondre les modes, mot et pratique. Nous avons l'image sur la gauche. C' est une étiquette IMG simple. J' applique le mode mixte. Le premier exemple que nous voulons vérifier en tant que couleur. Ensuite, nous avons la brûlure de couleur, l'esquive de couleur, l'assombrissement, la différence , l'exclusion, la lumière dure, la teinte, ce qui est très fou, hériter de sorte qu'il ne change rien. Éclairage initial, luminosité, multiplier, normal, superposition, saturation, écran, lumière douce, désactivé. Nous pouvons jouer avec les couleurs en changeant la couleur de fond du parent de cet élément IMG. Nous allons le rendre bleu et le changer à l'exclusion. Nous aurons un tel résultat. Pour rendre l'effet plus fort, nous pouvons appliquer des niveaux de gris en ajoutant un filtre CSS. Grâce à cela, nous verrons que les couleurs étaient limitées parce que notre image est maintenant en niveaux de gris donc nous avons seulement les niveaux ont des couleurs grises. Dans l'exercice à part, nous allons expérimenter les modes de fusion pour créer l'effet double tonalité. Vous pouvez être familier avec ce produit spotify. 6. Effet Duotone: Dans ce dernier exercice, nous allons créer un effet duotone. L' effet le plus fin que nous voulons obtenir avec les modes de fusion CSS, est celui que vous pouvez voir à gauche. Cela me rappelle l'effet duotone, connu de Spotify. J' espère que vous en êtes familier. Alors commençons à faire l'expérience. Ouvrons le dossier duotone des modes de fusion, et Flash index HTML. C' est là que nous allons mettre en œuvre l'effet duotone. Ouvrons les outils Def, et inspectons le code. Il y a quelques choses à faire, afin de créer l'effet duotone. Tout d'abord, nous allons appliquer la couleur d'arrière-plan au conteneur, que c'est un parent de notre image. Dans notre cas, c'est le sélecteur d'image gauche de la classe d'image. La deuxième chose est d'appliquer une propriété de mode de mélange à l'image, rendre l'image en niveaux de gris, et de prendre le reste du contraste. Pour maximiser l'effet duotone, il est nécessaire d'avoir l'image en niveaux de gris. La dernière chose serait de créer un pseudo élément avec une couleur d'arrière-plan, donc nous aurons les deux couleurs mélangées ensemble. Une couleur qui va être prise du conteneur parent, et la seconde qui va être prise à partir du pseudo conteneur. Appliquons-le par couleur rouge. Disons qu'on veut le bleu d'abord. C' est comme ça que nous allons voir la couleur bleue, à la place comme ça. Maintenant, nous pouvons voir l'image, nous allons ajouter le mode de mélange, et comme vous pouvez le voir, l'image est mélangée avec le fond bleu. Mais maintenant, nous devons aussi créer la pseudo classe. Copions d'abord le code et l'implémentons dans notre CSS. Donc, je suis à la recherche de conteneur d'image gauche, j'ai fait en arrière-plan. J' ajoute le mode mix blend pour l'instant. Nous pouvons utiliser lighten, et nous avons également voulu appliquer un filtre, pour faire l'image en niveaux de gris. J' écris, filtre les niveaux de gris 1, et nous pouvons également augmenter le contraste de 30 pour cent [inaudible]. Actualisons la page, et vous pouvez voir que vous obtenez l'arrière-plan, nous pouvons changer, c'est l'arrière-plan dans le conteneur parent, et l'individu a obtenu l'allégement, mode de mélange appliqué, et un filtre en niveaux de gris. Nous pouvons également changer le mode de mélange à n'importe quel autre mode. Je vais suggérer d'aller avec assombrir au lieu d'alléger, parce que nous allons utiliser le lighten pour le pseudo élément. Parlant de pseudo élément, nous aurons bien sûr besoin de le créer. Nous créons le pseudo élément pour le conteneur parent de l'image, donc dans notre cas, c'est l'image de gauche. C' est à quoi ressemble le pseudo élément, et il est très important de définir le contenu, afin d'avoir le pseudo élément généré. Il peut être vidé, comme je l'ai fait ici, et bien sûr en définissant la taille, donc la hauteur et la largeur. Nous avons la position absolue, Tab zéro, gauche zéro, et maintenant nous pouvons appliquer la couleur de fond. J' ajoute juste quelqu'un, juste un hasard, et le mode mélange. Comme mentionné précédemment, je vais appliquer assombrir. Alors sauvegardons, et actualisons la page. Quelque chose a changé. Quelqu' un n'était pas le meilleur choix, donc on peut essayer d'utiliser les couleurs de l'ami. Voyons quelle image est ici. Je suggère d'aller avec un rouge, pour le conteneur parent, et pour, après deux cours, le bleu. Désolé de l'avoir changé, c'est de l'expérience. Après avoir collé cette couleur et pour le conteneur parent rouge. Je suis rafraîchissant, et c'est l'effet final. Bien sûr, nous pouvons essayer d'être plus fou avec elle, et par exemple ajouter un écran, ou tout autre qui convient mieux à vos besoins. Mais c'est ainsi que vous pouvez faire l'effet duotone, en mélangeant les couleurs du conteneur parent, avec un pseudo élément qui lui est appliqué.