nana

Cross-browser Anchor Positioning YouTube video by Winging It

You may have missed my #CSS anchor positioning livestream with @miriam.codes and @jamessw.com earlier today, but that’s okay! The geeks at YouTube figured out some kinda magic capture thing that lets you play back live events whenever you want. Here’s ours: www.youtube.com/watch?v=qOXY...

🧪 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

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

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

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!

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

Mixins & Functions to Streamline CSS With special guest Roma Komarov

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!

🧪 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

corner-shape: bevel;

@css-only.dev Thanks for sharing ✨

#css

Thanks for sharing :) I’m patiently waiting @jhey.dev’s final @codepen.io 😉

Thanks so much for the help! I’ll try SVG magic :)

Thanks for sharing. Is it possible to create the Liquid Glass Gooey effect using only CSS? :)

Create this trendy blurry glass effect with CSS YouTube video by Kevin Powell

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.

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

Thanks for sharing :) I love it

CSS if() functions & reading-flow (in Chrome 137) YouTube video by Una Kravets

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

CSS Day 2025, 5th & 6th of June, Amsterdam CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.

Sold out. But our live stream isn't.

cssday.nl/live-stream....

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

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

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,

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

Screenshot of the "Accessible Color Palette Generator" tool interface. It shows settings on the left to adjust contrast and saturation, with an accent color set to yellow. The right side displays the generated palette, including various shades and their hex codes for canvas and accent baseline.

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

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

The second reason is to Simplify lengthy selector lists! It makes complex selectors more readable and ensures seamless styling, even if one selector becomes invalid.

📺 Watch more
www.youtube.com/watch?v=AEUe...

💡 How do you use the :is() pseudo-class to simplify your CSS? Share your tips!

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

💡 What other ways do you recommend for improving form navigation?

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