CSS ile Resimlere Gradient Filtresi

CSS ile artık birçok resim efekti ve filtresi hazırlayabiliyoruz. Daha önceleri filtre efektleri üzerine uzun uzun konuşmuştuk.

Bunların yanısıra perdeleme ve :after seçimlerinin farklı kullanımlarıyla da ilgi çekici tasarımlar oluşturmak mümkün.

Bu dersimizde resimlerin üzerine şık bir gradient efekti uygulayacağız ve bunu sadece CSS ile yapacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS ile Gradient Filtreleme

Yapacağımız işlemde :after seçimini bir perde gibi kullanarak resimlerin üzerine klasik CSS gradientleri uygulayacağız. Tabii bu işlemi yaparken bir çerçeveye ihtiyaç duyacağız. Burada da yardımımıza HTML5‘in figure elemanı yetişecek.

HTML Kodları

Gradient filtresi uygulayacağımız resimlerde kullanacağımız yapı şu şekilde olmalı:

  <figure class="filtre FILTRE_ADI">
    <img src="RESIM_ADRESI">
  </figure>

FILTRE_ADI yazan yere CSS kodlarımızın altında yaptığımız renk tanımlarından (yesil, sari, alev, retro) birini koyabiliriz.

CSS Kodları

İlk olarak figure öğemiz içerisindeki resimlerin renklerini kısalım, renk karşıtlığını düzenleyelim.

figure.filtre img {
  vertical-align: middle;
  -webkit-filter: grayscale(100%) contrast(0.9);
  -moz-filter: grayscale(100%) contrast(0.9);
  filter: grayscale(100%) contrast(0.9);
}

Figure elemanına çerçeve tanımını katalım.

figure.filtre{
  position: relative;
  display: inline-table;
  margin: 0;
}

Şimdi de aynı öğeye :after tanımı ile perde atayalım.

figure.filtre:after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .5;
}

CSS kodlarımız hazır. Şimdi de renk tanımlarımızı yapalım.

Yeşil Gradient

.yesil:after {
  background: linear-gradient(to right, #d2ff52 0%, #91e842 100%);
}

---

Sarı Gradient

.sari:after {
  background: linear-gradient(to right, #f1e767 0%, #feb645 100%);
}

---

Alev Gradient

.alev:after {
  background-image: linear-gradient(80deg, orange, #810000);
}

---

Retro Gradient

.retro:after {
  background-image: linear-gradient(325deg, #1cbaeb 7%, #ff0000 90%);
}