iiinova — where your digital self keeps evolving

Reposted by nana

Eric Meyer @meyerweb.com · 20/11/2025

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

youtube.com

Cross-browser Anchor Positioning

YouTube video by Winging It

1238

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

Reposted by nana

Josh W. Comeau @joshwcomeau.com · 24/09/2025

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

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!

17307101

Reposted by nana

OddBird @oddbird.dev · 11/09/2025

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!

oddbird.net

Mixins & Functions to Streamline CSS

With special guest Roma Komarov

1147

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 · 17/06/2025

corner-shape: bevel; @css-only.dev Thanks for sharing ✨ #css

010

Reposted by nana

Kevin Powell @kevinpowell.co · 11/06/2025

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.

youtu.be

Create this trendy blurry glass effect with CSS

YouTube video by Kevin Powell

5577

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

Reposted by nana

Una Kravets @una.im · 27/05/2025

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

youtu.be

CSS if() functions & reading-flow (in Chrome 137)

YouTube video by Una Kravets

2527156

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 · 20/05/2025

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

uxdesign.cc

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,

000

Reposted by nana

Stef Walter @stephaniewalter.bsky.social · 26/02/2025

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

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.

3355

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

🦌✨ 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 · 21/11/2024

Love it💜🩷💗💖💞💓❣️💘💝

000

nana @nanacodesign.com · 06/11/2024

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

010

nana @nanacodesign.com · 05/11/2024

No more guesswork, Target Correct Elements 🎯 Don’t fear complexity, Understand Advanced CSS Selectors ✨ No more unnecessary JavaScript, Go with CSS Selectors 🌿 CSS selectors course is for everyone. 👶🏻 👧🏻 👩🏻 👵🏻 🚀 Master CSS selectors transform your coding skills✨ #CSS #CSSselectors #frontendly

css-selectors.dev

CSS Selectors

Learn, practice, master - CSS Selectors for simpler coding and become a CSS hero

030

nana @nanacodesign.com · 05/11/2024

🌈Optimising your design system with Figma’s variables. Happy to share my latest article here. 🧙🏻‍♀️💜 #Figma #DesignSystem #variables #CSS #CSSCustomProperties

uxdesign.cc

Optimising your design system with Figma’s variables

Diving into primitive & semantic.

030

nana @nanacodesign.com · 22/02/2024

Hello 🦋 This is my latest 404 page design. 😊

030