Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 👇👨‍💻

davidm_ml's profile picture

David Mráz

35,815 subscribers

16,879 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,769 Aufrufe • vor 1 Jahr

Some hover states might be hurting your website's mobile experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️
0:16

Some hover states might be hurting your website's mobile experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️

Ali

26,692 Aufrufe • vor 4 Monaten

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered
0:10

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered

daniel petho

18,843 Aufrufe • vor 1 Monat

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪
0:15

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪

jhey ʕ•ᴥ•ʔ

298,163 Aufrufe • vor 3 Jahren

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

66,034 Aufrufe • vor 1 Jahr

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀
0:16

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀

FHILY👑

97,613 Aufrufe • vor 3 Monaten

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 Aufrufe • vor 3 Monaten

You might’ve seen this bug before where the hover state keeps flickering. The fix is to separate the trigger from the effect. Listen for hovers on the parent, but animate a child element instead. This ensures that the hover area stays consistent.
0:17

You might’ve seen this bug before where the hover state keeps flickering. The fix is to separate the trigger from the effect. Listen for hovers on the parent, but animate a child element instead. This ensures that the hover area stays consistent.

Emil Kowalski

667,021 Aufrufe • vor 7 Monaten

Charity Coins are ready to trade on Terminal - Charity Coin icons - View Charity Creator Fee breakdowns - Charity details on hover in new pairs feed Make the switch to get first access to new pump fun updates 👇
0:14

Charity Coins are ready to trade on Terminal - Charity Coin icons - View Charity Creator Fee breakdowns - Charity details on hover in new pairs feed Make the switch to get first access to new pump fun updates 👇

Terminal

110,778 Aufrufe • vor 4 Monaten

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,904 Aufrufe • vor 1 Jahr

🎉 introducing: magnetic hover for Framer use this to create a smooth, magnetic pull effect that adds an interactive touch to your designs. comment "MAGNETIC" and I'll send you the component :)
0:13

🎉 introducing: magnetic hover for Framer use this to create a smooth, magnetic pull effect that adds an interactive touch to your designs. comment "MAGNETIC" and I'll send you the component :)

Framer University

20,981 Aufrufe • vor 1 Jahr

New feature in Plumber: Show the decor's name on hover and press a key to place another instance.
0:15

New feature in Plumber: Show the decor's name on hover and press a key to place another instance.

Peter Yu

117,271 Aufrufe • vor 9 Monaten

It's almost the emd of 2025 and I am yet to see someone make something new and good, all I see is people attempting to recreate something else which is not that impressive in the first place. Go on, use an AI not trained on the any anime to generate this:
0:18

It's almost the emd of 2025 and I am yet to see someone make something new and good, all I see is people attempting to recreate something else which is not that impressive in the first place. Go on, use an AI not trained on the any anime to generate this:

VIKARE

46,875 Aufrufe • vor 10 Monaten

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

Not a criticism of Figma, but of common interaction design: some interactions feel poor but are the accepted standard. I think the "resize" hover target on this panel is ~1px. I have good motor skills, and often overshoot. This is an action I do many times a day.
0:11

Not a criticism of Figma, but of common interaction design: some interactions feel poor but are the accepted standard. I think the "resize" hover target on this panel is ~1px. I have good motor skills, and often overshoot. This is an action I do many times a day.

Anthony Hobday

33,477 Aufrufe • vor 1 Jahr

If you stand on a Stick or Lid then hover high enough over the water, Strong Arms, Steelheads, and Salty Tongues that are aggroed on you will walk off the edge.
0:15

If you stand on a Stick or Lid then hover high enough over the water, Strong Arms, Steelheads, and Salty Tongues that are aggroed on you will walk off the edge.

Reyko

12,819 Aufrufe • vor 7 Tagen

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:
0:16

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:

Ahmad Shadeed

25,953 Aufrufe • vor 2 Jahren

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?
0:14

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?

Camden @ Designownow

15,547 Aufrufe • vor 10 Monaten