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

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

На главную

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,357 subscribers

314,599 просмотров • 4 месяцев назад •via X (Twitter)

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

65,006 просмотров • 1 год назад

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

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇
0:18

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

`clip-path` buttons
0:10

`clip-path` buttons

Jakub Krehel

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

seungmin pretending to be one of the backup dancers instead of doing the social path group circle😭😭😭
0:13

seungmin pretending to be one of the backup dancers instead of doing the social path group circle😭😭😭

hayes | SEEING ATEEZ🍒˚˖𓍢ִ໋ ❀

127,405 просмотров • 1 год назад

O // 36 Days of Type // O is for my daughter, Olivia. Path animation + a whole lot of clipping masks in Cavalry — Project file:
0:18

O // 36 Days of Type // O is for my daughter, Olivia. Path animation + a whole lot of clipping masks in Cavalry — Project file:

Adam Maurer

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

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }
0:17

Responsive magnetic link effect using CSS anchor positioning 🧲 nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }

jhey ʕ•ᴥ•ʔ

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

clip-path is really underrated
0:11

clip-path is really underrated

dmytro

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

*Latest type of Fans* *In a Hotel at Bangalore.. Life is a Circle..*👍
0:14

*Latest type of Fans* *In a Hotel at Bangalore.. Life is a Circle..*👍

Surendra Tapuriah 🇮🇳

814,692 просмотров • 1 год назад

Crimson Desert developers have added a Claw Machine in the latest update. You have a chance to win 12 types of lighting items, 1 type of chair, 1 type of special headgear, Abyss Artifacts, and Abyss Gear.
0:19

Crimson Desert developers have added a Claw Machine in the latest update. You have a chance to win 12 types of lighting items, 1 type of chair, 1 type of special headgear, Abyss Artifacts, and Abyss Gear.

Zephryss⛩️

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

I could never ever be in an open relationship, I am a 1 boyfriend type of guy. #SATX
0:16

I could never ever be in an open relationship, I am a 1 boyfriend type of guy. #SATX

Edgar G

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

Clip showing the deployment of parachute retardation on SAMP Type 25 bombs released from a Jaguar A ground-attack aircraft.
0:14

Clip showing the deployment of parachute retardation on SAMP Type 25 bombs released from a Jaguar A ground-attack aircraft.

Voltigeur

22,162 просмотров • 11 месяцев назад

Big announcement in HAQQ’s path forward From L1 → Ethereum L2 We’re at a pivotal moment in HAQQ’s journey. We’re proposing a transition from a Layer 1 to an Ethereum Layer 2, leveraging Optimism’s tech stack.
0:10

Big announcement in HAQQ’s path forward From L1 → Ethereum L2 We’re at a pivotal moment in HAQQ’s journey. We’re proposing a transition from a Layer 1 to an Ethereum Layer 2, leveraging Optimism’s tech stack.

HAQQ Ecosystem

109,778 просмотров • 1 год назад

seungmin fell in the social path circle 😭
0:14

seungmin fell in the social path circle 😭

mimi bang

136,062 просмотров • 10 месяцев назад

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳
0:19

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

jhey ʕ•ᴥ•ʔ

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

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

Which one is your type? 1, 2, or 3?
0:10

Which one is your type? 1, 2, or 3?

Mike

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

Steady Stack is an exclusive membership, lifestyle brand focused on advancing its members forward on their path of upward mobility. Premier global mastermind designed for the digital era, built on the blockchain, leading in technological innovation, #1 utility and IP.
0:15

Steady Stack is an exclusive membership, lifestyle brand focused on advancing its members forward on their path of upward mobility. Premier global mastermind designed for the digital era, built on the blockchain, leading in technological innovation, #1 utility and IP.

Steady Stack

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

fnaf 1 type beat
0:18

fnaf 1 type beat

kobe

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