Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

ChallengesCss's profile picture

CSS by T. Afif

14,082 subscribers

25,687 Aufrufe • vor 7 Monaten •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

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀
0:33

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀

CSS by T. Afif

11,611 Aufrufe • vor 2 Monaten

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,412 Aufrufe • vor 7 Monaten

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,851 Aufrufe • vor 3 Jahren

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS
2:35

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,237 Aufrufe • vor 1 Jahr

💡 CSS Tip! In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀 No one can memorize them all, so I've created an interactive demo from where you can get the code.
0:46

💡 CSS Tip! In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀 No one can memorize them all, so I've created an interactive demo from where you can get the code.

CSS by T. Afif

43,046 Aufrufe • vor 10 Monaten

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩
0:36

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩

CSS by T. Afif

1,201,004 Aufrufe • vor 6 Monaten

Nice little weekend project - Pure #CSS Pixar lamp. 💡 All of the axes movement is set using custom properties, so the motion can be easily animated with property. 😎 Live demo and full code CodePen.IO:
0:28

Nice little weekend project - Pure #CSS Pixar lamp. 💡 All of the axes movement is set using custom properties, so the motion can be easily animated with property. 😎 Live demo and full code CodePen.IO:

Amit Sheen

14,456 Aufrufe • vor 2 Jahren

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯
0:29

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Devon Govett

98,021 Aufrufe • vor 2 Jahren

This kinda sums up better what CSS offset-path gives you 🏎️ A responsive way to animate an element along the perimeter of another 🎬 Use the rect() value to control the inset of that path ✨ And the great thing is, it's responsive 🤙
0:31

This kinda sums up better what CSS offset-path gives you 🏎️ A responsive way to animate an element along the perimeter of another 🎬 Use the rect() value to control the inset of that path ✨ And the great thing is, it's responsive 🤙

jhey ʕ•ᴥ•ʔ

71,497 Aufrufe • vor 2 Jahren

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅
0:58

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

Cyd Stumpel

10,174 Aufrufe • vor 1 Jahr

The future of gaming is here, and it's powered by Sui
1:15

The future of gaming is here, and it's powered by Sui

Adeniyi.sui

67,553 Aufrufe • vor 1 Jahr

I have obtained exclusive never-before-seen footage from Steve and Dani’s 2nd date: The gentleman seated next to them wore a “Two Seater” shirt with an arrow pointing up and an arrow pointing down The man proudly explained to a confused Steve and Dani the meaning of his shirt
0:35

I have obtained exclusive never-before-seen footage from Steve and Dani’s 2nd date: The gentleman seated next to them wore a “Two Seater” shirt with an arrow pointing up and an arrow pointing down The man proudly explained to a confused Steve and Dani the meaning of his shirt

Ohio’s Tate

296,749 Aufrufe • vor 2 Monaten

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️
0:30

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️

jhey ʕ•ᴥ•ʔ

46,885 Aufrufe • vor 1 Jahr

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

184,718 Aufrufe • vor 9 Monaten

‘Inside PlaqueBoyMax’s First Show’, an exclusive interview by Complex News! "The performance shit is so cool, cause you really get to feel the energy. It's not just through a screen; it's real life… and then combining the two is crazy."
1:33

‘Inside PlaqueBoyMax’s First Show’, an exclusive interview by Complex News! "The performance shit is so cool, cause you really get to feel the energy. It's not just through a screen; it's real life… and then combining the two is crazy."

PlaqueBoyMaxUpdates

61,758 Aufrufe • vor 1 Jahr

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!
0:27

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,591 Aufrufe • vor 1 Jahr

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.
2:55

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,496 Aufrufe • vor 1 Jahr