Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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 🤙

jhey ʕ•ᴥ•ʔ

146,382 subscribers

286,399 görüntüleme • 8 ay önce •via X (Twitter)

Eğitim Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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 görüntüleme • 8 ay önce

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.

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

864,126 görüntüleme • 2 yıl önce

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! 👇

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,645 görüntüleme • 3 yıl önce

Use CSS @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 to unlock things like > Animated conic gradients > Rotating borders, loaders > Hover transition on gradient stops the regular --𝚊𝚗𝚐𝚕𝚎 variable doesn't work with animating gradient stops because CSS has to idea how to interpolate it @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 fixes that with , and more @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 --𝚊𝚗𝚐𝚕𝚎 { 𝚜𝚢𝚗𝚝𝚊𝚡: ' '; 𝚒𝚗𝚑𝚎𝚛𝚒𝚝𝚜: 𝚏𝚊𝚕𝚜𝚎; 𝚒𝚗𝚒𝚝𝚒𝚊𝚕-𝚟𝚊𝚕𝚞𝚎: 𝟶𝚍𝚎𝚐; } .𝚌𝚊𝚛𝚍 { --𝚊𝚗𝚐𝚕𝚎: 𝟶𝚍𝚎𝚐; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚕𝚒𝚗𝚎𝚊𝚛-𝚐𝚛𝚊𝚍𝚒𝚎𝚗𝚝( 𝚟𝚊𝚛(--𝚊𝚗𝚐𝚕𝚎), #𝟹𝟾𝚋𝚍𝚏𝟾, #𝟶𝚎𝚊𝟻𝚎𝟿, #𝟸𝟻𝟼𝟹𝚎𝚋, #𝟷𝚎𝟺𝟶𝚊𝚏 ); 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: --𝚊𝚗𝚐𝚕𝚎 𝟶.𝟾𝚜 𝚎𝚊𝚜𝚎; } .𝚌𝚊𝚛𝚍:𝚑𝚘𝚟𝚎𝚛 { --𝚊𝚗𝚐𝚕𝚎: 𝟺𝟻𝚍𝚎𝚐; } Defaults to initial value so you don't have to set them everytime

Use CSS @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 to unlock things like > Animated conic gradients > Rotating borders, loaders > Hover transition on gradient stops the regular --𝚊𝚗𝚐𝚕𝚎 variable doesn't work with animating gradient stops because CSS has to idea how to interpolate it @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 fixes that with , and more @𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚢 --𝚊𝚗𝚐𝚕𝚎 { 𝚜𝚢𝚗𝚝𝚊𝚡: ' '; 𝚒𝚗𝚑𝚎𝚛𝚒𝚝𝚜: 𝚏𝚊𝚕𝚜𝚎; 𝚒𝚗𝚒𝚝𝚒𝚊𝚕-𝚟𝚊𝚕𝚞𝚎: 𝟶𝚍𝚎𝚐; } .𝚌𝚊𝚛𝚍 { --𝚊𝚗𝚐𝚕𝚎: 𝟶𝚍𝚎𝚐; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚕𝚒𝚗𝚎𝚊𝚛-𝚐𝚛𝚊𝚍𝚒𝚎𝚗𝚝( 𝚟𝚊𝚛(--𝚊𝚗𝚐𝚕𝚎), #𝟹𝟾𝚋𝚍𝚏𝟾, #𝟶𝚎𝚊𝟻𝚎𝟿, #𝟸𝟻𝟼𝟹𝚎𝚋, #𝟷𝚎𝟺𝟶𝚊𝚏 ); 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: --𝚊𝚗𝚐𝚕𝚎 𝟶.𝟾𝚜 𝚎𝚊𝚜𝚎; } .𝚌𝚊𝚛𝚍:𝚑𝚘𝚟𝚎𝚛 { --𝚊𝚗𝚐𝚕𝚎: 𝟺𝟻𝚍𝚎𝚐; } Defaults to initial value so you don't have to set them everytime

Manu Arora

23,868 görüntüleme • 3 ay önce

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!

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 ʕ•ᴥ•ʔ

103,724 görüntüleme • 5 ay önce

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

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

Bahroo

459,959 görüntüleme • 3 yıl önce

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.

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,887 görüntüleme • 5 ay önce

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 🌐

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👑

138,336 görüntüleme • 2 ay önce

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.

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

140,643 görüntüleme • 2 ay önce

