Prowid loqosu — proqramlaşdırma kursları PROWIDIT Education Academy
CSS Pulsuz, qeydiyyatsız

CSS Filtr Studiyası və generatoru

Şəkilləri Photoshop və ya Figma olmadan birbaşa brauzerdə dəyişin: parlaqlıq, kontrast, doymuşluq, rəng tonu və hazır Instagram üslublu presətləri «Əvvəl / Sonra» interaktiv müqayisəsi ilə tənzimləyin.

Nəticə
Hazır CSS kodu 
.filtered-image {
  filter: contrast(125%) saturate(140%) hue-rotate(15deg) drop-shadow(0 10px 20px rgba(0,0,0,0.3));
  transition: filter 0.3s ease;
}

Necə istifadə etmək olar

  1. Hazır vizual presətlərdən birini seçin (Kiberpank, Retro Noir, Qızıl Saat, İntensiv Kontrast, X-Ray) və ya tənzimləyiciləri fərdiləşdirin.
  2. Şəklin üzərindəki ayırıcı xətti sağa-sola sürüşdürərək orijinal ilə filtr tətbiq olunmuş variantı («Əvvəl / Sonra») müqayisə edin.
  3. Nümunə şəkillər arasından seçim edin (təbiət mənzərəsi, portret və ya gecə şəhəri).
  4. Bir kliklə hazır və optimallaşdırılmış filter: CSS kodunu kopyalayın.

Bu necə işləyir

CSS filter xassəsi necə işləyir?

filter xassəsi element brauzerdə render olunmazdan dərhal əvvəl qrafik effektləri birbaşa GPU (video kart) səviyyəsində tətbiq edir. Bir sətirdə bir neçə funksiyanı birləşdirmək olar: məsələn, filter: contrast(120%) brightness(110%) blur(1px);.

drop-shadow() ilə box-shadow fərqi

Klassik box-shadow düzbucaqlı blokun kənarlarına kölgə salır. filter: drop-shadow() isə PNG və ya SVG elementinin şəffaf daxili konturunu təkrarlayır: ulduzun və ya ikonun məhz öz formasına kölgə verir.

/* PNG və ya SVG ikonun şəffaf formasına uyğun kölgə */
.logo {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
}

Filtrlərin animasiyası və məhsuldarlıq

Bütün CSS filtrləri transition vasitəsilə 60 FPS sürətlə rəvan animasiya oluna bilir (məsələn, :hover zamanı qara-ağ şəkli rəngli etmək). Lakin böyük blur() dəyərlərini böyük sahələrdə tez-tez animasiya etmək mobil cihazlarda GPU yükünü artıra bilər.

Tez-tez verilən suallar

Filtrləri video və ya bütün səhifəyə tətbiq etmək olarmı?

Bəli, filter xassəsi təkcə şəkillərə deyil, <video>, <iframe>, kətan (<canvas>) və hətta bütün <body> elementinə (məsələn, qaranlıq rejim və ya xüsusi əlillik rejimi üçün) tətbiq edilə bilər.

backdrop-filter ilə adi filter fərqi nədir?

filter elementin özünə təsir edir, backdrop-filter isə həmin elementin arxasında qalan fonu (məsələn, şüşə effekti üçün arxadakı mətni və ya şəkli) dumanlayır.

Filtrlər brauzer tərəfindən geniş dəstəklənirmi?

Bəli, CSS filtrləri 2015-ci ildən bəri bütün müasir brauzerlərdə tam dəstəklənir (98%+ qlobal dəstək).

HTML və CSS kursunda bu mövzu

Digər CSS alətləri

CSS gradient generatoru Linear, radial və conic gradient: rəngləri, bucağı və nöqtələri seçin, hazır kodu kopyalayın. Flexbox generatoru və playground Konteyner və elementlərin flex xassələrini sınayın: istiqamət, düzləmə, boşluq və hazır CSS. CSS Grid generatoru Sütun və sətir ölçülərini seçin, boşluğu və düzləməni tənzimləyin, hazır grid kodunu kopyalayın. CSS box-shadow generatoru Kölgənin yerini, bulanıqlığını, rəngini və laylarını seçin, hazır box-shadow kodunu kopyalayın. Cubic-bezier generatoru Easing əyrisinin nöqtələrini sürüşdürün və hazır CSS transition kodunu kopyalayın. SVG animasiya generatoru Forma və effekt seçin — səhifəyə yapışdırmaq üçün hazır SVG və CSS keyframes alın. CSS specificity kalkulyatoru Seçiciləri yazın — (a,b,c) ağırlığını, rəngli təhlilini və hansı qaydanın qalib gəldiyini görün. CSS box model vizualizatoru Content, padding, border və margin-i DevTools tipli sxemdə görün və hazır CSS kodunu alın. CSS transform generatoru Elementi sürüşdürün, fırladın, böyüdün və əyin: ilkin mövqe önizləmədə görünür, kod hazırdır. CSS clamp() kalkulyatoru Min və maks şrift ölçüsünü və ekran enini yazın — axıcı tipoqrafika üçün hazır clamp() alın. Rəng kontrastı yoxlayıcısı (WCAG) Mətn və fon rənginin kontrastını WCAG AA və AAA üzrə yoxlayın, uyğun gəlməyən cütü düzəldin. CSS clip-path generatoru Poliqon, dairə, ellips və kəsilmiş künclər: nöqtələri sürüşdürün və hazır CSS kodunu kopyalayın. CSS Glassmorphism generatoru Mat şüşə effekti: backdrop-filter blur, şəffaflıq, kənar işığı və hazır CSS kodu. CSS border-radius (Blob) generatoru Üzvi formalar və 8 dəyərli border-radius: radiusları sürüşdürün, canlı blob animasiyasını yoxlayın. CSS Stacking Context və z-index vizualizatoru z-index: 9999 niyə işləmir? 3D laylar görünüşü ilə CSS Stacking Context mexanizmini və səbəblərini vizual öyrənin. CSS aspect-ratio və object-fit generatoru Şəkillərin deformasiyasına və CLS sıçrayışlarına son: aspect-ratio proporsiyaları və object-fit fokus nöqtəsi canlı. OKLCH rəng generatoru və palitrası Göz üçün bərabər parlaqlıq və Display P3 canlı rənglər: OKLCH konvertasiyası, qradasiya və harmonik palitralar. CSS Scroll-driven Animations generatoru JavaScript olmadan skroll animasiyaları: animation-timeline scroll() və view() ilə oxuma lenti və kartların açılması. CSS Container Queries (@container) generatoru Media sorğularına son: komponent ekran ölçüsünə deyil, öz konteynerinin eninə uyğunlaşır. Canlı ölçü dəyişmə və @container qaydaları.
WhatsApp