Рет қаралды 56,327
Links to all the demos we used are below 👇
Huge thanks to Adam Argyle for joining me with this one! Make sure to follow him! nerdy.dev/
- Twitter: / argyleink
- Mastodon: front-end.social/@argyleink
🔗 Links
:focus-visible codepen.io/argyleink/pen/YzMjmjR
:focus-within - codepen.io/kevinpowell/pen/ab... & codepen.io/kevinpowell/pen/jO...
@media (hover) codepen.io/argyleink/pen/oNOPvbm
fit-content() - codepen.io/kevinpowell/pen/xx...
object-fit codepen.io/argyleink/pen/JjVaPrx
aspect-ratio codepen.io/argyleink/pen/OJGoLBW
accent-color - (I’m cheating here) codepen.io/web-dot-dev/pen/Po...
caret-color - codepen.io/kevinpowell/pen/ab...
border-image codepen.io/t_afif/pen/vYbdVjb and www.smashingmagazine.com/2024...
scroll-padding & scroll-margin: codepen.io/kevinpowell/pen/eY...
scroll-snap codepen.io/collection/KpqBGW
overscroll-behavior codepen.io/argyleink/pen/ExEwMYY
gap - codepen.io/kevinpowell/pen/md...
columns - codepen.io/kevinpowell/pen/rN...
drop-shadow() codepen.io/argyleink/pen/RwOYbXG
matrix3d() codepen.io/argyleink/pen/ExJexZY and codepen.io/fta/pen/rNZrXp
backdrop-filter - codepen.io/kevinpowell/pen/Rw...
:any-link codepen.io/argyleink/pen/vYMzYxx
:empty - codepen.io/kevinpowell/pen/md...
:first-child & :last-child - codepen.io/kevinpowell/pen/Po...
list-style codepen.io/argyleink/pen/rNmzGzW
inset - codepen.io/kevinpowell/pen/qB...
⌚ Timestamps
00:00 - Introduction
00:49 - :focus-visible
01:34 - :focus-within
02:41 - hover media query
03:46 - fit-content()
05:06 - object-fit
05:53 - aspect-ratio
07:17 - accent-color
08:22 - caret-color
09:12 - border-image
10:49 - scroll-padding
11:58 - scroll-margin
13:12 - scroll-snap
15:08 - overscroll-behavior
16:36 - gap
18:26 - columns
20:08 - bonus: text-wrap pretty and balanced
20:59 - drop-shadow()
21:31 - matrix-3d()
22:52 - backdrop-filter
24:12 - :any-link
25:00 - :empty
26:28 - :last-child and :last-of-type
27:50 - custom list-style-types
28:35 - inset
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - 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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: 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!