CSS ile Kaydırırken Dinamik Olarak Renk Değiştirme

Logolar gibi sabit web sitesi öğeleriyle, sayfayı kaydırırken genellikle bir renk karışımıyla karşılaşırsınız. Bu, statik öğe, web sitesinde öğeyle aynı rengi paylaşan bir bölümün üzerinden geçerse olabilir. Statik öğe, o arka planda dururken görünmez olacaktır.

Bu sorunu çözmek için, aynı renkteki bir öğenin üzerinden geçtiğinde logonun rengini dinamik olarak ters çevirmeniz gerekir. JavaScript gerektirmeden yalnızca CSS kullanarak bu efekti nasıl elde edeceğinizi öğrenin!

Başlangıç ​​Kodunu İndirin

Bu öğreticiyi takip etmek için başlangıç ​​kodunu kendi sitesinden indirin. GitHub deposu yerel makinenize.

Açık index.html burada gösterilen sayfa gibi görünmesi gereken bir tarayıcıda:

HTML sayfası bir logo ve dört bölüm içerir. Her bölümün bir sahte başlığı ve üç paragraflık sahte metni vardır. Logo metni, ikinci ve dördüncü bölümlerin arka planıyla aynı siyah renktedir. Bu etki şunlardan gelir: nth-child (çift) engellemek stiller.css, siyah arka planı çift bölümlere uygular.

Logoyu Yapışkan Yapmak

Bu başlangıç ​​kodu ile logo üste yapışmaz. Bu, sayfayı aşağı kaydırdığınızda logonun kaybolduğu anlamına gelir. uygulayarak logonuzu yapışkan bir başlığa dönüştürebilirsiniz. pozisyon: yapışkan CSS dosyasının içindeki özelliği. CSS'de konumlandırmaya derinlemesine dalmak için şu konudaki yazımızı okuyun: CSS konum özelliği.

Logonun en üste yapıştığından emin olun, ancak bunu yalnızca daha büyük ekranlarda yapın (çünkü daha küçük ekran boyutlarında diğer öğelerin üzerinden geçebilir). Aşağıdaki HTML duyarlı ortam sorgusu bu etkiyi yaratır:

@medya(genişlik > 980 piksel) {
.logo { 
konum: yapışkan; 
tepe: .5rem; 
 }
}

Artık logo her zaman üstte kalacak ve siz kaydırdıkça sizi takip edecek. Ancak koyu arka plan bölümlerine kaydırdığınızda metnin kaybolduğunu da fark edeceksiniz (çünkü logo metni de siyahtır). Şimdi bunu nasıl düzelteceğinize bir göz atın.

Yapışkan Başlığınıza mix-blend-modu ekleme

Siyah logonun siyah arka planda kaybolmamasını sağlamak için rengi dinamik olarak ters çevirmeniz gerekecek. Bunu yapma şekliniz, mix-blend-modu CSS özelliği ve ona bir değer atama fark:

@medya(genişlik > 980 piksel) { 
.logo { 
konum: yapışkan; 
tepe: .5rem; 
mix-blend-modu: fark
 }
}

mix-blend-mode CSS özelliği, bir öğenin içeriğinin, öğenin ebeveyninin ve arka planının içeriğiyle nasıl karışması gerektiğini belirtir. Farklı değer, açık renkleri ters çevirerek her pikselin fark değerini alır. Yani renk değerleri aynı ise siyah olur. Değerlerdeki farklılıklar tersine dönecektir.

Yukarıdaki CSS eklemesi, logonun tamamen kaybolmasını sağlayacaktır. Bunun nedeni, medya sorgusunun dışında logo metninin rengini beyaz olarak ayarlamamış olmanızdır. Bunu aşağıdaki kodla yapın:

.logo { 
renk: beyaz; 
/* Diğer CSS özellikleri */
}

Artık her şeyi başarıyla kurdunuz. Sayfayı aşağı kaydırın ve siyah arka plana gidin. Logonun siyahtan beyaza değiştiğini görürsünüz.

