Esenlikler! Bu yazımızda Grayscale nedir, Grayscale nasıl kullanılır ondan bahsedeceğiz. Bu yazımızı okuduktan sonra Grayscale CSS kodlarını öğrenebilir, resimlerinizi siyah-beyaz yapabilir, resmin üzerine gelince renk değiştirme işlemini uygulayabilirsiniz. Şimdi ilk sorumuz ile başlayalım.

 

Grayscale Nedir?

Kendim tarafından uzunca bir süre düşünmeden çevrilmiş Türkçe karşılığı Gri Tonlama veya Gri Skala olan bir Css resim efektidir. CSS kodları içerisinde Filtre Efekti diye geçmektedir. Artık CSS 3. versiyonu ile birlikte web alanındaki photoshop işlerini tek başına karşılamaya başladı. Bu özellik de o yolda büyük bir adım oldu. Bu efekt Google Chrome 53.0 versiyonu ve üzeri, Microsoft Internet Explorer yeni adı ile Edge 13.0 versiyonu ve üzeri, Mozilla Firefox 35.0 versiyonu ve üzeri, Safari 9.1 ve üzeri, son olarak da Opera 40.0 ve üzeri tarayıcılar tarafından sıkıntısız desteklenmektedir. Peki nasıl kullanılır?

 

Grayscale Nasıl Kullanılır?

Kullanımı konusuna gelecek olursak çok basittir. Bu yüzden elbette birkaç güzel, sitelerinizde kullanmaya hazır örnek ile bu basitliği taçlandıracağız. Bu efekt bildiğimiz gibi bir resim efektidir bu yüzden bizim öncelikli olarak bir resime ihtiyacımız var.

 

 

Resmimiz bu olsun öncelikle şunu belirtmekte fayda var Grayscale default value (varsayılan değer) sahibi değildir. Yani kodu kullanmak için sizin illaki bir değer atamanız gerekmektedir.

Kodumuz ise bu filter: grayscale(0%);

Kodun içerisindeki yüzde (%) değerini ne kadar artırırsak resim siyah-beyaz olmaya bir adım daha yaklaşacaktır yani ne kadar artırırsak renginden o kadar kaybedecek, gri skalası da aynı oranda artacaktır. Örneğin aşağıya aynı resmin Grayscale değeri %50 olan halini koyalım. Tabi ki farkı görebilmeniz için yukarıda bahsettiğimiz tarayıcı sürümlerine sahip olmanız gerekmektedir.

 

 

Şimdi resmimizi siyah-beyaz yapalım. Bunun için kodumuz filter: grayscale(100%);

Not: 100’ün üzerindeki değerler 100 gibi kabul görecektir yani siz daha fazla siyah beyaz olsun diye bu değeri 200 yapsanız bile kabul görmeyecektir, o değer sanki kod 100% yazılmış gibi çalışacaktır.

 

 

Gördüğünüz üzere yapabileceğimiz maksimum efekt bu şekilde olacaktır. Şimdi gelelim sitelerinizin çeşitli yerlerinde kullanabileceğiniz bir özelliğe. Bunu nasıl yapabileceğini soran insanlar her zaman çok olmuştur, halen de oluyor ve olacaktır. Resmin üzerine mouseyi getirince renklendirme, mouseyi çekince siyah-beyaz yapmak. Bunun için :hover kodundan yararlanıyoruz. :hover kodu verildiği bileşenin (class olur, id olur, img olur) mouse ile üzerine gelince veya etkileşime geçince (örneğin telefondan üzerine parmağınızı koymak gibi ) farklı işler yapmak için kullanılır. Örneğin stil/style kodlarımız içerisinde herhangi bir resime img{height: 100px; width: 100px;} kodunu yazdığımız zaman o resmin eni ve boyu 100 pixel olacaktır, devamında img:hover{height: 10px; width: 10px;} stilini tanımladığımız zaman o resmin üzerine gelince resmin eni ve boyu 10 pixel boyutuna değişecektir. Daha iyi anlamanız için bu özelliği jsfiddle sitesinden bir fiddle haline getirerek aşağıda paylaştım. Eğer kullanmayı bilmiyorsanız HTML sekmesine bastığınız zaman HTML kodlarını, CSS sekmesine bastığınız zaman CSS kodlarını görebileceğinizi unutmayın. Result sekmesine bastığınızda ise sonucu görebilirsiniz yani resmin üzerine mouse imlecini getirdiğiniz zaman renk değişikliğini, daha doğrusu grayscale değişikliğini görebilirsiniz.

 

Resmi siyah-beyaz üzerine gelince ise renkli yapmanın kodları: