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;
}