Siyah ve beyaz dışında diğer renklerle de çalışabilirsiniz. Örneğin, logo metninizin rengini turkuaz rengi (#008080) olarak değiştirirseniz, beyaz arka plan üzerinde pembe rengi elde edersiniz. Aşağıdaki resim bunu göstermektedir.

Çoğu durumda, en iyi sonuçları elde etmek için öğenizin beyaz olmasını istersiniz. Ayrıca, en üste kaydırırsanız, logonuzun ikiye bölünmüş olduğunu görebilirsiniz. Bunun nedeni, logonun öğe. Logoyu tam olarak göstermek için logonun arka plan rengini ayarlamanız gerekir. eleman beyaz.

Bir Görüntüyü Metin Yerine Logo Olarak Kullanma

Bu teknik sadece metinle değil, resimlerle de çalışır. Elbette logo olarak beyaz bir resim kullandığınızdan emin olmalısınız. Aşağıdaki örnek, aynı klasörde bulunan beyaz bir lorem ipsum logosunu kullanır. index.html dosya:

<imgkaynak="loremipsum-297.svg"alternatif="Lorem Ipsum Logosu">

Burada kullanılan görüntü, bir tür SVG'dir (Ölçeklenebilir Vektör Grafiği). vektör dosyası.

Şimdi logo resminizin rengi aşağıdaki resimde gösterildiği gibi beyaz zemin üzerine siyah olacaktır.

Ancak siyah bir arka plana kaydırırsanız, logonun rengi otomatik olarak beyaz olacaktır. Bunu aşağıdaki resimde görebilirsiniz.

Değiştirerek logonun boyutunu da artırabilirsiniz. yazı Boyutu ile yükseklik Ve Genişlik logoyu hedefleyen CSS bloğunda. Ne de olsa artık metinden çok bir resimle uğraşıyorsunuz.

.logo {
renk: beyaz;
Genişlik: 10rem;
/* Diğer CSS özellikleri */
}

Ekranı küçültürseniz medya sorgusu artık uygulanmayacaktır. Bu, farklı karışım modlarını kapatarak logonuzun kaybolmasına neden olur. Logoyu sayfaya geri getirmek için, mix-blend-modu propertyon medya sorgusunun dışındaki logoda:

.logo {
renk: beyaz;
Genişlik: 10rem;
mix-blend-modu: fark;
/* Diğer CSS özellikleri */
}

Bu, daha büyük ekranlarda bile logo üzerinde her zaman karışım karıştırmayı etkinleştirir. Ancak küçük ekranlarda logo üstte kalacak ve aşağı kaydırdıkça sizi takip etmeyecek (çünkü pozisyon: yapışkan yalnızca büyük ekranlarda çalışır). Son olarak, sayfadan kaybolmasını önlemek için her zaman beyaz bir logo kullanmayı unutmayın.

Daha Fazla CSS İpuçları ve Püf Noktaları Öğrenin

Mix-blend modunu kullanarak, değişen renklerle büyüleyici düzenler oluşturabilirsiniz. Daha da iyisi, karıştırma-karıştırma-modu rengi dinamik olarak tersine çevireceğinden, herhangi bir rengi sabit kodlamanız veya kesme noktaları belirlemeniz gerekmez. Doğrudan arka planına bağlı olarak bir öğenin içeriğinin bölümleri için güzel karışımlar ve renkler oluşturmanıza olanak tanır.

CSS genellikle öğrenmesi en heyecan verici dillerden biri olarak kabul edilir. Bunun nedeni kısmen, CSS'nin bu makalede az önce öğrendiğiniz gibi ipuçları ve püf noktalarıyla dolu olmasıdır. Diğer bazı kullanışlı CSS ipuçları ve püf noktaları, üzerine gelme efektleri, görüntüleri kaplara sığacak şekilde yeniden boyutlandırma, metni elipslerle kısaltma ve metin dönüştürmeyi kullanmadır.