CSS ile resimleri siyah-beyaz yapma: Grayscale

CSS 3 ile farklı son zamanların en trend içeriklerini sizlerle paylaşmaya devam ediyoruz. Bu kez yazımızda CSS kullanarak sitede kullanılan görseller/resimlerin renksiz olarak yani siyah-beyaz kullanılması konusunu ele alacağız.

CSS ile renksiz resim kullanımı aşağıdaki css kodları ile sitede kullanılmaktadır. CSS 3’te bu işlemi sağlayan özellik grayscale özelliğidir. Grayscale yüzde (%) üzerinden verdiğiniz değer ile fotoğrafları renksiz hale dönüştürür. Alternatif olarak eklenen görselleri renksiz kullanıp üzerine gelindiğinde renkli olacak şekilde veya tam tersi formatta kullanabilirsiniz.

Dilerseniz bir resmi siyah beyaz kullanıp, fare ile üzerine gelindiğinde :hover özelliği ile renkli olacak hale getirebilirsiniz. Bunu yapmak için de grayscale değerini 100% girmek yerine 0% girdiğinizde renk ton özelliği devre dışı kalacaktır.

Yukarıdaki örnek resmimizde de kullandığımız üzere html, php, asp sitede css ile fotoğraflarınızı veya sitede kullandığınız logo gibi diğer içeriklerinizi renksiz hale getirebilirsiniz.

Resimleri siyah beyaz yapma

Grayscale yani görselleri renksiz hale dönüştürme CSS kodları şu şekildedir;

.haber-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Aynı görselin üzerine gelindiğinde tekrar renkli olması yani gerçek renklerini göstermek için ise şu şekilde :hover uygulayabilirsiniz.

.haber-img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

Bunun dışında css img etiketi ile sitede kullanılmış olan tüm resimleri de siyah-beyaz hale getirmeniz mümkündür.

Renkleri ters çevirme

Eğer renkleri siyah beyaz yaptığınızda özellikle koyu arka planlı görsellerde sorun yaşıyorsanız renkleri ters çevirme işlemi yapabilirsiniz. Bu durumda grayscale kodunu şu şekilde revize edebilirsiniz:

.haber-img {
filter: grayscale(0) invert(0);
}

Invert değeri seçilen görsel üzerindeki renkleri ters çevirecektir. Dilerseniz buradaki değerleri düzenleyerek yoğunluğu artırıp azaltabilirsiniz.