Hoe Instagram-filters op webafbeeldingen toe te passen

Velen zijn dol op het gebruik van Instagram en de filters die bij de app zijn geleverd, om hun foto's interessanter en mooier te maken. Tot nu toe is het gebruik van deze filters beperkt tot gebruik in de app. Wat als je Instagram-filters op webafbeeldingen wilt gebruiken, buiten de app, zoals foto's die je in je persoonlijke blog of website wilt plaatsen?

Je kunt CSSGram gebruiken, een kleine bibliotheek waarmee je je foto's kunt bewerken met filters die lijken op wat je in de Instagram-app kunt vinden . In tegenstelling tot Photoshop, waar bewerkingen handmatig zijn of worden 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-overvloeimodus, waarbij de effecten in feite worden vermengd met het punt waarop het uw 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: ''; weergave: blok; hoogte: 100%; breedte: 100%; boven: 0; links: 0; positie: absoluut; } 

En dit is het CSS-filter en het toegevoegde mengsel:

 ._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

als een container.

De code ziet er als volgt uit:

Vergeet niet om de CSSgram-bibliotheek (hier krijg je het hier) aan je HTML-document toe te voegen.

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 " Gingham ".

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

Hoe een volgeling van klanten van complete vreemden te bouwen

Het klinkt misschien onmogelijk, maar het opbouwen van een relatie met je lezers in een enkele post is wat de professionele freelance-inhoudschrijver doet voor zijn broodwinning. Ons doel, hoe vergezocht het ook moge klinken, is om de aandacht van een compleet vreemde te trekken en die persoon te veranderen in een vriend, een nieuwsgierige antwoordzoeker, een bewonderaar, een student, een klant of een combinatie van deze

(Technische en ontwerptips)

15 Lightbox-bibliotheken voor mobiel reactievermogen

Lightbox is een populaire manier om afbeeldingen op internet te plaatsen . Wanneer u op een afbeelding klikt, verschijnt de Lightbox met een of andere vorm van animatie en dimt de achtergrond zodat u zich op de afbeelding zelf richt. Het beeld is ook groter in schaal. De meeste populaire JavaScript-bibliotheken van Lightbox die we al jaren kennen, laten je dit goed doen op desktops, maar niet zozeer op mobiele platforms

(Technische en ontwerptips)