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

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

На главную

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 🐇

jh3yy's profile picture

jhey ▲🐻🎈

128,936 subscribers

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

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

Anya Rossi• Live Now

Private livecam show

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

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

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

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

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move
0:18

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move

jhey ʕ•ᴥ•ʔ

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

I've built an app to play around with the new CSS squircle feature. →
0:19

I've built an app to play around with the new CSS squircle feature. →

Jim Raptis

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

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%); }
0:11

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

jhey ʕ•ᴥ•ʔ

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

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

It's not a square. ⬛🙅‍♂️ It's not a circle. ⚫🙅‍♀️ It's a squircle! In Flutter 3.32, we've introduced a new addition to Flutter’s shape capabilities: the rounded superellipse, a cornerstone of the iOS design language.
0:17

It's not a square. ⬛🙅‍♂️ It's not a circle. ⚫🙅‍♀️ It's a squircle! In Flutter 3.32, we've introduced a new addition to Flutter’s shape capabilities: the rounded superellipse, a cornerstone of the iOS design language.

Flutter

25,402 просмотров • 1 год назад

First instinct when I saw the forced squircle icons in macOS 26 Tahoe: clip everything that sticks out and bring it back with NSApplication.shared.dockTile.contentView at launch. #WWDC25
0:12

First instinct when I saw the forced squircle icons in macOS 26 Tahoe: clip everything that sticks out and bring it back with NSApplication.shared.dockTile.contentView at launch. #WWDC25

Simon B. Støvring

173,746 просмотров • 1 год назад

In Figma Design you can easily cut up a shape with a path using the shape builder tool, without moving over to draw! 🤯 Just draw the path you want to use to "Cut." Just select your object and path and press "M," and click your regions. #FigmaTip
0:19

In Figma Design you can easily cut up a shape with a path using the shape builder tool, without moving over to draw! 🤯 Just draw the path you want to use to "Cut." Just select your object and path and press "M," and click your regions. #FigmaTip

miggi from figma

243,080 просмотров • 9 месяцев назад

Down the Bitcoin Rabbit Hole 🕳️🐇
0:10

Down the Bitcoin Rabbit Hole 🕳️🐇

Lucho

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

down the rabbit hole we go ... 🐇
0:18

Sensitive content

down the rabbit hole we go ... 🐇

Gamer Supps®

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

Dog creating a path from walking the same everyday
0:14

Dog creating a path from walking the same everyday

non aesthetic things

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

I went down a rabbit hole and ended finding this.
0:17

I went down a rabbit hole and ended finding this.

Mr. Baldimore

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

BANNON: The military is moving down a path to deindustrialize Iran.
0:17

BANNON: The military is moving down a path to deindustrialize Iran.

Bannon’s WarRoom

17,201 просмотров • 2 месяцев назад

`clip-path` buttons
0:10

`clip-path` buttons

Jakub Krehel

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

Went down an NBL rabbit hole last night and came across the most outrageous use of a smoke machine I’ve ever seen in my life lmao
0:16

Went down an NBL rabbit hole last night and came across the most outrageous use of a smoke machine I’ve ever seen in my life lmao

Jalin Troutman

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

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

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:
0:17

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,451 просмотров • 1 год назад

Went down a gender reveal rabbit hole last night starting with this reveal from a few years ago that killed the pilot
0:12

Went down a gender reveal rabbit hole last night starting with this reveal from a few years ago that killed the pilot

Kristi Yamaguccimane

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

clip-path is really underrated
0:11

clip-path is really underrated

dmytro

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

I went down a restaurant interior design rabbit hole yesterday and this is what it felt like watching everything get less colorful and simpler through the years
0:11

I went down a restaurant interior design rabbit hole yesterday and this is what it felt like watching everything get less colorful and simpler through the years

The Art of SpongeBob

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

Just made my first 10-second Grok clip. Be the penguin. Walk the vertical path.
0:10

Just made my first 10-second Grok clip. Be the penguin. Walk the vertical path.

Ian Miles Cheong

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