Загрузка видео...

Не удалось загрузить видео

На главную

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

nonzeroexitcode's profile picture

daniel petho

8,332 subscribers

19,234 просмотров • 4 месяцев назад •via X (Twitter)

Наука и технологии
LIVE

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! 💪
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 просмотров • 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:
0:15

💡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.
0:12

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; }
0:18

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 👇👨‍💻
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,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!
0:18

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 👀✨
0:14

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.
0:14

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
0:14

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))
0:15

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
0:11

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.
0:11

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.
0:14

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
0:13

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)
0:19

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
0:18

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)`
0:15

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.
0:11

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 лет назад