Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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.

Soren

7,163 subscribers

97,796 Aufrufe • vor 5 Monaten •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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

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

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.

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

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

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

Firefox for Web Developers

11,375 Aufrufe • vor 4 Monaten

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

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

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.

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

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!

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

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

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

Wes Bos

109,142 Aufrufe • vor 1 Monat

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

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

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.

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

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

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

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.

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

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

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

killian

780,866 Aufrufe • vor 2 Jahren

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!

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

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

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

"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

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

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.

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

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! 👇

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

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.

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

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

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

Wes Bos

583,346 Aufrufe • vor 1 Jahr