vivi

just trying to make some dots

[vivi @vivitseng_]

@lichinlin awww i love it 😍

[Lichin Lin @lichinlin]

turning the cat around (physically)

[vivi @vivitseng_]

@SamuelLimby thank you!

[vivi @vivitseng_]

built a 7-segment clock with css conic-gradient

> ONE element per digit 🪄
> `@ property` for smooth color transitions
> round() to keep the segments in place

[vivi @vivitseng_]

@CodePen link here:

https://t.co/0RXHIuQCTU

[vivi @vivitseng_]

@huozhi this is cool!

[vivi @vivitseng_]

this css-only annotation library is so cool and elegant!

built by Maxim Syabro. check out the demo site here: https://t.co/wCGBkZwDtv

[vivi @vivitseng_]

link here: https://t.co/Q2sorhiGKj

[vivi @vivitseng_]

play around with radial-gradient’s size property with css only

> use `@ property` to handle the radial-gradient() position transition
> use `:has()` to control the toggles and gradient states
> some useful css math functions: min(), max(), hypot(), and sqrt()

[vivi @vivitseng_]

💫

[vivi @vivitseng_]

@edogalati thanks! it uses a css mask with a few gradients.

you can check out the demo here
https://t.co/bMoBNZvvJf

[vivi @vivitseng_]

among all the tear styles, this one is my favorite 😎

> conic-gradient + rectangle sizing to create the pattern
> linear-gradient to mask every other section and create the gaps

it feels much more alive than a linear-gradient-only approach!

[vivi @vivitseng_]

🎫

[vivi @vivitseng_]

debossed effect with css gradients 📔

[vivi @vivitseng_]

🎫

[vivi @vivitseng_]

another kind of object removal...? with css filters and mix-blend-mode 🍨

[vivi @vivitseng_]

@wyqin924176 Thanks 🙏

[vivi @vivitseng_]

spin on expand 🦔

[vivi @vivitseng_]

@edogalati thank you!

[vivi @vivitseng_]

check out microlighter: https://t.co/8pLkldnQqQ

try it out in bg.layers: https://t.co/AqYNsHVM6x

[vivi @vivitseng_]

replaced the code highlighter in bg.layers with microlighter, a tiny 2kb library powered by the css custom highlight api ✨