messin' with css frosted + saturated borders using background-clip... + backdrop-filter 👨‍🍳show more

backdrop-filter + svg-filter #css

The Popover API puts your UI on a separate... top layer so you can stop fighting with focus management. Plus backdrop styling so short it fits here: [popover]::backdrop { background: rgb(52, 168, 83); backdrop-filter: blur(3px); } Build more with less code→show more

quantity picker w/ [type=number] 👨‍🍳 quantity-picker:has(input:invalid):not(:focus-within) { animation: shake;... background: hsl(0 100% 50% / 0.14); } aim to guide, not distract, using form control validation css 🤙 (cooler detail is how the num track works though 👀)show more

Need a gradient border? Use CSS background-clip 🤙 input... { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }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

glow with care 👨‍🍳 stack css drop-shadow() with increasing... blur and saturation + brighten the text color one shadow ≠ glowshow 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

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

one way w/ css 🪄 stack an image 2x... filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }show more

reminder that you can also create lighting effects with... a little css + svg filters <feSpecularLighting> + <fePointLight> bound to pointer position 👨‍🍳show more

💡 Do you know about the `clip` value? In... CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:show more

That SVG filter is the whole reason this CSS... scroll animation is even possible 🙏 (now with improved timing ✨)show more

Create responsive footer with subscribe form using CSS and... HTML 🚀 Code in the comments 🧑‍💻show more

Responsive table with resizable columns using HTML, CSS and... JavaScript 🚀 Code in the comments 🧑‍💻show more

🎮 New CSS Game! What about a CSS game... that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩show more

Women using the 'man' filter, best with sound. 😂

I've created a simple website that allows you to... play with squircles using modern CSS `corner-shape`show more

`autofill` on inputs is ugly by default the background... bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.show more

an alternative approach to console animation that doesn't hijack... the console 1. inline CSS animation into an SVG 2. style console message with background-image 3. use SVG as the background-image 🚀 console​.info( "%ccome cook", "background-image: url(/animated.svg);" )show more