Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 7 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 • 7 ay önce

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

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

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