CSS filtresi ve karışım modları, karmaşık kodlara ihtiyaç duymadan web sayfanıza kolayca çarpıcı görsel efektler uygulamak için güçlü araçlardır.

CSS filtresi ve harmanlama modları, web sayfanıza kolayca görsel efektler uygulamanıza olanak tanır. Filtreler, görüntülerin veya diğer HTML öğelerinin oluşturulmasını ayarlamak için kullanılan bir dizi önceden tanımlanmış CSS işlevidir. Karışım modları, bir öğenin arka planıyla veya komşu öğelerle nasıl karışacağını belirler.

CSS Filtrelerini Kullanma

Şunu kullanarak CSS filtreleri uygularsınız: filtre özellik ve uygulanan efekt türünü belirten bir özellik. Her filtre özelliği bir CSS işlevidir; CSS değişkenine benzer şekilde çalışır işlev. Filtrenin stil verilen öğeyi ne kadar etkilemesi gerektiğini belirtmek için bir parametre kabul eder.

HTML öğenizin stilini belirlemek için kullanabileceğiniz 10 CSS filtre işlevi vardır:

  • bulanıklık()
  • parlaklık()
  • zıtlık()
  • Düşen gölge()
  • gri tonlamalı()
  • ton döndürme()
  • ters ()
  • opaklık()
  • doymuş()
  • sepya()

Benzersiz stiller oluşturmak ve HTML öğelerinizin görünümünü iyileştirmek için bu filtreleri tek tek veya birlikte kullanabilirsiniz.

instagram viewer

Bu filtrelerden bazıları, doğru şekilde kullanıldığında diğerleriyle çok daha iyi çalışır.

Burada, bir görüntü öğesi üzerinde farklı görsel efektler elde etmek için CSS filtrelerini birleştirme örnekleri verilmiştir.

1. Gri Tonlama ve Sepya

bu gri tonlamalı() filtre, bir görüntü veya metin öğesinden tüm renk bilgilerini kaldırır. Filtre, 0 ile 1 arasında bir değer alır; 0, orijinal rengi ve 1, tam gri tonlama efektini ifade eder.

bu sepya() filtre, bir görüntüye veya metin öğesine sepya tonu efekti uygular. Filtre ayrıca 0 ile 1 arasında bir değer alır.

Örneğin:

img {
filtre: gri tonlama(14%) sepya(30%);
}

birleştirme gri tonlamalı() %14 ve sepya() %30'da görüntünüzde vintage veya retro bir etki yaratabilir.

2. Ters Çevir ve Doygunlaştır

bu doymuş() filtre, bir görüntünün veya metin öğesinin doygunluğunu artırır veya azaltır. Filtre 0 ile sonsuz arasında bir değer alır, 1 orijinal renktir ve daha yüksek değerler doygunluğu artırır.

bu ters () filtre, renk tekerleğinde mevcut her rengin tonunu 180 derece çevirerek bir görüntünün veya metin öğesinin renklerini tersine çevirir. Bu, filtrenin tonu korurken öğenin parlaklık ve doygunluk düzeylerini değiştirdiği anlamına gelir.

Örneğin:

img {
filtre: tersine çevirmek(30%) doymuş(75%);
}

Bu kod görüntünün renklerini tersine çevirir ve doygunluğu %75 artırır.

3. Ton-Döndürme ve Kontrast

bu ton döndürme() filtre, bir görüntünün veya metin öğesinin tonlarını döndürür; bu, parlaklık ve doygunluk düzeylerini korurken öğenin genel rengini değiştirdiği anlamına gelir. Döndürme miktarı derece olarak belirtilebilir; 0 orijinal rengi temsil eder ve 360 ​​orijinal renge tam dönüşü temsil eder.

birleştiren ton döndürme() Ve zıtlık() filtreler, resimlerinizde canlı ve renkli bir etki yaratabilir.

Örneğin:

img {
filtre: ton döndürme(10derece) zıtlık(150%);
}

Ton döndürme, şu değeri kabul edebilir: derece, mezun, rad, veya dönüş. Yukarıdaki kod görüntünün tonunu 10 derece döndürür ve kontrastı yükseltir.

4. Parlaklık ve Bulanıklık

Parlaklık ve bulanıklık filtreleri oldukça açıklayıcıdır. İlki görüntünüzün parlaklığını ayarlıyor ve ikincisi uygulanan bulanıklık seviyesini kontrol ediyor.

birleştiren parlaklık() Ve bulanıklık() filtreler, resimlerinizde rüya gibi ve yumuşak bir etki yaratabilir.

Örneğin:

img {
filtre: parlaklık(0.8) bulanıklık(5piksel);
}

Yukarıdaki kod parlaklığı şu kadar azaltır: 0.8 (80%) ve uygular 5 piksel görüntüye bulanıklık efekti.

5. Alt Gölge ve Opaklık

Alt gölge efekti, bir öğenin arkasındaki yüzeye gölge düşürerek derinlik ve boyutluluk yanılsaması verdiği görsel bir efekttir. Alt gölgeler, öğe ile arka plan arasında bir ayrım hissi yaratmak için genellikle metne veya resimlere uygulanır.

Bu arada, opaklık filtresi bir öğenin saydamlığını kontrol eder.

birleştiren Düşen gölge() Ve opaklık() filtreler, metin öğeleriniz üzerinde ince bir etki yaratabilir.

Örneğin:

.metin efekti {
dönüştürmek: Çevirmek(-50%, -50%);
renk: siyah;
Düşen gölge: 10piksel 9piksel 9pikselbej;
opaklık: 70%;
}

