Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,756 subscribers

200,156 görüntüleme • 11 ay önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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 🤙
0:16

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

286,798 görüntüleme • 11 ay önce

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog
0:16

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog

Adam Argyle

67,513 görüntüleme • 3 yıl önce

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️
0:16

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️

Ali

10,947 görüntüleme • 6 ay önce

I've built an app to play around with the new CSS squircle feature. →
0:19

I've built an app to play around with the new CSS squircle feature. →

Jim Raptis

28,541 görüntüleme • 10 ay önce

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

214,677 görüntüleme • 5 ay önce

When you orient a strong magnet at the base it forces the plasma to rotate, here it is forming a stable spiral. Next an external magnet is used to manually influence the shape and position of the plasma spiral.
0:11

When you orient a strong magnet at the base it forces the plasma to rotate, here it is forming a stable spiral. Next an external magnet is used to manually influence the shape and position of the plasma spiral.

Bluntly Put Philosopher (BPP)

33,914 görüntüleme • 1 ay önce

Nerded out on squircles and css corner-shape last few days. Since Webkit is actively working on the corner-shape implementation I figured now is the time. I wrote a little article about what I learned and how you can use it right now as a progressive enhancement.
0:14

Nerded out on squircles and css corner-shape last few days. Since Webkit is actively working on the corner-shape implementation I figured now is the time. I wrote a little article about what I learned and how you can use it right now as a progressive enhancement.

Jesper Vos

11,784 görüntüleme • 1 ay önce

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;
0:11

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;

Haz

229,702 görüntüleme • 9 ay önce

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.
0:12

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.

Zée

83,832 görüntüleme • 8 ay önce

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:
0:15

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

Emil Kowalski

122,972 görüntüleme • 3 ay önce

made it even better! now it uses: - native squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their height
0:19

made it even better! now it uses: - native squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their height

Kevin Grajeda

108,899 görüntüleme • 3 ay önce

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇
0:14

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,050 görüntüleme • 3 yıl önce

An entire Christmas Dinner for four people, in a box, for £25. Would you give it a go?
0:10

An entire Christmas Dinner for four people, in a box, for £25. Would you give it a go?

Rob Boyd, Esq

13,804 görüntüleme • 10 ay önce

Remember Arteta explaining why he wants the pass from full-back to winger on an angle, not straight. Brighton Clip: FB a bit narrower → angled pass → easier for Trossard to play round the corner & use the air→ Gyokeres reacts to the pass. Leeds Clip: FB wider → straighter pass → harder to play but credit Trossard’s ability to rotate his hips and still find it→ This time Gyokeres is already on the move, anticipating it. Clear sign of a growing player relationship between Trossard & Gyokeres 🤝
0:15

Remember Arteta explaining why he wants the pass from full-back to winger on an angle, not straight. Brighton Clip: FB a bit narrower → angled pass → easier for Trossard to play round the corner & use the air→ Gyokeres reacts to the pass. Leeds Clip: FB wider → straighter pass → harder to play but credit Trossard’s ability to rotate his hips and still find it→ This time Gyokeres is already on the move, anticipating it. Clear sign of a growing player relationship between Trossard & Gyokeres 🤝

The Individual Coach-Analyst

15,750 görüntüleme • 9 ay önce

magnetic bento hover effect w/ css anchor positioning .bento { li:hover article { anchor-name: --a; } .indicator { position-anchor: --a; inset: anchor(inside); transition: inset var(--dur) var(--ease); } }
0:19

magnetic bento hover effect w/ css anchor positioning .bento { li:hover article { anchor-name: --a; } .indicator { position-anchor: --a; inset: anchor(inside); transition: inset var(--dur) var(--ease); } }

jhey ʕ•ᴥ•ʔ

97,660 görüntüleme • 1 ay önce

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

199,738 görüntüleme • 9 ay önce

depth stack slider - progress indicator - blur + gradient mask on underlying images - pointer, wheel and keyboard controls
0:17

depth stack slider - progress indicator - blur + gradient mask on underlying images - pointer, wheel and keyboard controls

tobi

19,875 görüntüleme • 1 yıl önce

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

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

bolt.new

369,691 görüntüleme • 2 yıl önce

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.
0:16

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.

CSS by T. Afif

14,689 görüntüleme • 2 yıl önce