正在加载视频...

视频加载失败

返回首页

I've created a simple website that allows you to play with squircles using modern CSS `corner-shape`

pie6k's profile picture

Adam Pietrasiak

35,501 subscribers

48,723 次观看 • 7 个月前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

I've created a Chrome extension that squircles every rounded element on every website Enjoy!
0:14

I've created a Chrome extension that squircles every rounded element on every website Enjoy!

Adam Pietrasiak

98,824 次观看 • 7 个月前

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.
0:12

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.

benjamin

38,669 次观看 • 7 个月前

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 次观看 • 3 个月前

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.
0:19

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 次观看 • 6 个月前

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;
0:11

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;

Haz

228,978 次观看 • 5 个月前

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 次观看 • 5 个月前

Gemini 3 is absolutely crazy you can generate a website that can use hands to interact with 3D models.. how's this even possible created with simple text prompt, no need coding at all
0:15

Gemini 3 is absolutely crazy you can generate a website that can use hands to interact with 3D models.. how's this even possible created with simple text prompt, no need coding at all

el.cine

895,285 次观看 • 7 个月前

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A
0:15

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A

CodePen.IO

11,839 次观看 • 10 个月前

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 次观看 • 9 个月前

created this animated vestaboard, made using Next.js and Tailwind CSS
0:11

created this animated vestaboard, made using Next.js and Tailwind CSS

OPM

12,995 次观看 • 8 个月前

Added a simple tool to the Framer website that allows you to check your website’s meta tags and see how they display across multiple platforms, including X, Google, Slack, LinkedIn, and Threads.
0:16

Added a simple tool to the Framer website that allows you to check your website’s meta tags and see how they display across multiple platforms, including X, Google, Slack, LinkedIn, and Threads.

Jurre Houtkamp

22,717 次观看 • 5 个月前

Saved you a click When you want to adjust a corner radius, the controls will now appear inline when that shape is selected
0:12

Saved you a click When you want to adjust a corner radius, the controls will now appear inline when that shape is selected

Figma

36,720 次观看 • 1 年前

Trump: "Corner stores. What is a corner store? I've never heard that term. I know what a corner store is, but I've never heard it described. A corner store? Who the hell wrote that?"
0:16

Trump: "Corner stores. What is a corner store? I've never heard that term. I know what a corner store is, but I've never heard it described. A corner store? Who the hell wrote that?"

The Bulwark

42,811 次观看 • 2 个月前

Langevin Monte Carlo allows you to draw samples from a probability distribution using its log gradient ∇ log p(x). By performing a sort of gradient ascent with noise you can navigate around the distribution. Langevin MC is heavily related to modern diffusion models.
0:19

Langevin Monte Carlo allows you to draw samples from a probability distribution using its log gradient ∇ log p(x). By performing a sort of gradient ascent with noise you can navigate around the distribution. Langevin MC is heavily related to modern diffusion models.

Alec Helbling

96,895 次观看 • 1 年前

In The Expanse: Osiris Reborn, there are no strictly defined classes. Instead, you will have play styles—a system that allows you to customize the way you play and experiment with weapons, gadgets, and abilities. Play as you see fit!
0:15

In The Expanse: Osiris Reborn, there are no strictly defined classes. Instead, you will have play styles—a system that allows you to customize the way you play and experiment with weapons, gadgets, and abilities. Play as you see fit!

The Expanse: Osiris Reborn

35,874 次观看 • 5 个月前

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO
0:17

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IO

CSS by T. Afif

12,042 次观看 • 1 年前

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 次观看 • 7 个月前

Trump: "Millions of American small businesses, including corner stores. What is a corner store? I've never heard that term. I know what a corner store is but I've never heard it described-- a corner store. Who the hell wrote that?"
0:16

Trump: "Millions of American small businesses, including corner stores. What is a corner store? I've never heard that term. I know what a corner store is but I've never heard it described-- a corner store. Who the hell wrote that?"

Aaron Rupar

2,143,429 次观看 • 2 个月前

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.
0:10

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.

Dillion

89,955 次观看 • 2 年前

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().
0:10

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

CSS by T. Afif

22,524 次观看 • 2 个月前