💡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

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

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

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

💡 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

There has never been an easier time in history... to start a faceless YouTube channel you can literally create any style of video using Claude + Higgsfield MCP… here's how you can use it: first you upload a reference video that is already working then the Higgsfield video analysis skill breaks down everything about it: style, framing, how long each beat and scene runs it then takes that style and generates a new character for your video, and gives you 4 options to pick from you pick one and give it your storyline or let it create a new proven storyline from your reference video every frame for the video gets generated with Nano Banana Pro using your character so it stays fully consistent throughout then it stitches all the frames together automatically and adds the voiceover on top you can literally make videos in 5-15 minutes because of this what a time to be alive..show more

If you are using an if statement inside a... for loop, did you know there's a better way of doing this is Swift? I'm talking about the where clause. Using the where clause in a for loop can provide several benefits over using an if statement inside a for loop: Readability: It explicitly states the condition that must be met for an element to be processed, making the purpose of the loop clearer to anyone reading the code. Efficiency: When using a where clause, the filtering of elements is done at the level of the sequence, which can be more efficient than filtering within the loop with an if statement. Brevity: Using a where clause often results in more concise code, as it eliminates the need for an if statement and associated braces. This can make the code more manageable and easier to maintain.show more

Btw you can always add the top/bottom fadeout effect... with a scrollable list just don't hardcore it Plus it does't need any Js just raw css and it works like charmshow more

King Tutankhamun's Lotus Cup is stealth art. In daylight... it is a simple alabaster lotus. Backlight it and a hidden royal vignette appears. The rim wishes: may your ka live, millions of years, north wind, happiness. Cup, lamp, or afterlife code?show more

I’ve seen a handful of apps using progressive blurs... to transition content off-screen or behind elements and they often end up looking messy and making the exiting content a focal point. One way you can avoid this and still make a nice transition is to reduce the max blur radius, and combine it with a gradient fade-out.show more

⚒️Editing Preview⚒️ A lot of motion in a video... can be crucial specially in our current age and with the current algorithm. It is what is called a "Zoomer/Brainrot Edit" ! While it can be daunting , using it can be helpful to create a seamless motion effect between clips too !show more