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 hoveredshow more

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

💡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:show more

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.show more

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; }show more

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

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!show more

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

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 👀✨show more

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

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))show more

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 #ポケモンユナイト #NintendoSwitchshow more

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.show more

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.show more

I created this gooey text effect animation using View... Transitions and the blur + contrast methodshow more

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)show more

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 timeoutshow more

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

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.show more