🚨🇺🇸 Trump: "We will open up the Strait, even though we do not use it, because we have a lot of other countries in the world that do use it that are either afraid, or weak, or cheap. We were not helped by NATO that I can tell you."

🚨🇺🇸 Trump: "We will open up the Strait, even though we do not use it, because we have a lot of other countries in the world that do use it that are either afraid, or weak, or cheap. We were not helped by NATO that I can tell you."

Mario Nawfal

125,103 görüntüleme • 3 ay önce

"Heart of Glass" (1979) began as a slower song titled "Once I Had a Love" before being reshaped into the sleek electronic hit we know today. The change sent it to No. 1, though some early fans were unsure. Did you like it or skip it?

"Heart of Glass" (1979) began as a slower song titled "Once I Had a Love" before being reshaped into the sleek electronic hit we know today. The change sent it to No. 1, though some early fans were unsure. Did you like it or skip it?

🇺🇸Hot Pepper

46,345 görüntüleme • 4 ay önce

Adding 3D to your Bolt app is super easy now with Three.js! You can use it to make games, add visualizations to your site, or just make the logo spin - with a single prompt!

bolt.new

64,369 görüntüleme • 1 yıl önce

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.

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.

Gavin Nelson

116,839 görüntüleme • 1 yıl önce

WHAT WOULD YOU DO?? On the river with a blocker? Use it to call? Use it to jam? Or just fold?

WHAT WOULD YOU DO?? On the river with a blocker? Use it to call? Use it to jam? Or just fold?

Patrick Leonard 🫡

173,079 görüntüleme • 3 yıl önce

You can set unique wallpapers for each 1-on-1 chat using your favorite photos or animated gradients. After setting a wallpaper, your partner can tap to use it too or set their own. #TelegramTips

You can set unique wallpapers for each 1-on-1 chat using your favorite photos or animated gradients. After setting a wallpaper, your partner can tap to use it too or set their own. #TelegramTips

Telegram Messenger

90,374 görüntüleme • 3 yıl önce

do you build with or without a grid? use our toggle to easily switch from one to the other 🕹️‼️

do you build with or without a grid? use our toggle to easily switch from one to the other 🕹️‼️

Paralives

224,579 görüntüleme • 2 yıl önce

How I build with Claude Fable 5 1. Three.js = rotate and explore any product in 3D in the browser 2. Color swatches = swap a material value to change the model live 3. CSS radial-gradient = premium spotlight glow zero images 4. GSAP ScrollTrigger = scroll turns one screen into a full story 5. Monospace fonts = signal precision and luxury instantly 6. AudioContext = ambient sound toggle in one call Save this

How I build with Claude Fable 5 1. Three.js = rotate and explore any product in 3D in the browser 2. Color swatches = swap a material value to change the model live 3. CSS radial-gradient = premium spotlight glow zero images 4. GSAP ScrollTrigger = scroll turns one screen into a full story 5. Monospace fonts = signal precision and luxury instantly 6. AudioContext = ambient sound toggle in one call Save this

FHILY👑

149,179 görüntüleme • 1 ay önce

I made a leveling system for VRChat avatars. You gain levels by moving around and talking. Everything save/sync with other players and the level display only use a particle system with 1 plane, 1 material and 1 texture. I will upload a free prefab for it soon. #VRChat #VRC

I made a leveling system for VRChat avatars. You gain levels by moving around and talking. Everything save/sync with other players and the level display only use a particle system with 1 plane, 1 material and 1 texture. I will upload a free prefab for it soon. #VRChat #VRC

Tabaru Neko

87,679 görüntüleme • 2 yıl önce

You can do professional animation with a low budget! I use recicled paper, 8$ USD for 500 sheets, and my animation pegbar, 1$ USD, the puncher is cheap too. This are the materials i use to do traditional animation.

You can do professional animation with a low budget! I use recicled paper, 8$ USD for 500 sheets, and my animation pegbar, 1$ USD, the puncher is cheap too. This are the materials i use to do traditional animation.

Tlauz - Open Sketch Comms

785,712 görüntüleme • 2 yıl önce

Starting a store? Skip the $350 theme. Skip the $29/mo apps Just use Dawn + this superapp: Adds everything big brands use Reviews, countdowns, giftbox, sections (all-in-1) Looks great on mobile and desktop Will save you 300+/mo on apps Makes your store look like a REAL brand Comment “SUPER” and I’ll DM you the app (must be following so I can DM you)

Burkisoy

49,538 görüntüleme • 10 ay önce