Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 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

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

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

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

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

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

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

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

Down the Bitcoin Rabbit Hole 🕳️🐇
0:10

Down the Bitcoin Rabbit Hole 🕳️🐇

Lucho

65,965 görüntüleme • 3 yıl önce

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

Sensitive content

down the rabbit hole we go ... 🐇

Gamer Supps®

1,396,491 görüntüleme • 2 yıl önce

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

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

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

`clip-path` buttons
0:10

`clip-path` buttons

Jakub Krehel

40,745 görüntüleme • 6 ay önce

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

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

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

clip-path is really underrated
0:11

clip-path is really underrated

dmytro

59,745 görüntüleme • 8 ay önce

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

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