CodePen
@codepen.io
It's the final week of the November #CodePenChallenge!
This week, it's time to bring your favorite new CSS feature to the table 🧑🌾
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, it's time to bring your favorite new CSS feature to the table 🧑🌾
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
CodePen
©2025 CodePen
codepen.io
November 26, 2025 at 4:32 PM
It's the final week of the November #CodePenChallenge!
This week, it's time to bring your favorite new CSS feature to the table 🧑🌾
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, it's time to bring your favorite new CSS feature to the table 🧑🌾
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
"CSS Color Picker" by Adam Argyle
codepen.io/argyleink/pe...
codepen.io/argyleink/pe...
November 25, 2025 at 10:16 PM
"CSS Color Picker" by Adam Argyle
codepen.io/argyleink/pe...
codepen.io/argyleink/pe...
Reposted by CodePen
An interactive demo: codepen.io/t_afif/full/... via @codepen.io
November 25, 2025 at 6:58 PM
An interactive demo: codepen.io/t_afif/full/... via @codepen.io
Reposted by CodePen
An article about triangles and CSS. I have always said that using borders to draw triangles with CSS is a hacky solution and shouldn't be used... but there are exceptions. Spoiler alert: they involve logical properties.
alvaromontoro.com/blog/68086/d...
#css #html #webdev
alvaromontoro.com/blog/68086/d...
#css #html #webdev
Drawing Triangles with CSS Using Borders... an Exception
A long time ago, I wrote an article about drawing triangles in CSS, and explained why the common border-based approach was far from ideal and should generally be avoided. In this article, I revisit a ...
alvaromontoro.com
November 24, 2025 at 3:42 PM
An article about triangles and CSS. I have always said that using borders to draw triangles with CSS is a hacky solution and shouldn't be used... but there are exceptions. Spoiler alert: they involve logical properties.
alvaromontoro.com/blog/68086/d...
#css #html #webdev
alvaromontoro.com/blog/68086/d...
#css #html #webdev
November 24, 2025 at 10:16 PM
Reposted by CodePen
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
November 21, 2025 at 1:24 PM
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
Reposted by CodePen
November 21, 2025 at 12:15 AM
Reposted by CodePen
Not in Powerpoint, but here's an unfinished collection of flags drawn in CSS using a single HTML element: codepen.io/alvaromontor...
#css #html #webdev
#css #html #webdev
November 20, 2025 at 3:04 AM
Not in Powerpoint, but here's an unfinished collection of flags drawn in CSS using a single HTML element: codepen.io/alvaromontor...
#css #html #webdev
#css #html #webdev
Reposted by CodePen
Another demo using Anchor Positioning and Tooltips. This time, the arrow will get stretchy 👀
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
November 20, 2025 at 1:01 PM
Another demo using Anchor Positioning and Tooltips. This time, the arrow will get stretchy 👀
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
css-tip.com/tooltip-anch...
Still 100% CSS magic! 🪄
The New CSS #CodePenChallenge continues!
This week, we're building with the new CSS `if()` function & custom functions 💻
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, we're building with the new CSS `if()` function & custom functions 💻
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
CodePen
codepen.io
November 19, 2025 at 4:32 PM
The New CSS #CodePenChallenge continues!
This week, we're building with the new CSS `if()` function & custom functions 💻
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, we're building with the new CSS `if()` function & custom functions 💻
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
Reposted by CodePen
took a crack at the @syntax.fm CSS challenge to reproduce the Lando Norris text hover effect, and I don't want to toot my own horn, but I think I nailed this. 30-ish minutes!
codepen.io/jlengstorf/p...
codepen.io/jlengstorf/p...
Lando Norris Text Effect Syntax Challenge
...
codepen.io
November 18, 2025 at 6:24 PM
took a crack at the @syntax.fm CSS challenge to reproduce the Lando Norris text hover effect, and I don't want to toot my own horn, but I think I nailed this. 30-ish minutes!
codepen.io/jlengstorf/p...
codepen.io/jlengstorf/p...
November 18, 2025 at 10:16 PM
Reposted by CodePen
*whispers* corner-shape 🤫👂
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
November 17, 2025 at 7:53 PM
*whispers* corner-shape 🤫👂
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
🟢 round
scoop
📐 bevel
⛏️ notch
⬛️ square
🐿️ squircle
🦹🏻♀️ superellipse
*Pass it on*
codepen.io/una/pen/PwNo...
Reposted by CodePen
How can trig functions be the "most hated" CSS feature where they can do things like this? @monknow.bsky.social has several other fun examples as well.
css-tricks.com/the-most-hat...
css-tricks.com/the-most-hat...
November 17, 2025 at 2:58 PM
How can trig functions be the "most hated" CSS feature where they can do things like this? @monknow.bsky.social has several other fun examples as well.
css-tricks.com/the-most-hat...
css-tricks.com/the-most-hat...
Reposted by CodePen
Sharing the ASCII link hover ripple from my tiny folio. Plain JS, minimal CSS, layout‑safe for long labels.
Demo: codepen.io/erevan/pen/M...
Demo: codepen.io/erevan/pen/M...
October 31, 2025 at 11:42 AM
Sharing the ASCII link hover ripple from my tiny folio. Plain JS, minimal CSS, layout‑safe for long labels.
Demo: codepen.io/erevan/pen/M...
Demo: codepen.io/erevan/pen/M...
November 14, 2025 at 10:16 PM
Reposted by CodePen
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
November 14, 2025 at 4:22 PM
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Reposted by CodePen
💡 CSS Tip!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
November 13, 2025 at 10:38 AM
💡 CSS Tip!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
Reposted by CodePen
New #CSS features allow a different approach to design systems. Thinking in color relations instead of fixed palettes. 1/2
Over on @zeroheight.com's blog, I wrote about using some of the CSS' modern colour features that you can apply to your design systems.
zeroheight.com/blog/leverag...
#DesignSystems #CSS
zeroheight.com/blog/leverag...
#DesignSystems #CSS
Leveraging modern CSS color features in your design system - zeroheight
Declan Chidlow outlines modern CSS color features including variables, color spaces, and mixing that you can use with your design systems.
zeroheight.com
November 13, 2025 at 10:47 AM
New #CSS features allow a different approach to design systems. Thinking in color relations instead of fixed palettes. 1/2
Reposted by CodePen
Did you know: you might be able to change the style of the caret in CSS soon?
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
November 10, 2025 at 10:38 PM
Did you know: you might be able to change the style of the caret in CSS soon?
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
Reposted by CodePen
📝 New CSS Article!
Ready for more Anchor Positioning? The third part is live!
frontendmasters.com/blog/perfect...
With this last part, you have a nice collection of CSS tricks to easily create different tooltips with dynamic positions.
Ready for more Anchor Positioning? The third part is live!
frontendmasters.com/blog/perfect...
With this last part, you have a nice collection of CSS tricks to easily create different tooltips with dynamic positions.
November 10, 2025 at 3:25 PM
📝 New CSS Article!
Ready for more Anchor Positioning? The third part is live!
frontendmasters.com/blog/perfect...
With this last part, you have a nice collection of CSS tricks to easily create different tooltips with dynamic positions.
Ready for more Anchor Positioning? The third part is live!
frontendmasters.com/blog/perfect...
With this last part, you have a nice collection of CSS tricks to easily create different tooltips with dynamic positions.
The CSS Harvest #CodePenChallenge continues!
This week, we're building custom select elements with `appearance: base-select; `
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, we're building custom select elements with `appearance: base-select; `
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
November 12, 2025 at 4:32 PM
The CSS Harvest #CodePenChallenge continues!
This week, we're building custom select elements with `appearance: base-select; `
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
This week, we're building custom select elements with `appearance: base-select; `
codepen.io/challenges/2...
Thanks @Pluralsight for sponsoring: srv.buysellads.com/ads/long/x/T...
November 10, 2025 at 10:16 PM
November 8, 2025 at 4:32 PM