🧪 Daily UI Experiment: Data visualisation #1

🕹️Codepen

✨Data visualisation: dynamic avatar
lnkd.in/gQyscgx6

✨Data visualisation: static avatar
lnkd.in/gfCkg4G7

#DataVisualisation
#CSS #UI

🧪 Daily UI Experiment: Sidebar toggle micro interaction

🕹️ Live demo (desktop only - mobile support coming soon!)
:popover
lnkd.in/gF8p2Xgp

:checkbox
lnkd.in/g2dCA8Vg

Happy codesign 🧙‍♀️

#CSS #popover

🧪 Daily UI Experiment: Eye Tracking Delightful Interaction

I’ll come back with a live demo soon, stay tuned 🧙‍♀️
#CSS #UI

Happy Monday!
Sound on, please 🔊

🧪 Daily UI experiment: Card focus state with audio feedback

🕹️ CodePen: lnkd.in/geVf7f8N

Happy Codesign 🧙‍♀️

#UI #Accessibility #audioFeedback #designSystem

Sound on, please 🔊

🧪 Daily UI experiment: Button focus state with audio feedback

🕹️ CodePen lnkd.in/gRqnYF3h

Testing two approaches:
• Flat tones
• Varied tones

🤔 Which provides clearer interaction feedback?

#UI #Accessibility #audioFeedback @codepen.io

🧪 Daily UI experiment: Button focus state
Feels alive—intuitive, accessible, and delightful.

🕹️ CodePen: codepen.io/nanacodesign...

#CSS #Focus #Accessibility

☕️ CSSpresso: 3D Typography & Photo
Depth and motion have a powerful way of shaping how we feel a design, not just see it.

This experiment was inspired by Noah Blon's fantastic CodePen. :)

🕹️ CodePen
lnkd.in/gVYwWafn

🕹️ Origin CodePen: Noah Blon
lnkd.in/gzy3KjZX

#CSS #3D

🕹️ Daily UI: Apple’s Liquid Glass
🤔 My thought: It's absolutely stunning and creates a more organic, immersive experience. However, I noticed potential accessibility concerns with the high transparency and dynamic effects.

Code: codepen.io/nanacodesign...

Read more: www.linkedin.com/posts/nanaco...

🕹️ Daily UI experiment: CSS text animation!

Used @keyframes to animate both color 🌈 and content.

♿️ Heads-up: content: "" is not screen-reader friendly. If it’s important, sync it with real DOM text or ARIA live region. 😉

🕹️ CodePen codepen.io/nanacodesign...

#css #a11y #microinteractions #UI

🕹️ Daily UI experiment: Animated gradient border with CSS

• Pure CSS @keyframes animating a gradient border
• Pure CSS background: linear-gradient
• Custom %-based border-radius for beautifully rounded corners across devices

🕹️ CodePen
lnkd.in/gBq8twFH

#css #border #microinteraction #webanimation

🦌 Day 4. What’s the difference between :is() and :where()?

These selectors may look similar, but understanding their differences can make your styling smarter and more precise! 🚀

💡 When do you use :is() and :where() in your projects? Please share your real-world story.

🦌✨ Ho, Ho, Ho! The CSS Advent 2024 has arrived!🎁

Hello, friends!
It's the most CSS-ful time of the year!

This year, I’ve been busy creating the Master CSS Selectors – and now, we’re thrilled to share a festive surprise(free):
🦌 css-selectors.dev/advent-calen...

💪 Build your #CSS muscle for 2025

G’day friends! 👋
Finally summer is coming to Sydney 🦘

Happy codesign today. 🧙🏻‍♀️