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

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

На главную

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

sorenblank's profile picture

Soren

7,163 subscribers

97,796 просмотров • 5 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities
2:32

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Wes Bos

31,135 просмотров • 1 год назад

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.
0:34

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

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

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
1:56

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

Firefox for Web Developers

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

CSS Tip 📖 Use CSS shape-outside to wrap text around shapes .column--left .shape { float: right; shape-outside: circle(100px at 100% 50%)); }
0:26

CSS Tip 📖 Use CSS shape-outside to wrap text around shapes .column--left .shape { float: right; shape-outside: circle(100px at 100% 50%)); }

jhey ʕ•ᴥ•ʔ

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

Clay's transition API is starting to shape up. It's modeled on the simplicity of CSS transitions (i.e. just specify property, duration and tween function, the rest is automatic) but with the ability to override the tween function so you can do whatever you want, frame by frame.
0:22

Clay's transition API is starting to shape up. It's modeled on the simplicity of CSS transitions (i.e. just specify property, duration and tween function, the rest is automatic) but with the ability to override the tween function so you can do whatever you want, frame by frame.

Nic Barker

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

here is the new CSS Border shape API this is going to unlock so many sick new designs
1:55

here is the new CSS Border shape API this is going to unlock so many sick new designs

Wes Bos

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

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):
0:35

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):

Una 🇺🇦

13,352 просмотров • 1 год назад

CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it awesome work Noam Rosenthal 🦋 nomster.bsky.social and smfr!
0:33

CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it awesome work Noam Rosenthal 🦋 nomster.bsky.social and smfr!

Adam Argyle

23,266 просмотров • 1 год назад

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.
0:33

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,911 просмотров • 1 год назад

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?
0:21

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

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

CSS Anchors are truly amazing! I built this without any animation library. This is part of an upcoming component library I’ve been working on.
0:40

CSS Anchors are truly amazing! I built this without any animation library. This is part of an upcoming component library I’ve been working on.

Haz

2,570,199 просмотров • 5 месяцев назад

we've literally been flying blind until now $ interpreter --vision > Recreate this component in Tailwind CSS (this is realtime)
0:30

we've literally been flying blind until now $ interpreter --vision > Recreate this component in Tailwind CSS (this is realtime)

killian

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

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!
0:20

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,694 просмотров • 1 год назад

SAVE this drill!! Start in the corner ➡️ sprint to other corner Make or miss, sprint to opposite corner You can't 'unlock' the wing until you make both corners. Same rules apply for wing, top of the key The goal is to complete it as fast as u can Comment "Shooter" for my drills
0:28

SAVE this drill!! Start in the corner ➡️ sprint to other corner Make or miss, sprint to opposite corner You can't 'unlock' the wing until you make both corners. Same rules apply for wing, top of the key The goal is to complete it as fast as u can Comment "Shooter" for my drills

Danny Cooper

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

"How much longer are you going to wait to demand the best of yourself?" Epictetus asked. With 2026 right around the corner, now is the time. It's time to start making progress towards your goals, it's time to get in shape, it's time to lower your anxiety, it's time to deepen your relationships. To help you in that direction, sign up for the New Year, New You Challenge at
1:24

"How much longer are you going to wait to demand the best of yourself?" Epictetus asked. With 2026 right around the corner, now is the time. It's time to start making progress towards your goals, it's time to get in shape, it's time to lower your anxiety, it's time to deepen your relationships. To help you in that direction, sign up for the New Year, New You Challenge at

Ryan Holiday

18,768 просмотров • 6 месяцев назад

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

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

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇
0:42

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Gemini 3. 1 Pro frontend capability is next level 🔥 Been working on this for some time. It's all CSS and incredibly performant! It's a Tauri app and uses only 3 – 4 MB of RAM.
0:21

Gemini 3. 1 Pro frontend capability is next level 🔥 Been working on this for some time. It's all CSS and incredibly performant! It's a Tauri app and uses only 3 – 4 MB of RAM.

can

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

I saw this nifty CSS Video Masking technique on the iPad website. Pretty neat use of CSS - not what I expected!
2:28

I saw this nifty CSS Video Masking technique on the iPad website. Pretty neat use of CSS - not what I expected!

Wes Bos

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