Loading video...

Video Failed to Load

Go Home

💡 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.

ChallengesCss's profile picture

CSS by T. Afif

14,067 subscribers

82,668 views • 7 months ago •via X (Twitter)

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! 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,924 views • 9 months ago

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,042 views • 1 year 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

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 views • 3 months ago

💡 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 views • 2 months ago

💡 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,194 views • 1 year ago

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.
0:17

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.

一丝

32,865 views • 3 months 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 • 9 months ago

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.
0:17

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.

Dillion

324,699 views • 2 years ago

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 views • 2 years ago

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻
0:12

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻

David Mráz

16,879 views • 1 year ago

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer
0:11

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer

Aceternity

43,391 views • 2 years ago

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️
0:14

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️

FHILY👑

117,941 views • 1 month ago

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇
0:18

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

267,557 views • 3 years ago

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }
0:14

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Gabriel

85,400 views • 1 month ago

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

78,350 views • 1 year ago

Prompt : A realistic cinematic scene begins in a vast open field under a warm golden sky during late afternoon. A man dressed in a dark suit stands in the foreground, holding a modern recurve bow. His posture is steady and focused, breath controlled, eyes locked on a distant archery target placed far on the horizon. The environment feels quiet and expansive, with subtle wind moving the grass and soft sunlight creating long shadows. As he releases the string, the arrow launches forward with a sharp snap. The camera immediately accelerates and locks onto the arrow mid flight. The camera tracks directly behind and slightly beside the arrow, maintaining perfect alignment as it cuts through the air. Motion blur surrounds the background while the arrow remains sharp and centered. The sound of rushing wind intensifies as the arrow travels straight and true. The target grows rapidly larger. In the final seconds, the camera closes in tightly as the arrow strikes the bull’s eye dead center. End on an extreme close up of the arrow embedded in the red center, vibrating slightly, with crisp impact sound and dramatic silence.
0:10

Prompt : A realistic cinematic scene begins in a vast open field under a warm golden sky during late afternoon. A man dressed in a dark suit stands in the foreground, holding a modern recurve bow. His posture is steady and focused, breath controlled, eyes locked on a distant archery target placed far on the horizon. The environment feels quiet and expansive, with subtle wind moving the grass and soft sunlight creating long shadows. As he releases the string, the arrow launches forward with a sharp snap. The camera immediately accelerates and locks onto the arrow mid flight. The camera tracks directly behind and slightly beside the arrow, maintaining perfect alignment as it cuts through the air. Motion blur surrounds the background while the arrow remains sharp and centered. The sound of rushing wind intensifies as the arrow travels straight and true. The target grows rapidly larger. In the final seconds, the camera closes in tightly as the arrow strikes the bull’s eye dead center. End on an extreme close up of the arrow embedded in the red center, vibrating slightly, with crisp impact sound and dramatic silence.

Umesh

296,008 views • 5 months ago

Introducing NextUI v2.0! 🎉 Now with Tailwind CSS integration, new components, enhanced customizability, & more. Dive into the features in our latest blog post → ** As always, we would love to hear your thoughts and feedback ❤️
0:18

Introducing NextUI v2.0! 🎉 Now with Tailwind CSS integration, new components, enhanced customizability, & more. Dive into the features in our latest blog post → ** As always, we would love to hear your thoughts and feedback ❤️

HeroUI

151,522 views • 3 years ago

Chrome 146 is stable 🚀 We’re shipping features that move more logic out of your JavaScript and into the browser → ✨ Scroll-triggered animations (declarative CSS!) 🛡️ The Sanitizer API for XSS-free apps 🧩 Scoped custom element registries
0:12

Chrome 146 is stable 🚀 We’re shipping features that move more logic out of your JavaScript and into the browser → ✨ Scroll-triggered animations (declarative CSS!) 🛡️ The Sanitizer API for XSS-free apps 🧩 Scoped custom element registries

Chrome for Developers

35,752 views • 3 months ago