filter: blur brightness contrast grayscale
CSS filter özelliği işlevlerini kullanarak ögelere fotoğrafik filtre efektleri uygulayın.
filter: blur brightness contrast grayscale, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
CSS filter Özelliği
filter özelliği, gerçek görseli düzenlemeden öğelere Photoshop ayar katmanlarına benzer grafik efektleri uygular.
filter: blur()
Gauss bulanıklığı uygular. Bağımsız değişken, bulanıklık yarıçapıdır.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
Parlaklığı ayarlar. 1 = özgün değer, 0 = siyah, 2 = iki kat daha parlak.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
Karşıtlığı ayarlar. 1 = özgün değer, 0 = düz gri, 1'in üzerindeki değerler karşıtlığı artırır.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
Gri tonlamaya dönüştürür. 0 = tam renk, 1 veya %100 = tamamen gri.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
Renk doygunluğunu ayarlar. 0 = gri, 1 = özgün değer, 1'in üzeri = canlı renkler.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
Renk tonu çemberini verilen açı kadar döndürür; tüm renkleri renk çemberi üzerinde kaydırır.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
Sıcak, nostaljik bir sepya tonu uygular. 0 = özgün değer, 1 = tam sepya.
<div class="vintage"></div>
filter: drop-shadow()
box-shadow'a benzer, ancak saydam alanlar da dâhil olmak üzere öğenin gerçekten oluşturulmuş şeklini izler. Düzensiz PNG görselleri için idealdir.
<div class="icon">★</div>
Birden Fazla Filtreyi Birleştirme
Birden fazla filtre işlevini aralarında boşluk bırakarak zincirleyin. Soldan sağa uygulanırlar:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter Bir Yığınlama Bağlamı Oluşturur
Bir öğeye filter uygulamak yeni bir yığınlama bağlamı oluşturur. Bu durum, alt öğelerin position: fixed değerinin position: absolute gibi davranmasına yol açabilir; bu yaygın bir hatadır.
Kısa Kontrol
Bir öğeye Gauss bulanıklığı uygulayan CSS filtre işlevi hangisidir?
Özet
filter özelliği fotoğrafik ayarlamalar uygular: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() ve drop-shadow(). Birden fazla işlevi boşluklarla zincirleyin. Filter'ın bir yığınlama bağlamı oluşturduğunu ve bunun sabit konumlu alt öğeleri etkileyebileceğini unutmayın.
Sıkça Sorulan Sorular
“filter: blur brightness contrast grayscale” dersi ücretsiz mi?
Evet — “filter: blur brightness contrast grayscale” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“filter: blur brightness contrast grayscale” dersinde ne öğreneceğim?
CSS filter özelliği işlevlerini kullanarak ögelere fotoğrafik filtre efektleri uygulayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“filter: blur brightness contrast grayscale” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- filter: blur brightness contrast grayscale
- Buzlu Cam için backdrop-filter
- Katman Harmanlama için mix-blend-mode
- isolation Özelliği