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%);

CSS ile Resimlere Gradient Filtresi