Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl ö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

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

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

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

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

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

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

Little skeumorphic button experiment using css box-shadow

Petr Knoll

362,777 görüntüleme • 1 yıl önce

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

58,847 görüntüleme • 6 ay önce

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

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

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

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

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

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

More from the border
0:14

More from the border

Mossad Commentary

108,999 görüntüleme • 1 yıl önce

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

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

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

CodePen.IO

21,647 görüntüleme • 8 ay önce

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