Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

boltdotnew's profile picture

bolt.new

116,048 subscribers

368,848 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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...
0:18

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

pav

967,888 Aufrufe • vor 8 Monaten

You can create a cool gooey effect by combining a blur and fade animations between icons with a high-contrast parent element
0:14

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

Kevin Grajeda

375,731 Aufrufe • vor 1 Jahr

🤯 Blur content in React Native Android - no library! Just use filter: blur(10px) directly in your styles. ✅ Blurs element content (text, images, etc.) ❌ Not a backdrop blur 📌 iOS equivalent: CIGaussianBlur via CIFilter 📌 Web equivalent: filter: blur() Requires RN 0.77+ or Expo 53+. React Native docs : ⚡ Demo + code in thread 👇
0:11

🤯 Blur content in React Native Android - no library! Just use filter: blur(10px) directly in your styles. ✅ Blurs element content (text, images, etc.) ❌ Not a backdrop blur 📌 iOS equivalent: CIGaussianBlur via CIFilter 📌 Web equivalent: filter: blur() Requires RN 0.77+ or Expo 53+. React Native docs : ⚡ Demo + code in thread 👇

Arunabh Verma

16,505 Aufrufe • vor 9 Monaten

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!
0:18

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!

jhey ʕ•ᴥ•ʔ

102,613 Aufrufe • vor 3 Monaten

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.
0:11

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.

Jakub Krehel

139,065 Aufrufe • vor 1 Monat

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. ❤️
0:19

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. ❤️

Ali

16,738 Aufrufe • vor 1 Monat

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.
0:11

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.

Supper Mario Broth

368,039 Aufrufe • vor 2 Jahren

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.
0:10

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.

andrej

160,866 Aufrufe • vor 3 Jahren

You can create bokeh using Camera lens blur #aftereffects
0:14

You can create bokeh using Camera lens blur #aftereffects

Seter

45,993 Aufrufe • vor 8 Monaten

This is a great question! :D Adding drop shadows and a wiggle effect to images in your video or having a moving background can make them feel more natural and alive. Let me show you the difference ✨ Here's how to add it in Premiere Pro and Capcut :D
0:10

This is a great question! :D Adding drop shadows and a wiggle effect to images in your video or having a moving background can make them feel more natural and alive. Let me show you the difference ✨ Here's how to add it in Premiere Pro and Capcut :D

Shindari 👻 ❄

44,069 Aufrufe • vor 1 Jahr

💡 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.
0:14

💡 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.

CSS by T. Afif

25,194 Aufrufe • vor 1 Jahr

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.
0:12

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.

Soren

425,266 Aufrufe • vor 8 Monaten

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 🔔
0:17

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 🔔

Surjith S M ✪

173,050 Aufrufe • vor 3 Jahren

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?
0:15

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?

History Content

21,693 Aufrufe • vor 4 Monaten

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.
0:18

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.

Everton Carneiro

23,416 Aufrufe • vor 2 Jahren

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 charm
0:13

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 charm

Guri

183,752 Aufrufe • vor 7 Monaten

Stop using Blender. Stop using Element 3D. I found the best website where you can create device animations for free.. It’s super easy to use, feels premium and save hours of time. Want to see what it is? Follow and comment “C” and I’ll send it over!
0:14

Stop using Blender. Stop using Element 3D. I found the best website where you can create device animations for free.. It’s super easy to use, feels premium and save hours of time. Want to see what it is? Follow and comment “C” and I’ll send it over!

Rowaifa

56,248 Aufrufe • vor 1 Jahr

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔
0:13

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

Surjith S M ✪

57,984 Aufrufe • vor 3 Jahren