Share
In de laatste twee zelfstudies van deze serie hebben we besproken hoe filters en overvloeimodi de weergave van afbeeldingen volledig kunnen veranderen. In deze zelfstudie zal ik ingaan op de basisprincipes van het bewerken van afbeeldingen door beide eigenschappen samen te gebruiken.
Voor elke niet-primitieve bewerking van afbeeldingen is meestal meer nodig dan een enkel element. Dit kan worden bereikt met pseudo-elementen. Helaas is er nog een complicatie. De img element komt onder vervangen elementen. Als gevolg, :voor en :na werkt niet met afbeeldingslabels. Om dit probleem op te lossen, hebben we een omhulsel rond onze afbeelding nodig en de figuur tag lijkt de beste kandidaat in dit geval. Daarom zou onze opmaak er als volgt uit moeten zien:
Alle bewerkeffecten die we zullen maken, hebben enkele algemene kern-CSS.
figuur positie: relatief; figure: before, figure: after content: "; height: 100%; width: 100%; top: 0; left: 0; position: absolute; img width: 100%; height: 100%; margin: 0; opvulling: 0;
Ik heb de :voor en :na pseudo-elementen zodat ik verschillende overvloeimodi kan toepassen. Merk op dat ik de breedte en hoogte tot 100% om de figuur goed, en ik heb absolute positionering gebruikt voor een perfecte uitlijning.
In de meeste gevallen passen we de filters toe op afbeeldingen en gebruiken we mengmodi en andere effecten op de pseudo-elementen. De onderstaande afbeelding is de originele afbeelding die we gaan bewerken.
Als u een afbeelding met een hoog contrast wilt maken, kunt u het contrast eenvoudig naar een hogere waarde instellen, maar als u de helderheid verhoogt, wordt het effect dramatischer. Als u alleen filters zou gebruiken, dan is dat alles wat u zou kunnen doen. Met mengmodi kunt u echter ook een inzet-vakschaduw toevoegen met bedekking overvloeien naar de afbeelding voor betere resultaten. Hier is de CSS voor dit effect:
img filter: contrast (1,8) helderheid (1,5) grijswaarden (1); figure: before z-index: 3; mix-blend-modus: overlay; vakschaduw: 0 0 200px zwarte inzet;
Het toevoegen van een z-index houdt onze pseudo-elementen boven de afbeelding. Ik heb de overlay-mengmodus gebruikt om het beeld enigszins donker te houden na het toepassen van de doosschaduw.
Plaats de muisaanwijzer op de onderstaande afbeelding om het verschil te zien tussen filters en een combinatie van filters en overvloeimodi.
Om te oefenen, kunt u verschillende waarden uitproberen voor de box-shadow eigendom in de CodePen-demo.
De kleuren op de meeste oude foto's vervagen meestal en ze hebben een roodbruine buitenlaag. Om hetzelfde effect opnieuw te creëren, zullen we meer elementen en filters moeten gebruiken. Hier is onze CSS:
img filter: verzadigen (0,6); figuur filter: contrast (1.1) verzadigde (1.9) sepia (0.7) grijstinten (0.3); figure: before z-index: 2; mix-blend-modus: vermenigvuldigen; vakschaduw: 0 0 250px bruine inzet; achtergrond: rgba (125, 100, 0, 0,3); figure: after z-index: 3; mix-blend-modus: hard licht; box-shadow: 0 0 150px roze inzet; achtergrond: rgba (198, 155, 0, 0.3);
Deze keer heb ik filters toegepast op zowel de afbeelding als de figuur. Kortom, we willen dat het beeld minder kleurrijk is. Dit wordt bereikt door het verzadigingsfilter te gebruiken met een waarde lager dan 1. De figuurfilters worden toegepast na alle overvloeiingen. Als u deze filters niet toepast, krijgt het eindresultaat veel prominentere tinten bruin, wat ongewenst is.
Merk op dat ik ook een semi-transparante roodachtige achtergrond heb toegepast op beide pseudo-elementen. Dit geeft de afbeeldingen een roodachtig bruine uitstraling. De doosschaduw wordt gebruikt om de contouren relatief bruin te houden.
Je moet met verschillende eigenschappen in de demo experimenteren om te zien of je betere resultaten kunt krijgen.
Deze keer zullen we proberen ons beeld een blauwe tint te geven. In vergelijking met warme kleuren, zorgt het toevoegen van een schaduw van koele kleuren zoals blauw ervoor dat afbeeldingen gemakkelijk te zien zijn.
Dit is de CSS die we moeten toepassen:
img filter: helderheid (1.1) contrast (1.3); figure: before z-index: 2; mix-blend-modus: vermenigvuldigen; vakschaduw: 0 0 100px rgba (100, 150, 200, 1) inzet, 0 0 300px rgba (100, 150, 200, 1) inzet; figure: after z-index: 3; mix-blend-modus: verschil; achtergrond: rgba (0, 0, 255, 0.3);
Ik begin met het verhogen van de helderheid en het contrast van onze afbeelding. Dit zorgt ervoor dat onze afbeelding geen minder prominente kleuren verliest en te saai wordt tijdens het bewerken.
Over het algemeen moet je meerdere gebruiken box-shadows met lichtere kleuren voor merkbare veranderingen. Dat is waarom ik twee blauwachtig toevoeg box-shadows naar ons imago. Gewoon met behulp van een box-shadow beperkt de blauwe tint tot de grens van onze afbeelding. Om de blauwe kleur over onze afbeelding te verspreiden, gebruik ik het als achtergrond op de :na pseudo element. Hier is het eindresultaat van al deze filters:
Probeer een groene of rode tint toe te voegen aan de afbeelding in de demo.
Heb je ooit een licht bewolkte avond gezien met zanddeeltjes die in de atmosfeer hangen vanwege de wind? In die weersomstandigheden heeft alles een geelachtige tint en lijken objecten een beetje saai te zijn. Om hetzelfde effect opnieuw te maken, hebben we de volgende CSS nodig:
img filter: verzadigd (0,2); figuur filter: contrast (1.8) helderheid (1.1) verzadiging (1.5); figure: before z-index: 2; mix-blend-modus: vermenigvuldigen; vakschaduw: 0 0 100px rgba (0,0,0,0.5) inzet; achtergrond: rgba (125, 100, 0, 0,3); figure: after z-index: 3; mix-blend-modus: hard licht; box-shadow: 0 0 500px rgba (0,0,0,0.6) inzet; achtergrond: rgba (198, 155, 0, 0.3);
Het eerste dat ik doe, is de beeldverzadiging verminderen. Beide :voor en :na pseudo-elementen hebben doorschijnende geelachtige achtergronden om de gewenste tint toe te voegen. De ... gebruiken hard licht mengmodus ingeschakeld :na maakt de nevel prominenter.
De box-shadow op pseudo-elementen verhoogt de focus op de fietser. Eindelijk, hoog toepassen contrast, helderheid en verzadiging filters voor onze figuur element versterkt de waas.
In de demo kunt u verschillende waarden uitproberen voor verschillende eigenschappen om te zien hoe deze het eindresultaat beïnvloeden.
Het is niet zo moeilijk om afbeeldingen in CSS te bewerken. Als u de punten behoudt die ik in deze zelfstudie heb besproken, kunt u enkele verbazingwekkende eigen filters maken.
Voor de praktijk kun je in deze tutorial experimenteren met de demo's of proberen populaire Instagram-filters opnieuw te maken. U kunt ook de verschillende animaties en effecten bekijken die beschikbaar zijn in de Envato Marketplace voor het geval u enkele kant-en-klare filters nodig heeft.
Accentsconagua
