Siz bu yazıyı okumaya başlamadan önce belirtmem gereken konu; bu yazıdaki anlatılanlarla Instagram’da fotoğraflarınıza nasıl filtre ekleyebileceğiniz anlatılmamaktadır. İlk cümlede bunu belirtmemin amacı da boşu boşuna sizin zamanınızı harcamamak içindir. Eğer ki bir websitesi sahibi iseniz ve sitenizde bulunan görsellere Instagram fotoğraf filtreleri uygulamak istiyorsanız tam yerine geldiniz.
jQuery, FontAwesome gibi oluşumları az çok bilirsiniz. Bir kaç kısa kod yardımı ile yapmak istediğiniz uzun işlemleri gerçekleştirmenize yarayan kütüphanelerdir. CSSGram da tam olarak bu maksatla geliştirilmiş olan bir kütüphanedir. Genel amacı Instagramda kullanılan filtreler olduğu için başka özellikler eklenmemiş.
FontAwesome de bir kaç ikon ilebaşlamıştı bu işe. Şimdi ise aklınıza gelebilecek bütün ikonları barındırıyor kendi içinde. Instagram’dan ilham alarak oluşturulan bu kütüphane de belki bir gün gelir her türlü filtreyi kullanmanıza imkan sağlayabilecek hale gelir. Şuan için 26 adet filtresi bulunuyor.
Websitenizdeki fotoğraflara uyarlamak oldukça basit. Css dosya uzantısını head etiketleri arasına ekledikten sonra class ismi olarak bir filtre ismi girmeniz yeterli olacaktır.
Head etiketleri arasına eklemeniz gereken CSSGram uzantısı aşağıdaki gibidir.
Şu linki de kullanabilirsiniz. Arada herhangi bir fark yok. Biri Cloudflare sitesine yüklenmiş diğeri de Netna Ssl sitesine yüklenmiş. Cloudflare daha sağlam gibi duruyor.
Head etiketleri arasına ekledikten sonra geriye hangi filtreleri seçip kullanacağınız kalıyor. Her fotoğrafa farklı filtre uygulamak isterseniz, fotoğrafları eklemiş olduğunuz class yada id lere de ona göre farklı filtre yazmanız gerekiyor.
CSSGram Instagram filtreleri
- 1977:
class="_1977" - Aden:
class="aden" - Brannan:
class="brannan" - Brooklyn:
class="brooklyn" - Clarendon:
class="clarendon" - Earlybird:
class="earlybird" - Gingham:
class="gingham" - Hudson:
class="hudson" - Inkwell:
class="inkwell" - Kelvin:
class="kelvin" - Lark:
class="lark" - Lo-Fi:
class="lofi" - Maven:
class="maven" - Mayfair:
class="mayfair" - Moon:
class="moon" - Nashville:
class="nashville" - Perpetua:
class="perpetua" - Reyes:
class="reyes" - Rise:
class="rise" - Slumber:
class="slumber" - Stinson:
class="stinson" - Toaster:
class="toaster" - Valencia:
class="valencia" - Walden:
class="walden" - Willow:
class="willow" - X-pro II:
class="xpro2"
Örnek :
Demo sayfasında Sass içinde kullanımı hakkında bilgiler mevcut.
güzel bir yazı..
https://zoomlabakalimm.blogspot.com/
Burada iyi gönderiler buldum. Yazma şeklini seviyorum. Mükemmel!
Yararlı bilgiler için teşekkür ederim, müşterilerimizin sitesinde uygulamaya çalışacağım.