Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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,411 subscribers

320,591 Aufrufe • vor 5 Monaten •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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

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

`clip-path` buttons
0:10

`clip-path` buttons

Jakub Krehel

40,745 Aufrufe • vor 7 Monaten

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

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

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

clip-path is really underrated
0:11

clip-path is really underrated

dmytro

59,955 Aufrufe • vor 9 Monaten

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

No NFL play caller this century has treated 2nd & short like a free shot more aggressively than Ben Johnson. Among 68 play callers with 70+ games since 1999, Johnson ranks: 1st in 2nd & 1 pass rate: 48.2% 1st in 2nd & 1-2 pass rate: 47.7% 1st in 2nd & 1-3 pass rate: 47.5% No current projected 2026 play caller is even within 17 percentage points of him on 2nd & 1. Clip below: Chicago using 2nd & 1 exactly the way Johnson wants to.
0:10

No NFL play caller this century has treated 2nd & short like a free shot more aggressively than Ben Johnson. Among 68 play callers with 70+ games since 1999, Johnson ranks: 1st in 2nd & 1 pass rate: 48.2% 1st in 2nd & 1-2 pass rate: 47.7% 1st in 2nd & 1-3 pass rate: 47.5% No current projected 2026 play caller is even within 17 percentage points of him on 2nd & 1. Clip below: Chicago using 2nd & 1 exactly the way Johnson wants to.

Ryan Paganetti

286,421 Aufrufe • vor 4 Tagen

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

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

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

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

seungmin fell in the social path circle 😭
0:14

seungmin fell in the social path circle 😭

mimi bang

136,464 Aufrufe • vor 11 Monaten

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

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

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

Mike

79,919 Aufrufe • vor 4 Monaten

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