Web Görüntülerinde Instagram Filtreleri Nasıl Uygulanır?

Birçoğu, fotoğraflarını daha ilginç ve güzel hale getirmek için Instagram'ı ve uygulamasıyla gelen filtreleri kullanmayı seviyor. Şimdiye kadar, bu filtrelerin kullanımı uygulamanın içinde kullanımı sınırlıdır. Ya istersen web görüntülerinde Instagram filtreleri kullan, Uygulamanın dışında, kişisel blogunuza veya web sitenize eklemek istediğiniz fotoğraflar gibi?

Size olanak sağlayan küçük bir kütüphane olan CSSGram'ı kullanabilirsiniz. Instagram uygulamasında bulabildiğine benzer filtrelerle fotoğraflarını düzenle. Düzenlemelerin elle yapılan veya Photoshop eylemleriyle yapıldığı Photoshop'tan farklı olarak, CSSGram ile tüm işlem CSS aracılığıyla gerçekleştirilir.

Nasıl çalışır

Efekti oluşturmak için, CSSGram kullanır CSS filtreleri ve CSS harmanlama modu, efektleri temelde istediğiniz Instagram filtresini taklit ettiği noktaya karıştırmak. Efektler, sözde elemanlar vasıtasıyla görüntü kabına uygulanır. Bunun "1977" örneğiyle nasıl yapıldığını kontrol edelim:

İşte sözde eleman eklendi.

 ._1977 pozisyon: göreceli;  ._1977: content: "; ekran: blok; yükseklik:% 100; genişlik:% 100; üst: 0; sol: 0; konum: mutlak; 

Ve bu CSS filtresi ve Blend eklendi:

 ._1977 -webkit-filter: kontrast (1.1) parlaklık (1.1) doygunluk (1.3); filtre: kontrast (1.1) parlaklık (1.1) doygun (1.3);  ._1977: sonra arka plan: rgba (243, 106, 188, 0.3); karışım-harmanlama modu: ekran;  

Nasıl kullanılır

Filtre sınıfını doğrudan resim öğesine ekleyemiyoruz, örneğin kaba veya ana sınıfa eklenmesi gerekiyor.

 @import 'vendor / cssgram'; 

 .sınıfım … @extend% _1977;