正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 4 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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 次观看 • 3 年前

💡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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 6 个月前

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 次观看 • 1 年前

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 次观看 • 8 个月前

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 次观看 • 1 年前

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 次观看 • 2 个月前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 8 个月前

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 次观看 • 2 年前

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 次观看 • 4 个月前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 8 个月前

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 次观看 • 1 年前

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 次观看 • 2 年前