Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,285 subscribers

285,985 Aufrufe • vor 6 Monaten •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

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move
0:18

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move

jhey ʕ•ᴥ•ʔ

200,156 Aufrufe • vor 6 Monaten

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; }
0:18

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; }

jhey ʕ•ᴥ•ʔ

82,376 Aufrufe • vor 2 Jahren

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }
0:19

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jhey ʕ•ᴥ•ʔ

111,340 Aufrufe • vor 1 Jahr

I made an HTML/DOM viewer you can paste into your console to view or debug any website in 3D. Choose from random/gradient/clear colors or whether layers have sides. You can save it as a bookmarklet so it's 1 click away. It's just a tiny IIFE JS function.
0:18

I made an HTML/DOM viewer you can paste into your console to view or debug any website in 3D. Choose from random/gradient/clear colors or whether layers have sides. You can save it as a bookmarklet so it's 1 click away. It's just a tiny IIFE JS function.

Orion Reed

863,613 Aufrufe • vor 2 Jahren

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇
0:18

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

267,557 Aufrufe • vor 3 Jahren

Old: just slap a gradient on it New: just use a shader… shader it all
0:11

Old: just slap a gradient on it New: just use a shader… shader it all

Charles Patterson

198,664 Aufrufe • vor 4 Monaten

Tips and tricks for creating a gradient on cake frosting 😍😍
0:16

Tips and tricks for creating a gradient on cake frosting 😍😍

ayang 💫

833,693 Aufrufe • vor 5 Monaten

Framer February → Day 1 ✨ A quick and easy way to add a smooth, animated, gradient border to a card in Framer. Let's get started ↓
0:11

Framer February → Day 1 ✨ A quick and easy way to add a smooth, animated, gradient border to a card in Framer. Let's get started ↓

Aleks

184,317 Aufrufe • vor 3 Jahren

Langevin Monte Carlo allows you to draw samples from a probability distribution using its log gradient ∇ log p(x). By performing a sort of gradient ascent with noise you can navigate around the distribution. Langevin MC is heavily related to modern diffusion models.
0:19

Langevin Monte Carlo allows you to draw samples from a probability distribution using its log gradient ∇ log p(x). By performing a sort of gradient ascent with noise you can navigate around the distribution. Langevin MC is heavily related to modern diffusion models.

Alec Helbling

96,842 Aufrufe • vor 1 Jahr

Dither / halftone effects tutorial in After effects (No plugins needed) 1. Create a Shape Layer (dot/circle) 2. Pre-comp it → add CC Tiler 3. Import your image/video 4. Add Card Dance to an Adjustment Layer 5. Set Gradient Layer 1 to your footage 6. Set X & Y Intensity to 1 Adjust Rows & Columns to taste
0:17

Dither / halftone effects tutorial in After effects (No plugins needed) 1. Create a Shape Layer (dot/circle) 2. Pre-comp it → add CC Tiler 3. Import your image/video 4. Add Card Dance to an Adjustment Layer 5. Set Gradient Layer 1 to your footage 6. Set X & Y Intensity to 1 Adjust Rows & Columns to taste

Jestin

13,304 Aufrufe • vor 26 Tagen

Oldies but goldies: Y Nesterov, A method for solving a convex programming problem with convergence rate O(1/k^2). Improves the 1/k rate of vanilla gradient descent to 1/k^2.
0:10

Oldies but goldies: Y Nesterov, A method for solving a convex programming problem with convergence rate O(1/k^2). Improves the 1/k rate of vanilla gradient descent to 1/k^2.

Gabriel Peyré

47,616 Aufrufe • vor 1 Jahr

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;
0:13

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

209,685 Aufrufe • vor 25 Tagen

You can use the sniper to skip basically any door with a lock on the other side. #ResidentEvil4Remake
0:16

You can use the sniper to skip basically any door with a lock on the other side. #ResidentEvil4Remake

Bahroo

459,896 Aufrufe • vor 3 Jahren

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 4 Monaten

Little simple trick i like using Screenshot a textlabel Bloom filter it externally, just a quick layer in gimp Animate a gradient, make a "shine" layer. Will work from any angle really #robloxdev #roblox
0:18

Little simple trick i like using Screenshot a textlabel Bloom filter it externally, just a quick layer in gimp Animate a gradient, make a "shine" layer. Will work from any angle really #robloxdev #roblox

PoptartNoahh

29,058 Aufrufe • vor 7 Monaten

✨ Mini #Aseprite Tutorial: use the Gradient option for a dynamic Dither brush! ✨ #dinchenix #pixelart
0:10

✨ Mini #Aseprite Tutorial: use the Gradient option for a dynamic Dither brush! ✨ #dinchenix #pixelart

Dinchen

23,618 Aufrufe • vor 5 Monaten

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.
0:15

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.

Leon Lin

72,100 Aufrufe • vor 3 Monaten

How I built with Claude 👇 1. CSS linear-gradient animated backgrounds create that deep blue oceanic atmosphere with zero images 2. Intersection Observer API staggers each section headline in as users scroll through the content 3.Use a fixed sticky nav with backdrop-filter blur signals authority and keeps users oriented 4. Save this if you want a corporate site that makes billion dollar clients take you seriously 🌐
0:14

How I built with Claude 👇 1. CSS linear-gradient animated backgrounds create that deep blue oceanic atmosphere with zero images 2. Intersection Observer API staggers each section headline in as users scroll through the content 3.Use a fixed sticky nav with backdrop-filter blur signals authority and keeps users oriented 4. Save this if you want a corporate site that makes billion dollar clients take you seriously 🌐

FHILY👑

135,817 Aufrufe • vor 1 Monat

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,332 Aufrufe • vor 1 Monat

if verso can drop his piano as a gradient attack #ClairObscurExpedition33 #Verso
0:11

if verso can drop his piano as a gradient attack #ClairObscurExpedition33 #Verso

Aal

36,595 Aufrufe • vor 6 Monaten