Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

KunstWissenschaft & TechnologieBildung
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 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 Aufrufe • vor 11 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

229,702 Aufrufe • vor 9 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 10 Monaten

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 Aufrufe • vor 10 Tagen

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

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

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

Who made your day better without even knowing it?

Kelly Monroe

11,370 Aufrufe • vor 2 Monaten

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

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

110,920 Aufrufe • vor 3 Monaten

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

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

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

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

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

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

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

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

288,674 Aufrufe • vor 8 Monaten

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

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

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