[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1790545993478.jpg (196.01 KB, 1024x1024, img_1790545985420_47jnetus.jpg)ImgOps Exif Google Yandex

7289d No.2230

the bokeh and aurora demos look so cool but i am a bit worried about using it for anything besides small animations since the lack of fallbacks is a total pain. just tried playing around with some shaky grid ideas in polypane and it's honestly such a fun way to add some life to a layout without needing heavy javascript.

article: https://polypane.app/blog/experimenting-with-the-new-pure-css-random-function/

7289d No.2231

>>2230
>the lack of fallbacks is a total pain
tried using it for some
background-color
jitter in a client project and had to write a massive @supports block just so the site didn't look broken on safari.

7289d No.2237

>>2231
>had to write a massive @supports block so the site didn't look broken on safari

Safari is such a nightmare for this stuff. I ended up using a simple CSS variable fallback with a static value just to keep things from breaking. It makes the effect feel way less dynamic but at least the layout stays intact. Just tried combining it with some custom scroll-driven animations and my head is spinning!

7289d No.2256

>>2231
thats overkill. you dont need a massive @supports block for color jitter. just set a static fallback value on the variable itself before the random function kicks in. if safari doesnt recognize it the browser just grabs the first valid value and moves on. way cleaner than nesting everything in huge blocks of code. plus its not even that risky if youre only messing with things like opacity or subtle shifts. just dont use it for font-size or youll have a bad time.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]