Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 6 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 6 Monaten

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

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

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,743 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 4 Monaten

"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,285 Aufrufe • vor 9 Monaten

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

894,874 Aufrufe • vor 6 Monaten

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

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 Aufrufe • vor 6 Monaten

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,644 Aufrufe • vor 4 Monaten

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

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

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

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,661 Aufrufe • vor 4 Monaten

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

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 Aufrufe • vor 6 Monaten

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

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

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