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

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.