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

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

На главную

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

144,228 subscribers

111,340 просмотров • 1 год назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

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

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

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

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 просмотров • 1 год назад

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇
0:10

CSS Tip! ✨ You can transition grid tracks 👀 button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

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 лет назад

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

A little before and after of my “Complete Order” UI button animation concept ✨
0:11

A little before and after of my “Complete Order” UI button animation concept ✨

Michael Nowak

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

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

Little skeumorphic button experiment using css box-shadow
0:15

Little skeumorphic button experiment using css box-shadow

Petr Knoll

362,819 просмотров • 1 год назад

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }
0:14

little details 👨‍🍳 tiny css transition-delay on :hover filters noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }

jhey ʕ•ᴥ•ʔ

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

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.
0:12

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.

Haz

288,414 просмотров • 4 месяцев назад

the transition from woman’s world to california gurls is a complete GAG
0:18

the transition from woman’s world to california gurls is a complete GAG

e

20,478 просмотров • 1 год назад

Scenes from Paris last night are ones of complete & utter chaos.
0:11

Scenes from Paris last night are ones of complete & utter chaos.

Concerned Citizen

30,157 просмотров • 1 год назад

⚡️ From the Iraqi-Iranian border: Scenes after the Israeli -American aggression on a site near the Mehran border crossing
0:18

⚡️ From the Iraqi-Iranian border: Scenes after the Israeli -American aggression on a site near the Mehran border crossing

War Monitor

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

If you take off the mask, you will see......... mask & suit from FORFUN
0:11

If you take off the mask, you will see......... mask & suit from FORFUN

F_wonder

17,316 просмотров • 1 год назад

More from the border
0:14

More from the border

Mossad Commentary

108,999 просмотров • 1 год назад

Stylized damage mask using ucupaint decal projector to control the gradient
0:16

Stylized damage mask using ucupaint decal projector to control the gradient

passivestar

90,829 просмотров • 1 год назад

Indian students from the union territory of J&K cross the Iran border into Armenia.
0:12

Indian students from the union territory of J&K cross the Iran border into Armenia.

Sidhant Sibal

489,301 просмотров • 1 год назад

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner
0:12

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

CodePen.IO

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

Chilling video from Durand line , Chaman border Afghan Taliban & Pakistani army are shelling each other.
0:12

Chilling video from Durand line , Chaman border Afghan Taliban & Pakistani army are shelling each other.

War & Gore

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