Loading video...

Video Failed to Load

Go Home

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

ChallengesCss's profile picture

CSS by T. Afif

13,232 subscribers

12,042 views • 1 year ago •via X (Twitter)

Science & TechnologyEducation#codepenchallenge
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.
0:19

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 views • 5 months ago

Another (cool) demo where I am using the same technique. Demo: via CodePen.IO The border will smoothly stop (always) at the same position on hover. #codepenchallenge
0:19

Another (cool) demo where I am using the same technique. Demo: via CodePen.IO The border will smoothly stop (always) at the same position on hover. #codepenchallenge

CSS by T. Afif

11,968 views • 1 year ago

I made a version of this using only modern CSS. 👀
0:13

I made a version of this using only modern CSS. 👀

H. Kyle Foster

64,815 views • 7 months ago

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,341 views • 3 years ago

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗
0:16

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗

Ahmad Shadeed

38,739 views • 9 months ago

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 views • 3 years ago

table of contents marker w/ modern css 🧑‍🍳 .toc { scroll-target-group: auto; } a:target-current { anchor-name: --active; } .toc::after { position-anchor: --active; top: anchor(top); } fun progressive enhancement, no js 🤙
0:15

table of contents marker w/ modern css 🧑‍🍳 .toc { scroll-target-group: auto; } a:target-current { anchor-name: --active; } .toc::after { position-anchor: --active; top: anchor(top); } fun progressive enhancement, no js 🤙

jhey ʕ•ᴥ•ʔ

176,874 views • 5 months ago

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇
0:14

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

167,991 views • 2 years ago

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
0:15

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 views • 8 months ago

CSS view transitions + anchor positioning now let you easily build smooth SPA-like navigation on a good old static website!
0:11

CSS view transitions + anchor positioning now let you easily build smooth SPA-like navigation on a good old static website!

Benjamin De Cock

137,854 views • 2 months ago

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,769 views • 8 months ago

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,528 views • 3 years ago

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

425,266 views • 8 months ago

Oh yeah and Samsung now has cool features like taking photos using gestures on the #GalaxyRing this also works for snoozing alarms. Only with a Galaxy Phone and Watch. #GalaxyUnpacked
0:15

Oh yeah and Samsung now has cool features like taking photos using gestures on the #GalaxyRing this also works for snoozing alarms. Only with a Galaxy Phone and Watch. #GalaxyUnpacked

Anshel Sag

60,823 views • 1 year ago

What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀
0:14

What we can do with modern CSS is impressive! 🤩 A cool demo is in progress. Stay tuned! 👀

CSS by T. Afif

12,111 views • 19 days ago

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔
0:13

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

Surjith S M ✪

57,984 views • 3 years ago

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`
0:13

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`

Adam Pietrasiak

48,723 views • 6 months ago

Return to an iconic FPS with Crysis 3 Remastered, optimized for modern systems. Humble Choice for May features this and more great games!
0:15

Return to an iconic FPS with Crysis 3 Remastered, optimized for modern systems. Humble Choice for May features this and more great games!

Humble Bundle

25,230 views • 12 days ago

Got carried away with this interactive module for breaking down the CSS mask-image property
0:16

Got carried away with this interactive module for breaking down the CSS mask-image property

rauno

30,879 views • 10 months ago

created this animated vestaboard, made using Next.js and Tailwind CSS
0:11

created this animated vestaboard, made using Next.js and Tailwind CSS

OPM

12,995 views • 6 months ago