Bu örnekte, alt gölge 10 piksel sağda ve 9 piksel altta, 9 piksel bulanıklık yarıçapı ile konumlandırılmıştır. Gölge rengi bej olarak belirtilmiştir. %70'lik bir opaklık da belirtilir.

CSS Karışım Modlarını Kullanma

CSS karışım modları, bir öğenin içeriğinin arka planla veya diğer öğelerle nasıl karışacağını kontrol ederek yaratıcı kompozisyon efektlerine izin verir.

CSS karışım modları için en popüler kullanım örneklerinden bazıları şunlardır:

  • degradeler oluşturma: Karışım modları oluşturmak için kullanılabilir birkaç CSS arka plan gradyanı Renkler arasındaki bu geçiş, tasarımlarınıza derinlik ve boyut katmanın kolay ve verimli bir yolunu sunar.
  • doku ekleme: Bir sayfadaki arka planlara, resimlere ve diğer öğelere doku eklemek için karışım modlarını da kullanabilirsiniz. Bu, benzersiz bir görünüm yaratmanın ve normalde sade olan öğelere görsel ilgi katmanın harika bir yolu olabilir.
  • renkleri ayarlama: Karışım modlarıyla, bir sayfadaki öğelerin renklerini ayarlayabilirsiniz. arka plan renklerini ayarlama. Bu, renk kaplamaları veya renkli görüntüler gibi efektleri kolayca oluşturmanıza olanak tanır.

En yaygın iki karıştırma modu arka plan karışım modu Ve mix-blend-modu. Her iki özellik de aynı 15 değeri paylaşır: normal, çarpma, ekran, kaplama, koyulaştırma, açıklaştırma, renk soldurma, doygunluk, renk yakma, parlaklık, fark, sert ışık, yumuşak ışık, dışlama ve ton.

Kullanmalısın arka plan karışım modu bir öğedeki arka plan resimleri gibi birden fazla arka plan düzeniniz olduğunda ve hepsinin birbiriyle karışmasını istediğinizde.

Şunu da kullanabilirsiniz: mix-blend-modu belirli bir öğenin içeriğini doğrudan ebeveyninin içeriğiyle karıştırmak için. bu mix-blend-modu genellikle metin, şekiller veya resimler gibi ön plan içeriğini karıştırmak için kullanılır.

İşte kullanımına bir örnek mix-blend-modu metin ve görüntüyü karıştırmak için.

HTML:

<divsınıf="konteyner">
<img
 kaynak=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="arka plan resmi"
 />
<divsınıf="içerik">
<h1>Hoş geldinh1>
<P>Merhaba Kullanıcı!P>
div>
div>

CSS:

.konteyner {
konum: mutlak;
Genişlik: 100%;
yükseklik: 100%;
}
.arka plan görüntüsü {
Genişlik: 100%;
yükseklik: 100%;
nesneye uygun: kapak;
}


.içerik {
konum: mutlak;
tepe: 50%;
sol: 50%;
dönüştürmek: Çevirmek(-50%, -50%);
Metin hizalama: merkez;
mix-blend-modu: fark;
}


h1 {
yazı Boyutu: 60piksel;
renk: beyaz;
}
P {
yazı Boyutu: 40piksel;
renk: beyaz;
}

bu fark karışım modu, metnin renk değerleri ile alttaki koyu görüntü arasındaki mutlak farkı hesaplar.

Bu senaryoda, metin rengi koyu arka planla etkileşerek yüksek kontrast etkisine neden olur.

Filtreleri ve Karışım Modlarını Birleştirme

Görsel olarak daha da ilginç efektler oluşturmak için filtreleri ve karışım modlarını birleştirebilirsiniz. Her iki özelliği birlikte kullanarak, diğer CSS özellikleriyle kopyalanması zor olan benzersiz ve yaratıcı sonuçlar elde edebilirsiniz.

Daha karmaşık bir efekt oluşturmak için filtre ve karışım modunu birleştiren bir örneği burada bulabilirsiniz:

.benim elementim {
filtre: parlaklık(150%) ton döndürme(180derece) Düşen gölge(0piksel 0piksel 10pikselrgba(0, 0, 0, 0.5));
mix-blend-modu: ekran;
}

Bu kod, filtreleri birleştirir; parlaklık, ton döndürme, Düşen gölgeve bir mix-blend-modu değerli ekran görüntüye Parlaklığı %150 artırırken hue-döndür görüntünün renklerini 180 derece tersine çevirir.

Ardından ayrıca bir alt gölge uygulanır. Son olarak, ekran karışım modu değeri, görüntünün renklerini alttaki arka planla birleştirir, daha açık renklerin yoğunlaştığı ve daha koyu renklerin renkle harmanlandığı bir etki elde edilir. arka plan.

Filtrelerde ve Karışım Modlarında Uzmanlaşma

Farklı tipte CSS filtrelerini ve bunları HTML öğelerinize nasıl uygulayabileceğinizi öğrendiniz. Bulanıklaştırma, kontrast ve ton döndürme gibi çeşitli filtre işlevlerini kullanarak görüntülerinizin görünümünü değiştirebilirsiniz. Ayrıca karışım modlarının örneklerini ve bunların benzersiz tasarımlar oluşturmak için nasıl kullanılabileceğini gördünüz.

Bu tekniklerle daha fazla deney yaparsanız, tasarımlarınıza ekstra bir görsel ilgi düzeyi ekleyebilirsiniz.