CSS3 -webkit-filter Kullanımı

Renk Döndürme // hue-rotate

img { -webkit-filter: hue-rotate(50deg); }

Derece burada kafa karıştırıyor gibi görünüyor fakat değil, sadece bir renk tekerleği düşünün. Yani [kod]0 deg[/kod] yazdığında hiçbirşey yapmayacak, [kod]50 deg[/kod] yazdığında da 50 derece çevirmeli dönecek.

Bu durumda, Seçtiğimiz fotoğraf bir blu-ish renk alacaktır.

css3 ile renk döndürme

Veya, sürekli renklerini değiştirmek istiyorum diyelim. Bu olası bir gerçek dünya projesinde, renk geçişleri çok daha ince olacak.

<br />img {<br />   -webkit-animation: adjustHue 1s alternate infinite;<br />}<br /><br />@-webkit-keyframes adjustHue {<br />   0% { -webkit-filter: hue-rotate(30deg); }<br />   50% { -webkit-filter: hue-rotate(60deg); }<br />   100% { -webkit-filter: hue-rotate(90deg); }<br />}<br />
Ön İzleme

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

Bir cevap yazın

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