🔗 Links

• ✅ Code from this video: https://codepen.io/kevinpowell/pen/RN...

• ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter

• 💬 Come hang out with other devs in my Discord Community  / discord  

• ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co

• 🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)

• 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

⌚ Timestamps

• 00:00 - Introduction

• 00:20 - Creating overlays over background images

• 02:50 - Gradient borders

• 06:00 - Bonus tip: animating gradients

---

Help support my channel

• 👨‍🎓 Get a course: https://www.kevinpowell.co/courses

• 👕 Buy a shirt: https://cottonbureau.com/people/kevin...

• 💖 Support me on Patreon:

•  / kevinpowell   or through YT memberships:

•  / @kevinpowell  

---

• 🧑‍💻 My editor: VS Code - https://code.visualstudio.com/

• 🌈 My theme: One Dark Pro Var Night

• 🔤 My font: Cascadia Code

---

I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

• Bluesky: https://bsky.app/profile/kevinpowell.co

• Codepen: https://codepen.io/kevinpowell/

• Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Anchor positioning is great at a lot more than just tooltips!

🔗 Links

• ✅ OddBird article I mentioned on fixes for when anchor positioning doesn't work: Here’s Why Your Anchor Positioning Isn’t Working: https://www.oddbird.net/2025/01/29/an...

• ✅ The nav video I mentioned at the end:  

•  Make this fun effect that follows your cur...  

• ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter

• 💬 Come hang out with other devs in my Discord Community

•  / discord  

• ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co

• 🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)

• 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses

• 👕 Buy a shirt: https://cottonbureau.com/people/kevin...

• 💖 Support me on Patreon:   / kevinpowell   or through YT memberships:    / @kevinpowell  

---

⌚ Timestamps

• 00:00 - Introduction

• 00:45 - Tethering to another element

• 06:45 - anchor-scope

• 10:24 - Tethering to more than one element #css

--

🧑‍💻 My editor: VS Code - https://code.visualstudio.com/

🌈 My theme: One Dark Pro Var Night

🔤 My font: Cascadia Code

---

I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel: Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

CSS is getting way more powerful than most people realize. From custom functions and conditionals to zero-JS carousels and scroll logic, here are 10 features you should know for 2026.

🔗 Relevant Links
corner-shape: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape
shape function: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape
Custom Select: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Scroll Markers: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::scroll-marker
Scroll State: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries
Text Box: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box
Sibling Index: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sibling-index
if() functions: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if
Custom Functions: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Custom_functions_and_mixins/Using_custom_functions



❤️ More about us
Radically better observability stack: https://betterstack.com/
Written tutorials: https://betterstack.com/community/
Example projects: https://github.com/BetterStackHQ

📱 Socials
Twitter: / https://x.com/betterstackhq
Instagram: / https://www.instagram.com/betterstackhq/
TikTok: / https://www.tiktok.com/@betterstack
LinkedIn: / https://www.linkedin.com/company/betterstack/

📌 Chapters:
0:00 Intro
0:13 corner-shape
0:48 shape function
1:44 Custom Selects
2:24 scroll-marker
3:12 scroll-state
4:26 stretch
5:05 text-box
6:31 sibling-index
7:10 if function
7:58 Custom Functions

If you’ve ever needed the positioning of an element to be connected (or anchored) to the position of another element, then you’ll be very excited about anchor positioning in CSS! It is new (as of the time of recording), but thankfully, we have a really good Polyfill, so we don’t have to worry about browser support!

🔗 Links
✅ Code from this video: https://codepen.io/kevinpowell/pen/po... (slightly different, and no polyfill being used here)
✅ Chrome for Developers blog article on anchor positioning: https://developer.chrome.com/blog/anc...
✅ MDN on Anchor Positioning: https://developer.mozilla.org/en-US/d...
✅ Popover Polyfill: https://github.com/oddbird/popover-po...
✅ Anchor positioning polyfill: https://github.com/oddbird/css-anchor...
✅ Browser support for popover: https://caniuse.com/mdn-api_htmleleme...
✅ Browser support for anchor positioning: https://caniuse.com/css-anchor-positi...
✅ I’ve got courses! https://kevinpowell.co/courses

⌚ Timestamps
00:00 - Introduction
00:33 - Turning our element into a popover
02:05 - Only change the display value when the popover is opened
03:25 - A few user agent styles you’ll probably want to overwrite
04:40 - Creating an anchor, and connecting an element to it
06:20 - Using the new anchor() function to position the element where you want
08:20 - Polyfills
10:15 - Change the positioning of the element when it runs out of room with @position-try
13:50 - Semantics
14:50 - Fading the out with allow-discrete
18:20 - Fading the menu in with @starting-style

--

Come hang out with other dev's in my Discord Community 💬   / discord  
Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch! 📺   / kevinpowellcss  

---
Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
📽️ Join as a channel member:    / @kevinpowell  
💖 Support me on Patreon:   / kevinpowell   or through YT memberships: Join this channel to get access to perks:    / @kevinpowell   ---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!