July 3, 2025 at 5:47 PM
July 7, 2025 at 3:32 PM
I was using anchor positioning with a pseudo-element, and wanted to transition it between anchors. Thought I'd run into a wall with it, but instead of chaning the position-anchor on the element itself, you can just update which element has the anchor-name...
Code 👉 codepen.io/kevinpowell/...
Code 👉 codepen.io/kevinpowell/...
July 2, 2025 at 5:06 PM
I was using anchor positioning with a pseudo-element, and wanted to transition it between anchors. Thought I'd run into a wall with it, but instead of chaning the position-anchor on the element itself, you can just update which element has the anchor-name...
Code 👉 codepen.io/kevinpowell/...
Code 👉 codepen.io/kevinpowell/...
Working on a demo for interpolate-size and decided to add bit of spice to it with a linear() - so much more fun than the regular easing stuff!
The basic demo: https://codepen.io/kevinpowell/pen/ZYzbNzN
Used the bounce preset from this linear() generator: https://linear-easing-generator.netlify.app
The basic demo: https://codepen.io/kevinpowell/pen/ZYzbNzN
Used the bounce preset from this linear() generator: https://linear-easing-generator.netlify.app
December 4, 2024 at 7:52 PM
Working on a demo for interpolate-size and decided to add bit of spice to it with a linear() - so much more fun than the regular easing stuff!
The basic demo: https://codepen.io/kevinpowell/pen/ZYzbNzN
Used the bounce preset from this linear() generator: https://linear-easing-generator.netlify.app
The basic demo: https://codepen.io/kevinpowell/pen/ZYzbNzN
Used the bounce preset from this linear() generator: https://linear-easing-generator.netlify.app
So I made a quick demo and a video cause I can explain it better there :D
Video is too big for bksy though...
video explain: youtu.be/h71tY66w7f8
first example: codepen.io/kevinpowell/...
second example: codepen.io/kevinpowell/...
Video is too big for bksy though...
video explain: youtu.be/h71tY66w7f8
first example: codepen.io/kevinpowell/...
second example: codepen.io/kevinpowell/...
September 3, 2025 at 6:39 PM
So I made a quick demo and a video cause I can explain it better there :D
Video is too big for bksy though...
video explain: youtu.be/h71tY66w7f8
first example: codepen.io/kevinpowell/...
second example: codepen.io/kevinpowell/...
Video is too big for bksy though...
video explain: youtu.be/h71tY66w7f8
first example: codepen.io/kevinpowell/...
second example: codepen.io/kevinpowell/...
light-dark() is super cool, but annoying that you can't have more than two themes.
if() basically let's us do the exact same thing with as many colros as wel want though 😊
Code 👉 codepen.io/kevinpowell/...
if() basically let's us do the exact same thing with as many colros as wel want though 😊
Code 👉 codepen.io/kevinpowell/...
July 1, 2025 at 4:52 PM
light-dark() is super cool, but annoying that you can't have more than two themes.
if() basically let's us do the exact same thing with as many colros as wel want though 😊
Code 👉 codepen.io/kevinpowell/...
if() basically let's us do the exact same thing with as many colros as wel want though 😊
Code 👉 codepen.io/kevinpowell/...
I should have been doing other things, but someone asked about selecting the last row in an auto grid and it sent me down a rabbit hole, but got it working.
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
June 19, 2025 at 6:44 PM
I should have been doing other things, but someone asked about selecting the last row in an auto grid and it sent me down a rabbit hole, but got it working.
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.
codepen.io/kevinpowell/...
Here's the codepen if you want to play with it: codepen.io/kevinpowell/...
animation-timing-function with scroll-driven animations
...
codepen.io
December 6, 2024 at 6:43 PM
Here's the codepen if you want to play with it: codepen.io/kevinpowell/...
`30s` on the clock, how well do my CSS answers stack up against Kevin's audience?
Watch on YouTube
nerdy.dev
October 3, 2026 at 12:17 AM
If ever you want to style , you might somtimes have single key strokes, but with shortcuts where you might use nested elements, it could cause some styling issues, but luckily we have :has() now to solve that.
Here's a quick example: codepen.io/kevinpowell/...
Here's a quick example: codepen.io/kevinpowell/...
January 15, 2025 at 7:04 PM
If ever you want to style , you might somtimes have single key strokes, but with shortcuts where you might use nested elements, it could cause some styling issues, but luckily we have :has() now to solve that.
Here's a quick example: codepen.io/kevinpowell/...
Here's a quick example: codepen.io/kevinpowell/...
Here's a demo if you want to see it in action: codepen.io/kevinpowell/...
September 24, 2025 at 1:47 PM
Here's a demo if you want to see it in action: codepen.io/kevinpowell/...
Starting in 15 minutes ‼️🧑💻🏀
www.youtube.com/watch?v=YZZb...
www.youtube.com/watch?v=YZZb...
The Internet’s Best Web Devs Compete in CSS | Quarter Finals
We brought 16 of the worlds best CSS developers to compete head to head.
https://www.madcss.com
Follow / subscribe to all of our featured competitors:
Kevin Powell
@KevinPowell …
www.youtube.com
March 20, 2026 at 1:43 PM
Starting in 15 minutes ‼️🧑💻🏀
www.youtube.com/watch?v=YZZb...
www.youtube.com/watch?v=YZZb...
Also, it's much simpler to pick a specific column, lol codepen.io/kevinpowell/...
Select all items in a specific column when using repeat(auto-fit/fill) with Grid
...
codepen.io
June 19, 2025 at 6:44 PM
Also, it's much simpler to pick a specific column, lol codepen.io/kevinpowell/...
Can anyone explain what's happening with the borders here, when using multicolumn and declaring display: block on the images?
Same behaviour in FF, but not Safari.
Happy to file a bug report, but strange it's in both FF and Chromium.
codepen.io/kevinpowell/...
Same behaviour in FF, but not Safari.
Happy to file a bug report, but strange it's in both FF and Chromium.
codepen.io/kevinpowell/...
February 27, 2026 at 1:29 PM
Can anyone explain what's happening with the borders here, when using multicolumn and declaring display: block on the images?
Same behaviour in FF, but not Safari.
Happy to file a bug report, but strange it's in both FF and Chromium.
codepen.io/kevinpowell/...
Same behaviour in FF, but not Safari.
Happy to file a bug report, but strange it's in both FF and Chromium.
codepen.io/kevinpowell/...
🟡🟣 Center the bottom row when using grid auto-fit
by Kevin Powell
@kevinpowell.co @kevinpowell@front-end.social
#css #CenteringThings #GridAutoFit #webdev
youtu.be/HvhSEsFEsAg?...
by Kevin Powell
@kevinpowell.co @kevinpowell@front-end.social
#css #CenteringThings #GridAutoFit #webdev
youtu.be/HvhSEsFEsAg?...
November 19, 2024 at 9:53 PM
🟡🟣 Center the bottom row when using grid auto-fit
by Kevin Powell
@kevinpowell.co @kevinpowell@front-end.social
#css #CenteringThings #GridAutoFit #webdev
youtu.be/HvhSEsFEsAg?...
by Kevin Powell
@kevinpowell.co @kevinpowell@front-end.social
#css #CenteringThings #GridAutoFit #webdev
youtu.be/HvhSEsFEsAg?...
you can find him @kevinpowell@front-end.social
November 1, 2024 at 6:57 AM
you can find him @kevinpowell@front-end.social
Smart Layout Patterns With Modern CSS, by @kevinpowell@front-end.social (@smashingmag@mastodon.social):
https://www.youtube.com/watch?v=4IBXIFe2CKA&ref=frontenddogma.com
#videos #css #layout #containerqueries
https://www.youtube.com/watch?v=4IBXIFe2CKA&ref=frontenddogma.com
#videos #css #layout #containerqueries
Smart Layout Patterns with Modern CSS with KEVIN POWELL – SmashingConf Amsterdam 2026
Disfruta de los vídeos y la música que te gustan, sube material original y comparte el contenido con tus amigos, tu familia y el resto del mundo en YouTube.
www.youtube.com
June 20, 2026 at 7:30 AM
Smart Layout Patterns With Modern CSS, by @kevinpowell@front-end.social (@smashingmag@mastodon.social):
https://www.youtube.com/watch?v=4IBXIFe2CKA&ref=frontenddogma.com
#videos #css #layout #containerqueries
https://www.youtube.com/watch?v=4IBXIFe2CKA&ref=frontenddogma.com
#videos #css #layout #containerqueries
@kevinpowell.co is only 4K subs away from 1M subs, let’s support him.
If you don’t subscribe, please do as he is the best and I learned a lot of CSS tricks and tips over the years!
Subscribe here 👇
youtube.com/@kevinpowell
If you don’t subscribe, please do as he is the best and I learned a lot of CSS tricks and tips over the years!
Subscribe here 👇
youtube.com/@kevinpowell
Kevin Powell
Helping you learn how to make the web, and make it look good while you're at it.
With weekly videos and shorts, I'll be bringing you How Tos and Tutorials, as well as simple tips and tricks, with a b...
youtube.com
December 19, 2025 at 7:56 PM
@kevinpowell.co is only 4K subs away from 1M subs, let’s support him.
If you don’t subscribe, please do as he is the best and I learned a lot of CSS tricks and tips over the years!
Subscribe here 👇
youtube.com/@kevinpowell
If you don’t subscribe, please do as he is the best and I learned a lot of CSS tricks and tips over the years!
Subscribe here 👇
youtube.com/@kevinpowell
lol
I think centering the leftover ones is a lot easier... skipping awkward divisions, unless I'm missing something, would require pretty unique numbers for every child count.
But same idea, container queries + spanning columns - codepen.io/kevinpowell/...
I think centering the leftover ones is a lot easier... skipping awkward divisions, unless I'm missing something, would require pretty unique numbers for every child count.
But same idea, container queries + spanning columns - codepen.io/kevinpowell/...
autofit grid
...
codepen.io
November 29, 2024 at 1:09 PM
lol
I think centering the leftover ones is a lot easier... skipping awkward divisions, unless I'm missing something, would require pretty unique numbers for every child count.
But same idea, container queries + spanning columns - codepen.io/kevinpowell/...
I think centering the leftover ones is a lot easier... skipping awkward divisions, unless I'm missing something, would require pretty unique numbers for every child count.
But same idea, container queries + spanning columns - codepen.io/kevinpowell/...
Using if(), if a custom prop value is coming from a attr(), it will evaluate as true, but then not use the value if the value is a url?
Am I doing something wrong here? I know attr() has security restrictions around url(), but I tried image-set() with the same result.
codepen.io/kevinpowell/...
Am I doing something wrong here? I know attr() has security restrictions around url(), but I tried image-set() with the same result.
codepen.io/kevinpowell/...
if() url doesn't work if value is coming from data attribute?
...
codepen.io
June 2, 2026 at 5:22 PM
Using if(), if a custom prop value is coming from a attr(), it will evaluate as true, but then not use the value if the value is a url?
Am I doing something wrong here? I know attr() has security restrictions around url(), but I tried image-set() with the same result.
codepen.io/kevinpowell/...
Am I doing something wrong here? I know attr() has security restrictions around url(), but I tried image-set() with the same result.
codepen.io/kevinpowell/...
Someone asked about something similar in my Discord community, which reminded me about this cut-corner thing I did a while back, and I figured I'd share it again 😊
Easily adapt the size of the "border" and the size of the "cut" with custom props.
codepen.io/kevinpowell/...
Easily adapt the size of the "border" and the size of the "cut" with custom props.
codepen.io/kevinpowell/...
Responsive/Adaptive cut corners
A cut-corner border effect using pseudo-elements. Updating the custom properties lets you change the border (gradient or solid color), background color...
codepen.io
January 17, 2025 at 2:06 PM
Someone asked about something similar in my Discord community, which reminded me about this cut-corner thing I did a while back, and I figured I'd share it again 😊
Easily adapt the size of the "border" and the size of the "cut" with custom props.
codepen.io/kevinpowell/...
Easily adapt the size of the "border" and the size of the "cut" with custom props.
codepen.io/kevinpowell/...
In case you want to skip the video and look at the code:
✅ LukyVJ's original codepen: codepen.io/LukyVj/pen/P...
✅ My finished version: codepen.io/kevinpowell/...
✅ LukyVJ's original codepen: codepen.io/LukyVj/pen/P...
✅ My finished version: codepen.io/kevinpowell/...
CSS only bubbly hover direction button - in and out
...
codepen.io
October 8, 2025 at 7:00 PM
In case you want to skip the video and look at the code:
✅ LukyVJ's original codepen: codepen.io/LukyVj/pen/P...
✅ My finished version: codepen.io/kevinpowell/...
✅ LukyVJ's original codepen: codepen.io/LukyVj/pen/P...
✅ My finished version: codepen.io/kevinpowell/...