💡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

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

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

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

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

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

Detect small objects using @Ultralytics YOLO26 + SAHI 😍... A perfect combo when speed isn’t the priority, but accuracy is everything, especially when detecting tiny or distant objects in your images. learn how it works 👇 #AI #objectdetection #trafficanalysisshow more

How to create a scientific diagram in seconds? Follow... these 3 simple steps ⤵️ 1. Go to 2. Click on diagrams 3. Enter the requirements of your diagram. SciSpace will create a perfect diagram for you. You can modify it using agentic AIshow more