Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 4 ay önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 3 yıl önce

💡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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce