nana

☕️ 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? :)

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

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

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

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

🦌 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 CSS selector or tip is on your wishlist?
Drop your ideas in the comments, and we will include them!

Happy coding and designing 🎄✨🤶

#CSS #cssadvent #css2025 #frontendly #cssselectors

🌟These videos are part of our Master CSS Selectors Course!
If you’re ready to elevate your skills and unlock the full power of CSS selectors, join our course today and start building with confidence! 🚀
🦌 css-selectors.dev

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

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

Thank you for sharing! ✨I'm just curious if the :has pseudo-class provides any specific functionality here?

Thanks for your kind words. 😃

Thanks for sharing ✨

Thanks for your kind words! ✨