iiinova — where your digital self keeps evolving

nana @nanacodesign.com · 21/10/2025

🧪 Daily UI Experiment: Data visualisation #1 🕹️Codepen ✨Data visualisation: dynamic avatar lnkd.in/gQyscgx6 ✨Data visualisation: static avatar lnkd.in/gfCkg4G7 #DataVisualisation #CSS #UI

010

nana @nanacodesign.com · 16/10/2025

🧪 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

041

nana @nanacodesign.com · 11/09/2025

🧪 Daily UI Experiment: Eye Tracking Delightful Interaction I’ll come back with a live demo soon, stay tuned 🧙‍♀️ #CSS #UI

020

nana @nanacodesign.com · 08/09/2025

Happy Monday! Sound on, please 🔊 🧪 Daily UI experiment: Card focus state with audio feedback 🕹️ CodePen: lnkd.in/geVf7f8N Happy Codesign 🧙‍♀️ #UI #Accessibility #audioFeedback #designSystem

030

nana @nanacodesign.com · 05/09/2025

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

000

nana @nanacodesign.com · 04/09/2025

🧪 Daily UI experiment: Button focus state Feels alive—intuitive, accessible, and delightful. 🕹️ CodePen: codepen.io/nanacodesign... #CSS #Focus #Accessibility

000

nana @nanacodesign.com · 10/07/2025

☕️ 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

040

nana @nanacodesign.com · 10/06/2025

🕹️ 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...

001

nana @nanacodesign.com · 05/06/2025

🕹️ 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

020

nana @nanacodesign.com · 02/06/2025

🕹️ 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

020

nana @nanacodesign.com · 21/05/2025

CSS Grid can do anything! 💫 I created a parody of “I Can Be Anything” by Shinsuke Yoshitake, a book my 4-year-old daughter loves. 👧📙 📜 CSS grid with Galaxy layout: now available in Figma: lnkd.in/gCuFX2cu 🕹️ CSS grid collection: lnkd.in/gAdaZXVm #CSS #CSSgrid @codepen.io #figma

030

nana @nanacodesign.com · 09/12/2024

🦌 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.

030

nana @nanacodesign.com · 06/12/2024

🦌 Day 3. Selector list vs :is(), which one to use? The :is() pseudo-class is more forgiving than traditional selectors! It ensures valid styles still apply even if some selectors in the list are unsupported—perfect for keeping your designs robust and functional.

120

nana @nanacodesign.com · 06/12/2024

🦌 Day 2. :focus-within 🧐 Can you make form navigation more intuitive? Use :focus-within to dynamically enhance usability! Change the border color of a section when any input inside gains focus, helping users stay oriented for smoother, more intuitive navigation. 📺 www.youtube.com/watch?v=j5WM...

120

nana @nanacodesign.com · 06/12/2024

🦌 Day 1. :focus vs :focus-visible What is the difference between :focus and :focus-visible? Browsers add a blue focus ring to elements, but removing it can make things tricky for keyboard users! :focus-visible pseudo-class is a great solution.✨ 📺 watch more www.youtube.com/watch?v=lDwZ... #css

060

nana @nanacodesign.com · 06/12/2024

Here’s what awaits you in the CSS Advent Calendar 2024:

100

nana @nanacodesign.com · 06/12/2024

🦌✨ 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

131

nana @nanacodesign.com · 06/11/2024

G’day friends! 👋 Finally summer is coming to Sydney 🦘 Happy codesign today. 🧙🏻‍♀️

010

nana @nanacodesign.com · 22/02/2024

Hello 🦋 This is my latest 404 page design. 😊

030