Websayfasındaki Fotoğraflara Instagram filtresi kullanma – CSSGram

26Okunma
3 yorum

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ş.

Websayfasındaki

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.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">

Ş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.

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

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

  1. 1977: class="_1977"
  2. Aden: class="aden"
  3. Brannan: class="brannan"
  4. Brooklyn: class="brooklyn"
  5. Clarendon: class="clarendon"
  6. Earlybird: class="earlybird"
  7. Gingham: class="gingham"
  8. Hudson: class="hudson"
  9. Inkwell: class="inkwell"
  10. Kelvin: class="kelvin"
  11. Lark: class="lark"
  12. Lo-Fi: class="lofi"
  13. Maven: class="maven"
  14. Mayfair: class="mayfair"
  15. Moon: class="moon"
  16. Nashville: class="nashville"
  17. Perpetua: class="perpetua"
  18. Reyes: class="reyes"
  19. Rise: class="rise"
  20. Slumber: class="slumber"
  21. Stinson: class="stinson"
  22. Toaster: class="toaster"
  23. Valencia: class="valencia"
  24. Walden: class="walden"
  25. Willow: class="willow"
  26. X-pro II: class="xpro2"

Örnek :

   <figure class="xpro2">
      <img data-src="../img.png" data-lazy="true" src="https://www.mintik.com/wp-content/themes/mintik/assets/img/z/load-tip.png"/>
   </figure>

Demo sayfasında Sass içinde kullanımı hakkında bilgiler mevcut.

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-12-20 tarihinde yayınlandı,Toplam 2162 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(3 yorum)
Yükleniyor...
oğuz akdeniz Yorumcu LV.1
2019-12-12 01:53:39 回 Yanıtla
siyah musluk Yorumcu LV.1
2020-06-08 09:51:12 回 Yanıtla

Burada iyi gönderiler buldum. Yazma şeklini seviyorum. Mükemmel!

Kurumsaltasarım Yorumcu LV.1
2020-08-24 13:20:22 回 Yanıtla

Yararlı bilgiler için teşekkür ederim, müşterilerimizin sitesinde uygulamaya çalışacağım.