nana
@nanacodesign.com
🧪 Daily UI Experiment: Data visualisation #1
🕹️Codepen
✨Data visualisation: dynamic avatar
lnkd.in/gQyscgx6
✨Data visualisation: static avatar
lnkd.in/gfCkg4G7
#DataVisualisation
#CSS #UI
🕹️Codepen
✨Data visualisation: dynamic avatar
lnkd.in/gQyscgx6
✨Data visualisation: static avatar
lnkd.in/gfCkg4G7
#DataVisualisation
#CSS #UI
October 21, 2025 at 1:13 PM
🧪 Daily UI Experiment: Data visualisation #1
🕹️Codepen
✨Data visualisation: dynamic avatar
lnkd.in/gQyscgx6
✨Data visualisation: static avatar
lnkd.in/gfCkg4G7
#DataVisualisation
#CSS #UI
🕹️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
🕹️ Live demo (desktop only - mobile support coming soon!)
:popover
lnkd.in/gF8p2Xgp
:checkbox
lnkd.in/g2dCA8Vg
Happy codesign 🧙♀️
#CSS #popover
October 16, 2025 at 10:59 PM
🧪 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
🕹️ Live demo (desktop only - mobile support coming soon!)
:popover
lnkd.in/gF8p2Xgp
:checkbox
lnkd.in/g2dCA8Vg
Happy codesign 🧙♀️
#CSS #popover
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: Card focus state with audio feedback
🕹️ CodePen: lnkd.in/geVf7f8N
Happy Codesign 🧙♀️
#UI #Accessibility #audioFeedback #designSystem
September 8, 2025 at 6:10 AM
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: 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 with audio feedback
🕹️ CodePen lnkd.in/gRqnYF3h
Testing two approaches:
• Flat tones
• Varied tones
🤔 Which provides clearer interaction feedback?
#UI #Accessibility #audioFeedback @codepen.io
September 5, 2025 at 3:59 AM
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 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
Feels alive—intuitive, accessible, and delightful.
🕹️ CodePen: codepen.io/nanacodesign...
#CSS #Focus #Accessibility
September 4, 2025 at 2:26 PM
🧪 Daily UI experiment: Button focus state
Feels alive—intuitive, accessible, and delightful.
🕹️ CodePen: codepen.io/nanacodesign...
#CSS #Focus #Accessibility
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
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
July 10, 2025 at 3:04 PM
☕️ 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
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...
🤔 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...
June 10, 2025 at 6:32 AM
🕹️ 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...
🤔 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
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
June 5, 2025 at 12:52 PM
🕹️ 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
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
• 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
June 2, 2025 at 3:34 AM
🕹️ 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
• 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
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
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
May 21, 2025 at 4:53 AM
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
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
🦌 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.
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.
December 9, 2024 at 2:00 PM
🦌 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.
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.
🦌 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.
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.
December 6, 2024 at 5:36 AM
🦌 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.
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.
🦌 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...
🧐 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...
December 6, 2024 at 5:29 AM
🦌 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...
🧐 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...
🦌 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
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
December 6, 2024 at 5:13 AM
🦌 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
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
Here’s what awaits you in the CSS Advent Calendar 2024:
December 6, 2024 at 4:58 AM
Here’s what awaits you in the CSS Advent Calendar 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
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
December 6, 2024 at 4:57 AM
🦌✨ 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
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. 🧙🏻♀️
Finally summer is coming to Sydney 🦘
Happy codesign today. 🧙🏻♀️
November 6, 2024 at 1:55 PM
G’day friends! 👋
Finally summer is coming to Sydney 🦘
Happy codesign today. 🧙🏻♀️
Finally summer is coming to Sydney 🦘
Happy codesign today. 🧙🏻♀️
Hello 🦋
This is my latest 404 page design. 😊
This is my latest 404 page design. 😊
February 22, 2024 at 12:40 PM
Hello 🦋
This is my latest 404 page design. 😊
This is my latest 404 page design. 😊