CSS filter Özelliği
Doğuhan ELMA tarafından Effects yayınlanma tarihi
23 görünüm
CSS filter özelliği, HTML elemanlarına görsel efektler uygulamak için kullanılır. Bu özellik, görüntü düzenleme yazılımlarında bulunan bazı temel efektleri doğrudan CSS ile uygulamanıza olanak tanır. filter özelliği, resimler, arka planlar ve hatta metin gibi her türlü HTML elemanı üzerinde kullanılabilir.
CSS Filter Fonksiyonları
CSS filter özelliği bir dizi fonksiyon içerir:
TailwindCSS:
|
Class
|
Properties
|
|---|---|
| filter | filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); |
| filter-none | filter: none; |
blur(px): Belirtilen piksel değeri kadar bulanıklık efekti uygular.
|
Class
|
Properties
|
|---|---|
| blur-none | --tw-blur: blur(0); |
| blur-sm | --tw-blur: blur(4px); |
| blur | --tw-blur: blur(8px); |
| blur-md | --tw-blur: blur(12px); |
| blur-lg | --tw-blur: blur(16px); |
| blur-xl | --tw-blur: blur(24px); |
| blur-2xl | --tw-blur: blur(40px); |
| blur-3xl | --tw-blur: blur(64px); |
brightness(%): Elemanın parlaklığını ayarlar. Yüzde değeri 100%’den büyükse daha parlak, daha düşükse daha karanlık yapar.
|
Class
|
Properties
|
|---|---|
| brightness-0 | --tw-brightness: brightness(0); |
| brightness-50 | --tw-brightness: brightness(.5); |
| brightness-75 | --tw-brightness: brightness(.75); |
| brightness-90 | --tw-brightness: brightness(.9); |
| brightness-95 | --tw-brightness: brightness(.95); |
| brightness-100 | --tw-brightness: brightness(1); |
| brightness-105 | --tw-brightness: brightness(1.05); |
| brightness-110 | --tw-brightness: brightness(1.1); |
| brightness-125 | --tw-brightness: brightness(1.25); |
| brightness-150 | --tw-brightness: brightness(1.5); |
| brightness-200 | --tw-brightness: brightness(2); |
contrast(%): Elemanın kontrastını ayarlar. Yüzde 100, orijinal kontrastı temsil eder.
|
Class
|
Properties
|
|---|---|
| contrast-0 | --tw-contrast: contrast(0); |
| contrast-50 | --tw-contrast: contrast(.5); |
| contrast-75 | --tw-contrast: contrast(.75); |
| contrast-100 | --tw-contrast: contrast(1); |
| contrast-125 | --tw-contrast: contrast(1.25); |
| contrast-150 | --tw-contrast: contrast(1.5); |
| contrast-200 | --tw-contrast: contrast(2); |
drop-shadow(h-shadow v-shadow blur spread color): Belirtilen değerlere göre gölge efekti ekler. Bu, box-shadow'a benzer, ancak filter ile uygulanan gölgeler elemanın rengi ve görüntüler üzerine de uygulanabilir.
|
Class
|
Properties
|
|---|---|
| drop-shadow-sm | --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); |
| drop-shadow | --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); |
| drop-shadow-md | --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); |
| drop-shadow-lg | --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); |
| drop-shadow-xl | --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)); |
| drop-shadow-2xl | --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); |
| drop-shadow-none | --tw-drop-shadow: drop-shadow(0 0 #0000); |
grayscale(%): Elemanı belirtilen oranda gri tonlarına çevirir.
|
Class
|
Properties
|
|---|---|
| grayscale-0 | --tw-grayscale: grayscale(0); |
| grayscale | --tw-grayscale: grayscale(1); |
hue-rotate(deg): Renk tonunu belirtilen derece kadar döndürür.
|
Class
|
Properties
|
|---|---|
| -hue-rotate-180 | --tw-hue-rotate: hue-rotate(-180deg); |
| -hue-rotate-90 | --tw-hue-rotate: hue-rotate(-90deg); |
| -hue-rotate-60 | --tw-hue-rotate: hue-rotate(-60deg); |
| -hue-rotate-30 | --tw-hue-rotate: hue-rotate(-30deg); |
| -hue-rotate-15 | --tw-hue-rotate: hue-rotate(-15deg); |
| hue-rotate-0 | --tw-hue-rotate: hue-rotate(0deg); |
| hue-rotate-15 | --tw-hue-rotate: hue-rotate(15deg); |
| hue-rotate-30 | --tw-hue-rotate: hue-rotate(30deg); |
| hue-rotate-60 | --tw-hue-rotate: hue-rotate(60deg); |
| hue-rotate-90 | --tw-hue-rotate: hue-rotate(90deg); |
| hue-rotate-180 | --tw-hue-rotate: hue-rotate(180deg); |
invert(%): Renkleri belirtilen oranda tersine çevirir.
|
Class
|
Properties
|
|---|---|
| invert-0 | --tw-invert: invert(0); |
| invert | --tw-invert: invert(1); |
opacity(%): Elemanın saydamlığını ayarlar. Bu, opacity CSS özelliğine benzer ancak filter fonksiyonu diğer filtrelerle birlikte zincirlenebilir.
saturate(%): Elemanın renk doygunluğunu ayarlar.
|
Class
|
Properties
|
|---|---|
| saturate-0 | --tw-saturate: saturate(0); |
| saturate-50 | --tw-saturate: saturate(.5); |
| saturate-100 | --tw-saturate: saturate(1); |
| saturate-150 | --tw-saturate: saturate(1.5); |
| saturate-200 | --tw-saturate: saturate(2); |
sepia(%): Elemanı belirtilen oranda sepia tonuna çevirir.
|
Class
|
Properties
|
|---|---|
| sepia-0 | --tw-sepia: sepia(0); |
| sepia | --tw-sepia: sepia(1); |
Örnek Kullanım
Bir görüntüye grayscale ve blur efektleri uygulayarak nasıl kullanılacağını görelim:
img { filter: grayscale(50%) blur(5px); }
Bu kod, seçili img elemanına %50 gri tonu ve 5 piksel bulanıklık efekti uygular.
Neden Kullanılır?
CSS filter özelliği, sayfanızın görsel tasarımını zenginleştirmek için kullanışlıdır. Özellikle, kullanıcı etkileşimleri sırasında dinamik olarak efektler uygulamak için idealdir (örneğin, bir kullanıcı bir görüntü üzerine geldiğinde efektler uygulanabilir). Bu özellik, performansı olumsuz etkilemeden tarayıcı tarafından efektif bir şekilde işlenebilir, böylece daha pürüzsüz bir kullanıcı deneyimi sağlanabilir.
filter özelliği, web tasarımında yaratıcılığı teşvik eder ve geliştiricilere, daha dinamik ve görsel olarak çekici web sayfaları oluşturma konusunda daha fazla esneklik sunar.
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.