CSS3 -webkit-filter Kullanımı

Siyah-Beyaz // grayscale

Resime siyah-beyaz tonlarında efekt vermek istediğimiz zaman CSS’de [kod]grayscale[/kod] kodunu kullanıyoruz.

img {<br />   -webkit-filter: grayscale(100%);<br />}<br />

css3 ile resmi siyah beyaz yapma
Örnek üzerinde anlatacak olursak sitemizdeki tüm resimler veya belli bir class’ın atandığı resimler siyah-beyaz olsun, bunların üstüne imleç ile gelindiğinde resim orjinal renklerinde görüntülensin.

<br />img {<br />    -webkit-filter: grayscale(100%);<br />  -webkit-transition: -webkit-filter 1s;<br />}<br />img:hover {<br />    -webkit-filter: grayscale(0%);<br />}<br />
Ön İzleme

Sevgiler.
Bir önceki yazımız olan WordPress için Youtube Tarzı Yükleniyor Çubuğu başlıklı makalemizi de okumanızı öneririz.

Merhaba! Ben Burak. 2016 yılında Karadeniz Teknik Üniversitesi Harita Mühendisliği Bölümü’nden mezun oldum. Lise yıllarında HTML & CSS‘e, Üniversite yıllarında WordPress ve Matlab‘e adım attım. Lisans tezimi Matlab üzerinden program yazarak teslim ettim. Çeşitli projeler için WordPress tabanlı yazılımlar geliştirdim.

1 Yorum

  • Sistem Gereksinimleri

    19 Kasım 2013 at 13:14

    Özellikle siyah beyaz ve sepyayı çok beğendim, kendim çektiğim fotoğraflarım için sitemde kullanabilirim.

    Cevapla

Bir cevap yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.