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

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

На главную

made it even better! now it uses: - native squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their height

k_grajeda's profile picture

Kevin Grajeda

9,590 subscribers

108,899 просмотров • 2 месяцев назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

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

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

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

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

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

Adam Pietrasiak

48,723 просмотров • 11 месяцев назад

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

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

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 просмотров • 10 месяцев назад

Nerded out on squircles and css corner-shape last few days. Since Webkit is actively working on the corner-shape implementation I figured now is the time. I wrote a little article about what I learned and how you can use it right now as a progressive enhancement.
0:14

Nerded out on squircles and css corner-shape last few days. Since Webkit is actively working on the corner-shape implementation I figured now is the time. I wrote a little article about what I learned and how you can use it right now as a progressive enhancement.

Jesper Vos

11,383 просмотров • 12 дней назад

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.
0:16

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.

CSS by T. Afif

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

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation
0:13

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation

Victor

20,920 просмотров • 5 месяцев назад

Who made your day better without even knowing it?
0:12

Who made your day better without even knowing it?

Kelly Monroe

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

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 просмотров • 11 месяцев назад

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;
0:10

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Gabriel

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

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

426,308 просмотров • 1 год назад

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }
0:19

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jhey ʕ•ᴥ•ʔ

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

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 просмотров • 7 месяцев назад

Made this Responsive Login & Registration Form using HTML and CSS How is it guys?
0:12

Made this Responsive Login & Registration Form using HTML and CSS How is it guys?

Raja Junaid 🚀

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

Today, I made this cool "Pepsi Header" using HTML, CSS & JavaScript. How is it guys?
0:13

Today, I made this cool "Pepsi Header" using HTML, CSS & JavaScript. How is it guys?

Raja - impeccify.com 🚀

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

Use the scroll-padding CSS property when using a scroll fade so your items don't get stuck in the fade region. Bonus: It also makes clicking through each option way more convenient!
0:14

Use the scroll-padding CSS property when using a scroll fade so your items don't get stuck in the fade region. Bonus: It also makes clicking through each option way more convenient!

balint

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

I’ve been using 60% Apple-style corner smoothing all the time. But whenever I explain it to Codex or Claude Code, they often miss the point. So I made a skill that anyone can use with their AI agents: npx skills add gabrielobholz/corner-smoothing-skill Now I can simply say: “Create a rectangle with radius: 32 and smoothing: 60” and get the shape I actually mean.
0:14

I’ve been using 60% Apple-style corner smoothing all the time. But whenever I explain it to Codex or Claude Code, they often miss the point. So I made a skill that anyone can use with their AI agents: npx skills add gabrielobholz/corner-smoothing-skill Now I can simply say: “Create a rectangle with radius: 32 and smoothing: 60” and get the shape I actually mean.

Gabriel

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

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.
0:12

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.

Haz

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

Not everything in the wild runs… some stand their ground. The Bushbuck isn’t your typical antelope quiet,solitary,and so well camouflaged you might walk past it without knowing. But corner it? It can fight back hard,even against predators.This is really BIG Have you tasted this before?
0:16

Not everything in the wild runs… some stand their ground. The Bushbuck isn’t your typical antelope quiet,solitary,and so well camouflaged you might walk past it without knowing. But corner it? It can fight back hard,even against predators.This is really BIG Have you tasted this before?

NatureAwarenessNG

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

He’s losing it completely and she’s not even gone yet. He can’t imagine life without her
0:10

He’s losing it completely and she’s not even gone yet. He can’t imagine life without her

maria

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

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)
0:11

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)

Dima Belyaev

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