Share
Dans les deux derniers tutoriels de cette série, nous avons expliqué comment les filtres et les modes de fusion peuvent complètement changer l'apparence des images. Dans ce tutoriel, je couvrirai les bases de l'édition d'images en utilisant ces deux propriétés ensemble.
Toute édition d'image non primitive nécessite généralement plus qu'un simple élément. Cela peut être accompli avec des pseudo-éléments. Malheureusement, il y a une autre complication. le img L'élément vient sous les éléments remplacés. Par conséquent, :avant et :après ne fonctionnera pas avec les balises d'image. Pour résoudre ce problème, nous aurons besoin d’un wrapper autour de notre image et du figure tag semble le meilleur candidat dans ce cas. Par conséquent, notre balisage devrait ressembler à ceci:
Tous les effets d’édition que nous allons créer auront un noyau CSS commun.
figure position: relative; figure: avant, figure: après contenu: "; hauteur: 100%; largeur: 100%; haut: 0; gauche: 0; position: absolue; img largeur: 100%; hauteur: 100%; marge: 0; remplissage: 0;
J'ai utilisé le :avant et :après pseudo-éléments pour pouvoir appliquer divers modes de fusion. Notez que j'ai réglé le largeur et la taille à 100% pour couvrir les figure correctement, et j'ai utilisé le positionnement absolu pour un alignement parfait.
Dans la plupart des cas, nous appliquerons les filtres sur les images et utiliserons les modes de fusion et d’autres effets sur les pseudo-éléments. L'image ci-dessous est l'image originale que nous allons éditer.
Pour créer une image à contraste élevé, vous pouvez simplement régler le contraste sur une valeur plus élevée, mais augmenter la luminosité rend l'effet plus spectaculaire. Si vous n'utilisiez que des filtres, c'est tout ce que vous pourriez faire. Cependant, avec les modes de fusion, vous pouvez également ajouter une ombre de boîte incrustée avec recouvrir fusion à l'image pour de meilleurs résultats. Voici le CSS pour cet effet:
img filtre: contraste (1.8) luminosité (1.5) niveaux de gris (1); figure: before z-index: 3; mode mix-blend: superposition; box-shadow: 0 0 200 pixels noir;
L'ajout d'un z-index maintient nos pseudo-éléments au-dessus de l'image. J'ai utilisé le mode de fondu de superposition pour garder l'image légèrement sombre après l'application de l'ombre de la boîte.
Essayez de survoler l'image ci-dessous pour voir la différence entre les filtres et une combinaison de filtres et de modes de fusion..
Pour la pratique, vous pouvez essayer différentes valeurs pour le boîte ombre propriété dans la démo CodePen.
Dans la plupart des photos anciennes, les couleurs disparaissent généralement et leur doublure est brun rougeâtre. Pour recréer le même effet, nous devrons utiliser plus d'éléments et de filtres. Voici notre CSS:
img filtre: saturer (0,6); figure filtre: contraste (1.1) saturer (1.9) sépia (0.7) niveaux de gris (0.3); figure: before z-index: 2; mode mix-blend: multiplie; boîte-ombre: 0 0 250px brown inset; arrière-plan: rgba (125, 100, 0, 0,3); figure: after z-index: 3; mode mélange-mélange: lumière dure; boîte-ombre: 0 0 150px pink inset; arrière-plan: rgba (198, 155, 0, 0,3);
Cette fois-ci, j'ai appliqué des filtres à la fois sur l'image et sur la figure. En gros, nous voulons que l'image soit moins colorée. Ceci est obtenu en utilisant le filtre saturé avec une valeur inférieure à 1. Les filtres de figure sont appliqués après tout le mélange. Si vous n'appliquez pas ces filtres, le résultat final aura des nuances de brun beaucoup plus prononcées, ce qui n'est pas souhaitable..
Notez que j'ai également appliqué un fond rougeâtre semi-transparent sur les deux pseudo-éléments. Cela donne aux images leur aspect brun rougeâtre. La boîte-ombre est utilisée pour garder le contour relativement plus brun.
Vous devriez expérimenter différentes propriétés dans la démo pour voir si vous pouvez obtenir de meilleurs résultats..
Cette fois, nous allons essayer de donner à notre image une teinte bleue. Par rapport aux couleurs chaudes, l'ajout d'une nuance de couleurs froides comme le bleu facilite la lecture des images..
C'est le CSS que nous devons appliquer:
img filtre: luminosité (1,1) contraste (1,3); figure: before z-index: 2; mode mix-blend: multiplie; boîte-ombre: 0 0 100px rgba (100, 150, 200, 1) encarté, 0 0 300px rgba (100, 150, 200, 1) encarté; figure: after z-index: 3; mode mix-blend: différence; arrière-plan: rgba (0, 0, 255, 0,3);
Je commence par augmenter la luminosité et le contraste de notre image. Cela garantira que notre image ne perdra pas des couleurs moins saillantes et ne deviendra pas trop terne lors de la retouche.
Vous devez généralement utiliser plusieurs boîte ombres avec des couleurs plus claires pour des changements notables. C'est pourquoi j'ajoute deux bleutés boîte ombres à notre image. Juste en utilisant un boîte ombre limite la nuance bleue à la limite de notre image. Pour répandre la couleur bleue sur notre image, je l’utilise comme arrière-plan sur le :après pseudo élément. Voici le résultat final de tous ces filtres:
Essayez d'ajouter une teinte verte ou rouge à l'image dans la démo..
Avez-vous déjà assisté à une soirée légèrement nuageuse avec des particules de sable en suspension dans l'atmosphère à cause du vent? Dans ces conditions météorologiques, tout a une teinte jaunâtre et les objets semblent un peu ternes. Pour recréer le même effet, nous avons besoin du CSS suivant:
img filtre: saturer (0,2); figure filtre: contraste (1.8) luminosité (1.1) saturer (1.5); figure: before z-index: 2; mode mix-blend: multiplie; box-shadow: 0 0 100px rgba (0,0,0,0,5) inséré; arrière-plan: rgba (125, 100, 0, 0,3); figure: after z-index: 3; mode mélange-mélange: lumière dure; box-shadow: 0 0 500px rgba (0,0,0,0,6) inséré; arrière-plan: rgba (198, 155, 0, 0,3);
La première chose que je fais est de réduire la saturation de l’image. Les deux :avant et :après Les pseudo-éléments ont des fonds jaunâtres translucides pour ajouter la teinte souhaitée. En utilisant le Lumière forte mode de fusion sur :après rend la brume plus importante.
le boîte ombre sur les pseudo-éléments augmente l'attention sur le motard. Enfin, appliquer une haute contraste, luminosité et saturation filtres à notre figure élément renforce la brume.
Dans la démo, vous pouvez essayer différentes valeurs pour différentes propriétés pour voir comment elles affectent le résultat final..
Ce n'est pas si difficile d'éditer des images en CSS. Si vous gardez à l’esprit les points que j’ai abordés dans ce tutoriel, vous pourrez créer d’excellents filtres de votre choix..
Pour vous exercer, vous pouvez expérimenter les démonstrations de ce didacticiel ou essayer de recréer les filtres Instagram les plus répandus. Vous pouvez également consulter la variété d’animations et d’effets disponibles sur le marché Envato au cas où vous auriez besoin de filtres prêts à utiliser..
Accentsconagua
