Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 7 месяцев назад •via X (Twitter)

ИскусствоОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

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

285,985 просмотров • 7 месяцев назад

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,503 просмотров • 3 лет назад

The subtle differences when creating a squircle 🧐 Use a generated CSS clip-path to get a finer shape 🤙 .squircle { clip-path: polygon( 100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ... ); } Went down the rabbit hole 🐇
0:13

The subtle differences when creating a squircle 🧐 Use a generated CSS clip-path to get a finer shape 🤙 .squircle { clip-path: polygon( 100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ... ); } Went down the rabbit hole 🐇

jhey ▲🐻🎈

87,803 просмотров • 2 лет назад

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,622 просмотров • 1 месяц назад

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

27,748 просмотров • 5 месяцев назад

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

210,587 просмотров • 1 месяц назад

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

228,884 просмотров • 5 месяцев назад

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

zenith

83,192 просмотров • 3 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 6 месяцев назад

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 просмотров • 4 месяцев назад

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 просмотров • 4 месяцев назад

💡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,038 просмотров • 1 год назад

Today I learnt that you can: - use arrow keys to move an object - use < and > to rotate - use Page Up and Down to move an object up and down I LOVE THE PEOPLE WHO MADE THIS A THING. Kisses for you 😘😘😘 #WoWHousing
0:17

Today I learnt that you can: - use arrow keys to move an object - use < and > to rotate - use Page Up and Down to move an object up and down I LOVE THE PEOPLE WHO MADE THIS A THING. Kisses for you 😘😘😘 #WoWHousing

Rage | Tech & RPG

30,142 просмотров • 6 месяцев назад

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`
0:13

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`

Adam Pietrasiak

48,723 просмотров • 7 месяцев назад

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,769 просмотров • 8 месяцев назад

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,594 просмотров • 1 год назад

Looking for beta testers to use an iOS app I'm making for Linear 2 weeks ago I started toying around with what a simple and minimal iOS app could look like for linear and I'm ready to get some feedback. I'm calling it Changes - comment/dm/rt/etc for an invite
0:14

Sensitive content

Looking for beta testers to use an iOS app I'm making for Linear 2 weeks ago I started toying around with what a simple and minimal iOS app could look like for linear and I'm ready to get some feedback. I'm calling it Changes - comment/dm/rt/etc for an invite

Brett Bauman

40,492 просмотров • 3 лет назад

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }
0:17

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

jhey ʕ•ᴥ•ʔ

280,956 просмотров • 1 год назад

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.
0:19

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 просмотров • 6 месяцев назад