Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the...

ChallengesCss's profile picture

CSS by T. Afif

14,062 subscribers

35,659 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().
0:10

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

CSS by T. Afif

22,524 Aufrufe • vor 6 Monaten

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.
0:14

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,205 Aufrufe • vor 1 Jahr

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,392 Aufrufe • vor 3 Jahren

Made this 404 error page just using CSS ✅ Code 👇
0:13

Made this 404 error page just using CSS ✅ Code 👇

Atharva ☄️

190,551 Aufrufe • vor 3 Jahren

Use the scroll-padding CSS property when using a scroll fade so your items don't get stuck in the fade region. Bonus: It also makes clicking through each option way more convenient!
0:14

Use the scroll-padding CSS property when using a scroll fade so your items don't get stuck in the fade region. Bonus: It also makes clicking through each option way more convenient!

balint

19,996 Aufrufe • vor 4 Monaten

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,247 Aufrufe • vor 3 Jahren

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉
0:12

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉

Surjith S M ✪

45,134 Aufrufe • vor 3 Jahren

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan
0:16

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

15,635 Aufrufe • vor 2 Jahren

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩
0:17

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

CSS by T. Afif

13,763 Aufrufe • vor 2 Jahren

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)
0:14

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

CSS by T. Afif

32,338 Aufrufe • vor 4 Monaten

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.
0:10

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.

Tushar

12,555 Aufrufe • vor 2 Jahren

💡 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 Aufrufe • vor 10 Monaten

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 ʕ•ᴥ•ʔ

168,050 Aufrufe • vor 3 Jahren

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔
0:17

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔

Surjith S M ✪

173,101 Aufrufe • vor 3 Jahren

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

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

CSS by T. Afif

12,178 Aufrufe • vor 1 Jahr

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
0:17

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

121,066 Aufrufe • vor 2 Jahren

Quick demo of this CSS-driven configuration coming in Tailwind CSS v4 — creating a new `font-comic` utility by just creating a new CSS variable under our new `@​theme` directive. No JS configuration file, all the same theme customization flexibility 🤩
0:16

Quick demo of this CSS-driven configuration coming in Tailwind CSS v4 — creating a new `font-comic` utility by just creating a new CSS variable under our new `@​theme` directive. No JS configuration file, all the same theme customization flexibility 🤩

Adam Wathan

95,439 Aufrufe • vor 2 Jahren