Günümüzde en çok kullanılan sosyal medya hesaplarından birisi de hiç şüphesiz ki Instagramdır. Instagramda yer alan yenilikler (hikayeler bölümü gibi) herkesin ilgisini çekmekte ve uygulamaya çalışmaktalar. Instagram denildiğinde akla gelen özelliklerinden birisi de fotoğraflara uygulanan filtredir. Çok güzel tonlarda hazırlanan ve sıklıkla kullanılan bu özelliği CSS ile gerçekleştirmek oldukça kolaydır.
CSSGram ile CSS dosyasını kullanarak fotoğraflara instagram filtresi uygulayabilirsiniz. İnstagram filtrelerini uygulayabilmek için öncelikle github sayfasından CSSGram dosyalarını indirmelisiniz. İndirdiğiniz rar dosyasının içerisinde site dosyasının içerisindeki CSS dosyası ile filtreleme işlemini yapabilirsiniz. Bu CSS dosyasında filtrelerin toplu hali ve ayrı ayrı hali vardır. İstediğiniz filtreyi seçerek kendinize göre birleştirme yapabilirsiniz.
Hepsini denemek adın demo için hazırlanan css dosyasını kullanmanızı öneririm. İlk olarak CSS dosyasını yeni oluşturduğunuz bir klasöre atınız. Ardından CSS dosyasının dışına bir index.html oluşturun. Aşağıdaki kodları bu dosyanın içerisine yazın.
<link rel="stylesheet" href="css/demo-site.min.css"> <figure class="lofi"> <img src="araba.jpg"> </figure> <figure class="earlybird"> <img src="araba.jpg"> </figure>
Yukarıdaki gibi ilk olarak link etiketiyle CSS dosyasının bulunduğu yolu seçiniz. Resimlere filtre uygulamak için figure etiketi kullanılmaktadır. Bu etikete kullanmak istediğiniz filtre ismini yazmanız gerekmektedir. Bu etiketin içine ise IMG etiketini oluşturup resim yolunu belirlemelisiniz.
CSSGram ile yukarıdaki gibi fotoğraflarınıza filtre uygulayabilirsiniz. Fotoğraflara filtre uygulayıp indirilmesini de sağlayabilirsiniz.