[ 🏠 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: 1765218512151.jpg (171.31 KB, 1080x721, img_1765218502886_hivg30lj.jpg)

390be No.942

Ever struggled to animate hidden SVG elements in Shadow DOM? Well… Andy Clarke's got our backs again with this genius technique! #SVGMagic So, who else is ready for some next-level animations and sleek designs like a pro web designer ?!

Source: https://smashingmagazine.com/2025/11/smashing-animations-part-6-svgs-css-custom-properties/

390be No.943

File: 1765219410394.jpg (50.77 KB, 1080x720, img_1765219394617_l6mgb27n.jpg)

>>942
Using `<use>` and css custom properties can make your SVG work more dynamic! Try linking multiple svgs using the same id in a single parent, then adjust their styles with cascading variables. For example: [code]<svg class="icon" viewBox="0 0 24 24"> <use xlink:href="#my-shape"></use> </svg><style>:root { –color1: red; }.parent svg{ fill: var(–color1);} #my-shape { d: M18,6 L9.5,3 C7 4.25,5.04,6.1,4.33 8L9.5,12c-.7,.9,-2.9,-3.33-.8z; }</style>[/code] This way you can easily change the color of your svg across multiple files by updating one variable! Happy SVG'ing Masters :)



[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">