Neredeyse bilgisayarların tümüne tamamen IE10 yerleşmek üzereyken bu yazıyı yayınlamakta oldukça geciktiğimi düşünüyorum. Hatta bazıları bu yazıyı okurken kardeş sen hangi teknolojiden bahsediyorsun da diyebilir ilerleyen zamanlarda. Çok eski zamanlarda her şey saman içinde iken değişiklik olsun, site görüntüsü bambaşka olsun diye bazı tasarımcılar sitesindeki resimleri hem renkli hem de siyah beyaz olarak hazırlayıp mouse siyah beyaz olan resmin üzerine geldiğinde ise renkli olan resmin görünmesini sağlamışlardı. Böylelikle farklı bir resim efekti ortaya çıkacaktı.
Günümüzde bile web sitelerindeki resimlerde en çok kullanılan efektlerden bir tanesidir. Siyah, beyaz ve gri tonlarının birbirleri ile olan uyumu ve kolay hazırlanması şüphesiz tartışılmaz bir durum. Ne şekilde hazırlarsanız hazırlayın mutlaka bu renkler son derece mükemmel görünecektir. Web tasarımcıların işini kolaylaştırmak için geliştirilmiş olan jQuery eklentileri bile var. Böylelikle bir resmi hem siyah-beyaz hemde renkli biçimde kaydetmenize gerek kalmıyordu.
Css3 çıkması ile beraber Webkit destekli olan tarayıcılara buna benzer değişik filtreler de eklenmiştir ayrıca. Gözünü sevdiğimin Chrome yine bütün Webkit filtrelerini sorunsuz bir şekilde çalıştırabiliyorken diğer tarayıcılar üzerinden bu filtreleri kullanabilmek için svg kullanma gibi farklı yollar izlememiz gerekiyor. Daha öncesinden IE için hazırlanmış olan filtreler de var tabi ama nedense tarayıcı geliştiren kişiler birbirleri arasında anlaşma yapmak yerine adeta birbirlerini yok etmek için çalışırcasına farklı tarzda kullanımlar sunmuşlardır web tasarımcılara. Sonuç mu ? Şuan için hiç biri bir diğerini tamamen yok edememiştir ve hala kendileri arasında bu savaş sürüyor.
Belki bir savaş değildir, belki kendilerince en iyiyi sunmaya çalışıyorlardır (IE filtrelerini ve Webkit filtrelerini karşılaştırınca bu anlaşılıyor) ama bu çabaları bizlerin işiniz zorlaştırmaktan başka bir işe yaramamıştır. IE8 sürümü yayınlandığında bile Microsoft Webkit’e olan inadını sürdürmüştü ve sonrasında IE9, IE10’da çıktıktan sonra yavaş yavaş Css3 özelliklerini kabul etmeye başlamıştı. Bu iyi haberdi bütün tasarımcılar için. Bu tarz basit bir konuyu yazarken bile tek tek tarayıcıların sayfasından greyscale efektinin kullanımını araştırmak için 10 tane sekme açmak zorunda kalıyorum. Siz bir de bu efekti hazırlayan kişilere bakın. Bir tasarım hazırlayıp teker teker bütün tarayıcılar üzerinde denemek.
Webkit destekli tarayıcılar üzerinde resimlere siyah beyaz efekti uygulamanız için yapmanız gereken oluşturduğunuz Css sınıfına aşağıdaki kodu eklemek. Chrome 19+, Safari 6+, Safari 6+ iOS üzerinde -webkit-filter: grayscale(1); sorunsuz çalışmaktadır. Parantez içine eklenmiş olan 1 rakamı en üst seviyedir. Bunu yüzdelik olarak ta ayarlamanız mümkün. Parantez içine sıfır “0” şeklinde girdiğiniz zaman resim orjinal renkte görünür.
IE6’dan IE9’a kadar olan tarayıcılar için de kullanım basittir. Bu tarayıcılar üzerinde fotoğraflara siyah beyaz efekti vermek içinde filter:gray; kodunu Css sınıfına eklememiz yeterlidir.
Bu güne kadar hep IE’den şikayet ederdik ancak bu filtrelerde Firefox’tan şikayetler başlayacak gibi görünüyor. Mozilla Firefox için resimlere siyah beyaz efekti vermek için svg adında hala tam olarak ne olduğunu anlayamadığım W3.org sitesinden Css içine çekilen bir ayar kullanılıyor. Şu kodu ben aklımda tutarım, ezbere yazarım diyebilen kaç tane babayiğit çıkar ?
filter: url("data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
Evet bu kodu Css sınıfına eklediğimiz zaman resimlerimiz siyah-beyaz bir görünüme kavuşuyor. Bilgisayarımda Mozilla Firefox kurulu olmadığından ve ilerleyen zamanlarda da kurmayacağımdan dolayı sonucu göremedim. Firefox +10 üzeri tarayıcı kullanarak bu yazıyı okuyanlar sonucu yorum yazarak bildirirlerse sevinirim.
Sıra geldi web sitesindeki renkli fotoğraflara siyah-beyaz efekti vermek için geliştirilmiş olan BlackAndWhite adlı jQuery eklentisine. Gianluca Guarini tarafından geliştirilmiş olan jQuery BlackAndWhite eklentisi eski tarayıcılar üzerinde Html5 Canvas ile resimlere siyah beyaz efekti veren bir uygulamadır. Kullanımı oldukça basittir. Yapmanız gereken jQuery ve jQuery.BlackAndWhite.js kütüphanelerini head etiketleri arasına ekledikten sonra Javascript kodlarda siyah-beyaz efekti vermek istediğiniz fotoğrafların sınıfını belirlemek. Bu arada eski tarayıcılardan kastı sanırım IE7 ve üstü olan tarayıcılar için geçerliymiş. Bunuda kaynak kodları incelerken fark ettim.
Js dosya adresleri :
<script src="src/jquery.min.js"></script> <script src="src/jquery.BlackAndWhite.js"></script>
Css :
.resmiGriYap li a {
opacity:0;
filter:alpha(opacity=0);
}
JavaScript :
$(window).load(function(){
$('.resmiGriYap').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
responsive:true,
// to invert the hover effect
invertHoverEffect: false,
// this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
intensity:1,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
},
onImageReady:function(img) {
// this callback gets executed anytime an image is converted
}
});
});
Html resim kodu :
<li>
<a href="https://www.mintik.com/?p=19031" class="resmiGriYap">
<img src="https://lorempixel.com/400/200/nature/1/" width="100%" />
</a>
</li>