Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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