GreyScale

0
40
views

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 ?

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 : 

 Css : 

 JavaScript : 

 Html resim kodu : 

 

Aranan kelimeler:

  • fotoşopda greysikil resmi siyah beyaz
  • JS RESMİ SİYAH BEYAZ YAPMA
  • kod yazarak yıldızlı kumsati yapma
  • siyah beyaz retkit resimleri
  • tarayıcı siyah beyaz yapma
1 oy (7 votes, average: 4,71 out of 5)
Loading...
Önceki İçerikscrollUP
Sonraki İçerik:hover, :focus ve :active kardeşler
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here