CSS napredni efekti omogočajo ustvarjanje vizualno bogatih in sodobnih spletnih strani brez uporabe programov za urejanje slik ali JavaScripta. Ti efekti delujejo neposredno v brskalniku in so popolnoma prilagodljivi.
Lastnost filter omogoča aplikacijo vizualnih učinkov na elemente, kot so zameglitev
(blur), odstranitev barv (grayscale), sepia učinek in spreminjanje svetlosti ter
kontrasta. Lastnost backdrop-filter pa aplicira iste učinke na ozadje za elementom –
idealno za zamegljena steklena okna (glassmorphism).
Z mix-blend-mode mešamo barve elementov z njihovim ozadjem, object-fit nadzira, kako
slike zasedajo prostor, clip-path pa izreže elemente v poljubne oblike. Lastnosti opacity
in visibility nadzirata vidnost elementov, cursor pa spremeni kazalec miške.
| Lastnost | Primer | Opis |
|---|---|---|
| Filter (Vizualni učinki) | ||
filter: blur() | filter: blur(5px); |
Zamegli element (povečana vrednost = večja zameglitev) |
filter: brightness() | filter: brightness(1.5); |
Spremeni svetlost (1 = normalno, >1 = svetlejše, <1 = temnejše) |
filter: contrast() | filter: contrast(2); |
Spremeni kontrast (1 = normalno) |
filter: grayscale() | filter: grayscale(100%); |
Odstrani barve (100% = črno-belo, 0% = normalno) |
filter: sepia() | filter: sepia(100%); |
Uporabi sepia (starinski) učinek |
filter: saturate() | filter: saturate(2); |
Spremeni nasičenost barv (1 = normalno) |
filter: hue-rotate() | filter: hue-rotate(90deg); |
Zavrti barvni odtenek za določen kot |
filter: invert() | filter: invert(100%); |
Obrne barve (negativ) |
filter: drop-shadow() | filter: drop-shadow(5px 5px 10px black); |
Senca, ki upošteva obliko elementa (boljša od box-shadow) |
| Backdrop-Filter (Učinki na ozadju) | ||
backdrop-filter: blur() | backdrop-filter: blur(10px); |
Zamegli ozadje za elementom (glassmorphism učinek) |
backdrop-filter: brightness() | backdrop-filter: brightness(1.2); |
Spremeni svetlost ozadja za elementom |
backdrop-filter: saturate() | backdrop-filter: saturate(1.5); |
Spremeni nasičenost ozadja za elementom |
| Blend Mode (Mešanje barv) | ||
mix-blend-mode | mix-blend-mode: multiply; |
Meša barve elementa z ozadjem (multiply, screen, overlay, darken, lighten...) |
background-blend-mode | background-blend-mode: overlay; |
Meša več ozadij istega elementa |
| Vidnost | ||
opacity | opacity: 0.5; |
Prosojnost celotnega elementa (0 = nevidno, 1 = polno vidno) |
visibility | visibility: hidden; |
Skrije element, a ohrani njegov prostor (visible, hidden, collapse) |
| Slike in Oblike | ||
object-fit | object-fit: cover; |
Kako slika zasede prostor (cover, contain, fill, none, scale-down) |
object-position | object-position: center top; |
Pozicija slike znotraj okvirja |
clip-path | clip-path: circle(50%); |
Izreže element v obliko (circle, ellipse, polygon, inset) |
| Kazalec in Interakcija | ||
cursor | cursor: pointer; |
Spremeni kazalec miške (pointer, crosshair, move, text, wait, not-allowed...) |
pointer-events | pointer-events: none; |
Onemogoči klikanje na element (none, auto) |
