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
Reposted by nana
CSS color just a major glow-up 🌈
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
A pragmatic guide to modern CSS colours - part one
Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...
piccalil.li
October 15, 2025 at 2:09 PM
CSS color just a major glow-up 🌈
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
Reposted by nana
We’re live!! My brand-new course, “Whimsical Animations”, is now available. 🥳🎉
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
whimsy.joshwcomeau.com
September 24, 2025 at 2:56 PM
We’re live!! My brand-new course, “Whimsical Animations”, is now available. 🥳🎉
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
Reposted by nana
In the latest Winging It, @miriam.codes & @stacykvernmo.com chat with #CSS expert @kizu.dev about how to create reusable and flexible CSS using mixins & functions, what happened in the CSSWG meetings, and what's coming in CSS!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
Mixins & Functions to Streamline CSS
With special guest Roma Komarov
www.oddbird.net
September 11, 2025 at 6:53 PM
In the latest Winging It, @miriam.codes & @stacykvernmo.com chat with #CSS expert @kizu.dev about how to create reusable and flexible CSS using mixins & functions, what happened in the CSSWG meetings, and what's coming in CSS!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
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
💡 CSS Tip!
Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩
css-tip.com/hexagon/
The magic? The new corner-shape property!
Save this code for the future. It will be the easiest way to create hexagon shapes and ... 🥁🥁🥁 ... it works with border! 🤩
css-tip.com/hexagon/
The magic? The new corner-shape property!
June 17, 2025 at 3:14 PM
Reposted by nana
I made the demo for this video over a month ago and I recorded it several weeks ago before I'd even heard of "Liquid Glass"... but the timing of it coming out this week worked out pretty well, lol.
This is more based on current trends without going into the inaccessible mess that Apple made though.
This is more based on current trends without going into the inaccessible mess that Apple made though.
Create this trendy blurry glass effect with CSS
YouTube video by Kevin Powell
youtu.be
June 11, 2025 at 1:48 PM
I made the demo for this video over a month ago and I recorded it several weeks ago before I'd even heard of "Liquid Glass"... but the timing of it coming out this week worked out pretty well, lol.
This is more based on current trends without going into the inaccessible mess that Apple made though.
This is more based on current trends without going into the inaccessible mess that Apple made though.
🕹️ 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
Reposted by nana
CSS if() function landed today(!!!) in Chrome 137 🥳
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
CSS if() functions & reading-flow (in Chrome 137)
YouTube video by Una Kravets
youtu.be
May 27, 2025 at 9:29 PM
CSS if() function landed today(!!!) in Chrome 137 🥳
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
Reposted by nana
🕹️ 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
Figma Grid, a brand-new tech?
🎉 I’ve just published "CSS grid with Galaxy layout: now available in Figma" sharing how I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer, or both.
uxdesign.cc/css-grid-wit...
🎉 I’ve just published "CSS grid with Galaxy layout: now available in Figma" sharing how I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer, or both.
uxdesign.cc/css-grid-wit...
CSS Grid with Galaxy layout: now available in Figma
How I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer,
uxdesign.cc
May 20, 2025 at 2:05 PM
Figma Grid, a brand-new tech?
🎉 I’ve just published "CSS grid with Galaxy layout: now available in Figma" sharing how I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer, or both.
uxdesign.cc/css-grid-wit...
🎉 I’ve just published "CSS grid with Galaxy layout: now available in Figma" sharing how I used Grid on a client website sometime ago, and share creative ideas to spark your imagination, whether you’re a designer, developer, or both.
uxdesign.cc/css-grid-wit...
Reposted by nana
I found another interesting accessible palette generator tool! Enter a color, and it will generate specific palettes for canvas, accent non-content, accent content, etc. Usefull to generate different shades for a specific color.
thisisfranciswu.com/enterprise-u...
thisisfranciswu.com/enterprise-u...
February 26, 2025 at 8:30 AM
I found another interesting accessible palette generator tool! Enter a color, and it will generate specific palettes for canvas, accent non-content, accent content, etc. Usefull to generate different shades for a specific color.
thisisfranciswu.com/enterprise-u...
thisisfranciswu.com/enterprise-u...
🦌 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
🦌✨ 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