Så här applicerar du Instagram-filter på webbbilder
Många älskar att använda Instagram och de filter som följer med appen, för att göra deras bilder mer intressanta och vackra. Hittills är användningen av dessa filter begränsade till användning inom appen. Vad händer om du vill använd Instagram-filter på webbbilder, utanför appen, som foton du vill lägga upp i din personliga blogg eller hemsida?
Tja, du kan använda CSSGram, ett litet bibliotek som låter dig göra det redigera dina foton med filter som liknar vad du hittar i Instagram-appen. Till skillnad från Photoshop där redigeringar är manuella eller gjort via Photoshop-åtgärder, med CSSGram, görs hela processen via CSS.
Hur det fungerar
För att generera effekten använder CSSGram CSS-filter och CSS-blandningsläge, i princip blandar effekterna till den punkt där den efterliknar ditt önskade Instagram-filter. Effekterna appliceras på bildbehållaren via pseudoelement. Låt oss kolla på hur det här görs med det här "1977" -exemplet:
Här är pseudo-elementet tillagt.
._1977 position: relativ; .1977: efter innehåll: "; display: block; höjd: 100%; bredd: 100%; topp: 0; vänster: 0; position: absolut;
Och det här är CSS-filtret och blandningen tillagt:
._1977 -webkit-filter: kontrast (1.1) ljusstyrka (1.1) mättad (1.3); filter: kontrast (1,1) ljusstyrka (1,1) mättad (1,3); .1977: efter bakgrund: rgba (243, 106, 188, 0,3); mix-mix-mode: skärm;
Hur man använder
Vi kan inte lägga till filterklassen direkt till bildelementet, det måste läggas till i behållaren eller förälderklassen, till exempel med
Koden kommer att se ut så här:
Glöm inte att inkludera CSSgram-biblioteket (hämta det här) till ditt HTML-dokument.
Jag skapade bilderna demo före och efter att lägga till filter och resultatet är väldigt trevligt. Det finns 13 filter som ingår i biblioteket för tillfället. Nedan kan du se skillnaderna mellan originalbilden och bilden under filtren "1977","Aden"och"Gingham".
Se penna rOKPmW
Om du bara är intresserad av att använda någon av formaten, kan du ladda de enskilda CSS-filerna i enlighet därmed.
Använda SCSS
Om du vill lägga till filtren i din nuvarande bildbehållarklass utan namnbyte kan du göra det genom att utvidga filtereffekten i dina SCSS-filer. Så här gör du det.
Ladda först SCSS-källfilen och importera din SCSS-fil.
@import "leverantör / cssgram";
Antag att du har HTML-strukturen som nedan:
Sedan i din style.scss, utöka filtret så här:
.min klass ... @extend% _1977;
Fler Instagram-inlägg
- 40 Verktyg & Apps för att överbelasta ditt Instagram-konto
- 20 Användbara Apps för att få ut det mesta av Instagram
- 10 Användbara Instagram Tips och tricks du borde veta
