CSS Filtre Efektleri ile Neler Yapılır?

CSS Filtre Efektleri ile Neler Yapılır?


CSS filtreleri bir süredir etrafta. Vektörlere farklı görüntü efektleri uygulamak için Ölçeklendirilebilir Vektör Grafikleri sayesinde ortaya çıkmışlardır . Günümüzde, CSS filtreleri SVG'lerle sınırlı değildir; resimler, metinler ve bir web sayfasında bulabileceğiniz diğer her şey için kullanılabilir.Bu gönderideki örnekler mevcut olan yalnızca CSS filtreleri değildir, ancak bunları kullanarak neleri başarabileceğinize hoş bir giriş niteliğindedir.

 

 

Filtreler Nasıl Çalışır?
 
 
Filtreler anlaşılması zor değildir. Bir web sayfası ile başlayalım. Yüklemeye başladığında, içerik oluşturuyor ve stil uygulanmaktadır. Filtreler, her şeyden sonra, ancak sayfa tam olarak yüklenmeden önce uygulanır. Filtreler gerçekte içeriğin bir anlık görüntüsünü alırlar, böylece görevlerini yerine getirebilirler ve değiştirilen içeriği orijinalin üzerine yeniden görüntüleyebilirler. Kamera filtreleri ile aynı şekilde çalışır.  Ancak bir resmi yakalayabilmeniz için, yakaladığınız görüntünün değiştirilmiş bir sürümünü yapan filtreler eklersiniz.
 
 
Bu Yükleme Süresini Etkiliyor mu?
 
Evet, CSS filtreleri yükleme sürelerini etkileyebilir ancak ne kadar filtre uyguladığına bağlı değildir. Logonuzda olduğu gibi küçük bir filtre eklerseniz, büyük olasılıkla bir etki görmezsiniz. Ancak, tüm web sayfasını değiştiren bir filtre eklerseniz ya da bir sayfada bir grup filtre varsa, web siteniz yavaşlar. Kaç tane filtrenin gerektiğini görmek ve yükleme sürelerini nasıl etkileyeceğini görmek size kalmıştır.
 
 
CSS Filtrelerini Kullanma
 
Filtrelerin sözdizimi basittir. CSS'de filtre özelliğini bir değerle ekleyin (örneğin, gri tonlama). Filtre değerleri ile ilgili en fazla filtrenin ne kadarının uygulanacağını belirlemek için bir parametre almasıdır. Bu, bazı kodlarla daha anlamlı olacaktır:
 
Kodlar:
 
 
 
 
 
 
Yukarıdaki filtre özelliği, gri tonlama değerine sahiptir. Yüzdeyi “görüntünün ne kadar gri olmasını istediğiniz” olarak düşünün. Resmi tamamen siyah ve beyaz olarak değiştirmek isterseniz, parametrenin yüzde 100 olması gerekir. Efektin sadece yarısı kadar güçlü olmasını istiyorsanız, yüzde 50 kullanın.
 
 
Merrier
 
 
Aynı anda birden çok filtre uygulayabilirsiniz. Basamaklı olarak uygulanacaklar. Aşağıdaki örnekte, önce görüntü yüzde 100 siyah beyaz olacak ve opaklık yüzde 50'ye dönüşecektir. Sipariş, doygunluk veya ton döndürme gibi daha karmaşık filtreler kullanıyorsanız ve aynı anda ikiden fazla ekliyorsanız daha önemlidir. Dikkat, virgüllere ihtiyaç yoktur.
 
Kodlar:

 

Gri tonlama
 
 
Resmiyet için, nasıl göründüğüne bakalım. CSS filtrelerinden önce çok sayıda başka hack mevcuttu, ancak bir görüntüyü dönüştürmenin ne kadar kolay olduğunu görün.
 
Kodlar:
 
 
 
 
 
Sepya
 
 
Bu eski moda fotoğraf efekti tarayıcınızda yapmak kolaydır. Gri tonlamada olduğu gibi, yüzde 0 ile yüzde 100 arasında, uygulanmak istenen efektin ne kadarını belirtmeniz gerekir.
 
Kodlar:

 

Doyma
 
Uygulandığında doygunluk renkleri daha canlı hale getirir. Doygun filtreye ilişkin harika şey, yüzde 100 oranında durmamasıdır, oldukça ilginç görsel efektler için renkleri gerçekten abartmak için yüzde 1.000 gibi bir değer belirtebilirsiniz.
 
Kodlar:
 
 
 
 
Bulanıklık
 
Bulanık filtreyi, Adobe Photoshop'taçalışma şeklini düşünün ve bir öğeyi ne kadar bulanıklaştırmak istediğinizi tanımlamak için bir piksel değeri belirlersiniz. Piksel değeri ne kadar yüksekse, bulanıklık o kadar yoğun olur.
 
Kodlar:
 
 
 
Ton döndür
 
 
Bu filtre, öncekilerden biraz farklı olduğu için bir elementin renklerini dönüştürmek için derece kullanır. Tüm daireler gibi bir renk tekerleği 0'dan başlar ve 360 ​​dereceye kadar gider. Ton döndürme filtresiyle, istediğiniz dönüşü belirlemek için renk tekerleğinde bir nokta seçmeniz yeterlidir.
 
 
Kodlar:
 
 
 
 
 
 
evirmek
 
 
Tersine çevirmek ilginç bir filtredir, ilk başta biraz garip olabilir ama herkes bir noktada onunla oynar. Temel olarak, elementinizin renklerini tersine çevirir, böylece siyah beyaz olur, kırmızı yeşil olur ve böyle devam eder. Ton-döndürme filtresiyle biraz ilgilidir, ancak aslında farklıdırlar. Sıfırın değişmediği ve yüzde 100'ün tamamen ters çevrildiği yüzdeye dayalıdır.
 
Kodlar:
 
 
 
 
 
 
Kontrast
 
 
Bir görüntüde kontrast yoksa, görüntü tek renktir (genellikle koyu gri). Kontrast filtresi yüzde 100 oranında değişmez, bu yüzden öğenizin varsayılan durumu budur. Kontrast yoksa, filtreyi yüzde 0 olarak ayarlayın. Çok fazla karşıtlık arıyorsanız ya da her şeyin çok açık bir şekilde siyah ve beyaz olmasını istiyorsanız, bu yarışmayı yüzde 2,500 gibi bir oranla ayarlayabilirsiniz. Tabii ki, büyük yüzde tamamen her şeyi abartıyor.
 
Kodlar:
 
 
 
 
 
Parlaklık
 
 
Bu filtre de, adın yaptığı gibi bir görüntünün ne kadar parlak olacağını belirlediği gibi açıktır. Buradaki fark, elemanın kontrast filtresi gibi yüzde 100 oranında değişmeyeceğidir. Yüzdeyi azaltarak öğeyi karartabilir veya yüzdeyi artırarak aydınlatabilirsiniz.
 
Kodlar:
 
 
 
 
 
Düşen gölge
 
 
Filtre, görüntüyü alarak, bir kopyasını çıkararak, tamamen yeniden renklendirerek ve renginin ne olacağına bağlı olarak onu ofset ederek çalışır. Aşağıdaki kod parçasında görebileceğiniz gibi, virgüllere gerek yoktur. İlk değer x mesafesi, ikinci değer y mesafesi, üçüncü değer bulanıklık miktarı ve son değer renktir.
 
Kodlar:
 
 
 
 

 YUKARI