💡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

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

I made a Chrome extension that turns localhost into... a visual editor for Cursor. Click any element on your dev site → describe what you want changed → it automatically sends the edit request to Cursor in the background with the element context. Here's how it works...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

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

If elements ever shift unexpectedly by a few pixels... during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.show more

This one CSS property will fix your z-index headache.... In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️show more

The "Backlight Off" button in Super Mario 64 DS... is completely broken when the game is played on a Nintendo 3DS series system. Instead of turning off the backlight, it becomes a "Graphics Off" button since the backlight remains on and it is the entire game that disappears instead.show more

Tailwind CSS Tip (24/30) ✨ You can create a... transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉show more

Do you know about the filter property in CSS?... Among many other awesome options, it allows you to easily add a black and white effect on images.show more

You can create bokeh using Camera lens blur #aftereffects

This printing effect? You can literally do this in... two steps. 1️⃣ Choose a photo you love 2️⃣ Upload it when you select the “Copy machine” video effect on Show us with your version using #MadeWithCanvaAIshow more

💡 CSS Tip! Get the scroll progress of the... page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇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

💡 CSS Tip! Do you know that One-Time password... field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.show more

We've heard you want better blur support in Compose!... The latest #JetpackCompose alpha introduces Progressive Blur for layers - allowing you to apply a non-uniform blur to your content (not backdrop just yet 😉) ! You can apply vertical, horizontal, radial gradients or even a custom blur intensity mask driven by a shader. 🪄 Available for API 33+show more

Tailwind CSS Tip ✨ You can create a floating... input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔show more