Geçtiğimiz 10 kasımda, web sitemin tüm renklerini gri tonlarına çevirerek günün anlam ve önemine ait bir şey hazırlamak istedim. Bunun için aklıma CSS kullanarak grayscale filtresi ile yapacağımı düşünüp uyguladım. Tam istediğim bir sonuç aldığımdan bunu sizinlede paylaşmak istedim.
Sizin için yas ilan edeceğiniz bir durumda grayscale filtresi ile etkili sonuçlar elde edebilirsiniz. Kişisel durumlar dışında genel günler içinde bu uygulamadan faydalanabilirsiniz. Bu kullanımı özel kodlanmış web sitelerinizde ve tüm WordPress temalarında kullanabilirsiniz.
WordPress Siteler İçin Uygulama
WordPress alt yapısına ait tüm temalarda bu işlemi gerçekleştirmek için Görünüm -> Özelleştir -> Ek CSS bölümüne gelerek aşağıda yer alan CSS kodlarını ekleyip Yayımla demeniz yeterli olacaktır.
html{
-webkit-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
}
Yukarıda yer alan kodları Ek CSS bölümüne eklediğinizde web sitenizin tüm renklerinin gri tonlarına geldiğini görebilirsiniz. Kullanım amacınızın sonuna geldiğinizde Görünüm-> Özelleştir -> Ek CSS bölümünden yazmış olduğunuz kodları kaldırarak eski haline getirebilirsiniz.
Özel Yazılımlar İçin Uygulama
Özel yazılımlar için uygulama da oldukça basittir. Aslında aynı kodları eklemeniz yeterli olacaktır. Bunun için web sitenizin genel CSS dosyasına aynı kodları ekleyerek tüm renklerin gri tonlarına gelmesini sağlayabilirsiniz.
html{
-webkit-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
}
Yine bu kodla birlikte özel yazılımlarda gri tonlara sahip olabilirsiniz. Eski haline gelmek içinde yazmış olduğunuz bu kodları silerek eski haline getirebilirsiniz. Yada web sitenizin header bölümüne aç/kapat özelliği ile bu kodları yazarak dinamik olarak düzenlenen bir yapı haline getirebilirsiniz.
Ufak Değişiklikler
Web sitenizde yer alan tüm renkleri gri tonlarına getirdikten sonra öne çıkartmak istediğiniz değeri !important ile grilik değerini sıfırlayarak sadece o alanın renkli olmasını sağlayabilirsiniz. Yada bunun gibi değişiklikler yaparak daha hoş görünümler sağlayabilirsiniz.
Yukarıda yer alan görsellerden CSS filtreleme işleminin sonucunu görebilirsiniz. Sayfada yer alan yazılar, resimler gibi tüm renkli içerikler gr tonlarına çevrilecektir.