Hoe Instagram-filters op webafbeeldingen toe te passen
Veel houden ervan Instagram en de filters te gebruiken die bij de app zijn geleverd, om hun foto's interessanter en mooier te maken. Tot dusverre is het gebruik van deze filters beperkt tot gebruik in de app. Wat als je wilt gebruik Instagram-filters op webafbeeldingen, buiten de app, zoals foto's die u in uw persoonlijke blog of website wilt plaatsen?
Nou, je kunt CSSGram gebruiken, een kleine bibliotheek waarmee je dat kunt doen bewerk je foto's met filters die lijken op wat je in de Instagram-app kunt vinden. In tegenstelling tot Photoshop, waar bewerkingen handmatig zijn of gedaan via Photoshop-acties, met CSSGram, verloopt het hele proces via CSS.
Hoe het werkt
Om het effect te genereren, gebruikt CSSGram CSS-filters en CSS-mengmodus, in feite vermengen de effecten tot het punt waarop het je gewenste Instagram-filter nabootst. De effecten worden toegepast op de beeldcontainer, via pseudo-elementen. Laten we eens kijken hoe dit gebeurt met dit "1977" -voorbeeld:
Hier is het pseudo-element toegevoegd.
._1977 positie: relatief; ._1977: na content: "; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute;
En dit is het CSS-filter en de toevoeging toegevoegd:
._1977 -webkit-filter: contrast (1.1) helderheid (1.1) verzadiging (1.3); filter: contrast (1.1) helderheid (1.1) verzadiging (1.3); ._1977: na background: rgba (243, 106, 188, 0.3); mix-blend-modus: scherm;
Hoe te gebruiken
We kunnen de filterklasse niet rechtstreeks aan het afbeeldingselement toevoegen, maar deze moet aan de container of bovenliggende klasse worden toegevoegd, bijvoorbeeld met
De code ziet er als volgt uit:
Vergeet niet om de CSSgram-bibliotheek (hier te downloaden) in uw HTML-document op te nemen.
Ik heb de demo's voor en na het toevoegen van filter gemaakt en het resultaat is erg mooi. Er zijn momenteel 13 filters in de bibliotheek opgenomen. Hieronder ziet u de verschillen tussen de originele afbeelding en de afbeelding onder de filters "1977","Aden"en"katoenen stof".
Zie de pen ROKPmW
Als u alleen maar geïnteresseerd bent in het gebruik van een van de stijlen, kunt u de afzonderlijke CSS-bestanden overeenkomstig laden.
SCSS gebruiken
Als u de filters zonder naamswijziging aan uw huidige containercontainerklasse wilt toevoegen, kunt u dit doen door het filtereffect in uw SCSS-bestanden uit te breiden. Hier is hoe het te doen.
Download eerst het SCSS-bronbestand en importeer uw SCSS-bestand.
@import 'leverancier / cssgram';
Stel dat je de HTML-structuur hebt zoals hieronder:
Voeg vervolgens in je style.scss het filter als volgt uit:
.my-class ... @extend% _1977;
Meer Instagram-berichten
- 40 Hulpmiddelen & apps om uw Instagram-account te stimuleren
- 20 handige apps om het meeste uit Instagram te halen
- 10 nuttige tips en trucs voor Instagram die u moet weten
