wmaraci reklam

Görselin Rengini CSS İle Nasıl Değiştirebilirim?

6 Mesajlar 1.012 Okunma
pst.net
wmaraci reklam

MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)
Aradım aradım bulamadım, color ve background'ın haricinde görsel filtre eklemek için de CSS kodu var ancak benim istediğim olarak eklenmiş PNG görsele #FFFFFF şeklinde renk vermek. Bunu nasıl yapabilirim?
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻
wmaraci
reklam

onur0061 onur0061 WM Aracı Kullanıcı
  • Üyelik 31.10.2017
  • Yaş/Cinsiyet 23 / E
  • Meslek Yazılımcı
  • Konum Trabzon
  • Ad Soyad O** I**
  • Mesajlar 347
  • Beğeniler 86 / 77
  • Ticaret 8, (%100)
Görselin üzerine görsel boyutunda bir div ekleyip ardından div'e renk verip opacity değeri vererek yapabilirsiniz.
 

 

onurturali onurturali www.onurturali.com Kullanıcı
  • Üyelik 07.11.2013
  • Yaş/Cinsiyet 27 / E
  • Meslek İçerik editörlüğü
  • Konum Antalya
  • Ad Soyad O** T**
  • Mesajlar 63
  • Beğeniler 1 / 9
  • Ticaret 3, (%100)
filter özelliğini kullanabilirsin. Burada güzel bir örnek var.
Belki w3schools filter için sana yardımcı olabilir.
Yusuf18

kişi bu mesajı beğendi.

MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

onur0061 adlı üyeden alıntı

Görselin üzerine görsel boyutunda bir div ekleyip ardından div'e renk verip opacity değeri vererek yapabilirsiniz.


Arkası Şeffaf bir png logo için bu ne yazık ki mümkün değil.

onurturali adlı üyeden alıntı

filter özelliğini kullanabilirsin. Burada güzel bir örnek var.
Belki w3schools filter için sana yardımcı olabilir.


Bu filtreleri bende gördüm ancak işime yaramıyorlar yada ben mantıklı yaklaşamadım.
Yapmaya çalıştığım şey şu: https://codepen.io/muratdinc/pen/YBrZjv Burada yazıya uyguladığım değişken color değerini üstündeki logoya uygulamak.
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻
wmaraci
Mersin evden eve nakliyat

onurturali onurturali www.onurturali.com Kullanıcı
  • Üyelik 07.11.2013
  • Yaş/Cinsiyet 27 / E
  • Meslek İçerik editörlüğü
  • Konum Antalya
  • Ad Soyad O** T**
  • Mesajlar 63
  • Beğeniler 1 / 9
  • Ticaret 3, (%100)
O zaman şöyle bir çözüm üretilebilir:

logo mesela 3 farklı renkte hazırlanır,
css kullanarak position ile hepsi aynı pozisyona sabitlenir (yani üst üste gelirler)
jquery ile örnekteki gibi değişmesi için
logo1 için opacity 1 saniye içinde 100'den 0'a inerken
logo2 için opacity zaten 0 iken 1 saniye içinde 100'e çıkar
sonra logo 3 için aynı işlem uygulanır
 

 

TEHET TEHET Kullanıcı
  • Üyelik 04.10.2014
  • Yaş/Cinsiyet 31 / E
  • Meslek Tasarımcı
  • Konum Ankara
  • Ad Soyad M** A**
  • Mesajlar 791
  • Beğeniler 96 / 374
  • Ticaret 1, (%100)
https://jsfiddle.net/tehet/kh4pmyqt/7/

Tabi tarayıcı desteğine önemli bir detay.
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al