Jak zastosować filtry Instagram w obrazach internetowych
Wielu uwielbia korzystać z Instagrama i filtrów dołączonych do aplikacji, aby ich zdjęcia były bardziej interesujące i piękne. Jak dotąd korzystanie z tych filtrów jest ograniczone do używania wewnątrz aplikacji. Co jeśli chcesz użyj filtrów Instagram na obrazach internetowych, poza aplikacją, jak zdjęcia, które chcesz umieścić na swoim osobistym blogu lub stronie internetowej?
Możesz użyć CSSGram, małej biblioteki, która pozwala edytuj swoje zdjęcia za pomocą filtrów podobnych do tych, które można znaleźć w aplikacji Instagram. W przeciwieństwie do Photoshopa, gdzie edycje są ręczne lub wykonywane za pomocą akcji Photoshopa, z CSSGram cały proces odbywa się za pomocą CSS.
Jak to działa
Aby wygenerować efekt, wykorzystuje CSSGram Filtry CSS i Tryb mieszania CSS, zasadniczo mieszanie efektów do punktu, w którym naśladuje pożądany filtr Instagram. Efekty są stosowane do kontenera obrazów za pomocą pseudoelementów. Sprawdźmy, jak to się robi z tym przykładem „1977”:
Oto dodany pseudoelement.
._1977 pozycja: względna; ._1977: after content: "; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute;
I to jest filtr CSS i dodano Blend:
._1977 -webkit-filter: kontrast (1.1) jasność (1,1) nasycenie (1,3); filtr: kontrast (1.1) jasność (1,1) nasycenie (1,3); ._1977: after background: rgba (243, 106, 188, 0.3); mix-blend-mode: screen;
Jak używać
Nie możemy dodać klasy filtra bezpośrednio do elementu image, należy go dodać do kontenera lub klasy nadrzędnej, na przykład za pomocą
Kod będzie wyglądał następująco:
Nie zapomnij dołączyć biblioteki CSSgram (pobierz ją tutaj) do swojego dokumentu HTML.
Stworzyłem demo obrazów przed i po dodaniu filtra, a wynik jest bardzo miły. W bibliotece jest obecnie 13 filtrów. Poniżej możesz zobaczyć różnice między oryginalnym obrazem a obrazem pod filtrami ”1977„,”Aden" i "Bawełniany materiał w kratkę„.
Zobacz pióro rOKPmW
Jeśli jesteś zainteresowany używaniem jednego ze stylów, możesz odpowiednio załadować poszczególne pliki CSS.
Używanie SCSS
Jeśli chcesz dodać filtry do bieżącej klasy kontenera obrazów bez zmiany nazwy, możesz to zrobić, rozszerzając efekt filtra wewnątrz plików SCSS. Oto jak to zrobić.
Najpierw pobierz plik źródłowy SCSS i zaimportuj plik SCSS.
@import 'vendor / cssgram';
Załóżmy, że masz strukturę HTML jak poniżej:
Następnie w twoim style.scss rozszerz filtr tak:
.moja-klasa … @extend% _1977;
Więcej postów na Instagramie
- 40 Narzędzia i aplikacje doładowania konta Instagram
- 20 przydatnych aplikacji, aby jak najlepiej wykorzystać Instagram
- 10 przydatnych porad i wskazówek Instagram, które powinieneś wiedzieć
