Če želimo ustvariti t. i. “glass” efekt (blur ozadja za elementom), je CSS backdrop-filter ena najbolj uporabnih CSS lastnosti. Namesto da oblikuješ sam element, z backdrop-filter vplivaš na vsebino za njim. Rezultat je moderni UI, kot ga vidiš v vmesnikih iOS, macOS ali v “glassmorphism” oblikovanju.
Kaj dela backdrop-filter?
CSS backdrop-filter aplicira vizualni efekt na ozadje za elementom. Na voljo imamo:
- blur (zameglitev).
- brightness (svetlost),
- contrast (kontrast),
- ,saturate (nasičenost) in
- kombinacije.
Primer uporabe:
See the Pen
CSS: backdrop-filter by Ziga (@pomagalnik)
on CodePen.
Efekt “backdrop-filter” je najbolje uporabiti, kadar imamo navigacija čez sliko (sticky header), modal okna, kartice in v modern UI (glassmorphism). Njegova slabost pa je, da potrebuje transparentno ozadje, lahko vpliva na “performance”, ker je bolj zahteven za izvedbo in ima slabo podporo na starejših brskalnikih (IE, uporabi fallback).
glass {
background: rgba(255, 255, 255, 0.85);
}
@supports (backdrop-filter: blur(10px)) {
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
}
Generalno pa ne pretiravajte z blur efektom, manj je več. Uporabljajte ga subtilno, dobrim kontrastom (A11y) in fallbackom. Vizualni efekti vedno podpirajo vsebino in ne obratno.
Vmesnik za backdrop-filter
See the Pen
Beyond The Blur – a backdrop-filter demo by Stuart Robson (@sturobson)
on CodePen.
Vir za vmesnik: Beyond The Blur: A Quick Guide to the CSS Backdrop-Filter Property
