Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

KunstBildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

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

Little skeumorphic button experiment using css box-shadow

Petr Knoll

362,819 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 7 Monaten

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,379 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

⚡️ 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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

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

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

CodePen.IO

21,647 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 1 Jahr

More from the border
0:14

More from the border

Mossad Commentary

108,999 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 11 Monaten