Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

8,332 subscribers

19,234 views • 4 months ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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! 💪

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

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,631 views • 2 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.

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

426,308 views • 1 year ago

Add a little joy to your UI when removing an item. .removing-item .container { filter: blur(8px); opacity: 0; transform: scale(0.92); transition: filter 280ms ease-in, opacity 200ms ease-in, transform 280ms ease-in; } .removing-item { width: 0; transition: width 320ms cubic-bezier(0.2, 0, 0, 1) 60ms; }

Add a little joy to your UI when removing an item. .removing-item .container { filter: blur(8px); opacity: 0; transform: scale(0.92); transition: filter 280ms ease-in, opacity 200ms ease-in, transform 280ms ease-in; } .removing-item { width: 0; transition: width 320ms cubic-bezier(0.2, 0, 0, 1) 60ms; }

Kevin

120,061 views • 6 months 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 👇👨‍💻

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

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!

jhey ʕ•ᴥ•ʔ

104,137 views • 8 months ago

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

Kevin Grajeda

29,201 views • 1 year ago

UI tip: instead of using gaps in bordered lists, try hiding the borders next to the hovered item.

UI tip: instead of using gaps in bordered lists, try hiding the borders next to the hovered item.

Sebastiano Guerriero

32,620 views • 2 months ago

You can create a cool gooey effect by combining a blur and fade animations between icons with a high-contrast parent element

You can create a cool gooey effect by combining a blur and fade animations between icons with a high-contrast parent element

Kevin Grajeda

377,350 views • 1 year ago

CSS Clamp function 🌟 -> clamp() is a function in CSS that provides a concise way for combining both the min() and max() functions. ⚠ Note: This can be achieved by this also - min(100px, max(50%, 200px))

CSS Clamp function 🌟 -> clamp() is a function in CSS that provides a concise way for combining both the min() and max() functions. ⚠ Note: This can be achieved by this also - min(100px, max(50%, 200px))

Prasenjit

78,827 views • 2 years ago

Pokémon UNITE Internally in the shop will release on 16th, but internally as Item "release" time its set for today, so this new Item can be used on Tourney Mode since it has a rule for have all Items so can be used there. Also will show the Item in the Held Item Upgrade Menu, but since its not released you wont be able to purchase it. #PokemonUNITE #ポケモンユナイト #NintendoSwitch

Pokémon UNITE Internally in the shop will release on 16th, but internally as Item "release" time its set for today, so this new Item can be used on Tourney Mode since it has a rule for have all Items so can be used there. Also will show the Item in the Held Item Upgrade Menu, but since its not released you wont be able to purchase it. #PokemonUNITE #ポケモンユナイト #NintendoSwitch

ChicoEevee

25,770 views • 8 months ago

The Oxford comma (also known as the 'serial comma') is the comma that separates the second to last item in a list from a final item that is introduced by 'and' or 'or.' It is optional...but be aware that not using the serial comma can result in some ambiguity.

The Oxford comma (also known as the 'serial comma') is the comma that separates the second to last item in a list from a final item that is introduced by 'and' or 'or.' It is optional...but be aware that not using the serial comma can result in some ambiguity.

Merriam-Webster

173,307 views • 2 years ago

The Warp Ring is an item in Sonic Racing: CrossWorlds that can only be acquired via a gadget that gives it to the player. This item has been banned online since launch. Due to it's scarcity, it's likely this post is many peoples' first time seeing it in action.

The Warp Ring is an item in Sonic Racing: CrossWorlds that can only be acquired via a gadget that gives it to the player. This item has been banned online since launch. Due to it's scarcity, it's likely this post is many peoples' first time seeing it in action.

Semi Frequent Sonic Facts 💎✨

64,434 views • 4 months ago

I created this gooey text effect animation using View Transitions and the blur + contrast method

I created this gooey text effect animation using View Transitions and the blur + contrast method

Kevin Grajeda

172,510 views • 1 year ago

It also has a placeholder square that can be hidden, so that PNGs or Live2D models can be pinned to the placeholder, which lets the model hold onto them in a semi-convincing way. (The placeholder is sent offscreen when the item-holding toggle is off, to hide any pinned items)

It also has a placeholder square that can be hidden, so that PNGs or Live2D models can be pinned to the placeholder, which lets the model hold onto them in a semi-convincing way. (The placeholder is sent offscreen when the item-holding toggle is off, to hide any pinned items)

Graves

12,156 views • 1 year ago

every time i go to post my take on :hover safety triangles for context menus, someone has just posted one... 🤦‍♂️ guess we're waiting again... it isn't a hard thing to implement though: - clip a pseudo element off the menu - use pointer delta instead of a timeout

every time i go to post my take on :hover safety triangles for context menus, someone has just posted one... 🤦‍♂️ guess we're waiting again... it isn't a hard thing to implement though: - clip a pseudo element off the menu - use pointer delta instead of a timeout

jhey ʕ•ᴥ•ʔ

98,663 views • 8 months ago

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`

Adam Argyle

34,632 views • 1 year ago

How have I never noticed that macOS' menu bar "shares" space between menu items for the hover state? I don't think I've ever seen this before. Normally I'd expect each item to have its own reserved space for the hover state.

How have I never noticed that macOS' menu bar "shares" space between menu items for the hover state? I don't think I've ever seen this before. Normally I'd expect each item to have its own reserved space for the hover state.

Anthony Hobday

383,494 views • 2 years ago