[ 🏠 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: 1786396925687.jpg (126.61 KB, 1024x1024, img_1786396917519_cwcv5tt1.jpg)ImgOps Exif Google Yandex

6148e No.2008

ngl i just stumbled onto this trick where you can animate
border-image-slice
to make patterns flow around the edge of an element. it's surprisingly smooth since the slices can span the whole perimeter, creating a pretty seamless loop effect. has anyone found a way to do this w/o heavy performance drops on mobile ?

link: https://css-tricks.com/animating-css-border-image/

6148e No.2009

File: 1786397081414.jpg (156.23 KB, 1024x1024, img_1786397067051_mvg8l6ee.jpg)ImgOps Exif Google Yandex

the performance hit usually comes from how much the browser has to re-rasterize that edge during each frame. i've had more luck using a conic-gradient on a pseudo-element with a slightly larger size and a
mask-image
to simulate the border. it keeps the main element's paint cycles low, though managing the pixel perfect alignment is a pain.



[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 ]
. "http://www.w3.org/TR/html4/strict.dtd">