CSS Resimleri Siyah-Beyaz Yapmak

0
48
CSS
CSS

asdaWeb sitenizde resimleri siyah-beyaz yapmak ister misiniz? Ve resimleri siyah-beyaz yaparken herhangi bir grafik programı vs kullanmak istemiyorsanız sitenizde siyah-beyaz göstermek istiyorsanız css ile bunu kolayca yapabilirsiniz.

İsterseniz bazı resimleri önce siyah-beyaz yapıp üstüne gelince tekrar renklendirebilirsiniz. Bunun için resmi önce css ile siyah-beyaz yapıp ardından hover ile verdiğimiz değeri iptal etmeliyiz.

Önce bir tane sınıfı siyahbeyaz olan bir resim ekleyelim.

<img src=”https://bilgi-sayar.net/Logo.png” class=”siyahbeyaz” />

Siyahbeyaz sınıfına css ile siyah-beyaz özelliği atayalım.

.siyahbeyaz{
Filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://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”);
filter: gray;
-webkit-filter: grayscale(100%);
}

Fare üstüne geldiğinde tekrar renkli olmasını istiyorsanız CSS kodlarına ekleyin:

.siyahbeyaz:hover{
-webkit-filter: grayscale(0);
filter:none;
}

CEVAP VER

Lütfen yorumunuzu yazın
Lütfen adınızı ve soyadınızı yazın.