正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

419,960 subscribers

24,796 次观看 • 3 个月前 •via X (Twitter)

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`

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

Adam Pietrasiak

48,723 次观看 • 7 个月前

Good news for web typography: text-indent with each-line and hanging keywords is now Baseline Widely Available → You can now create sophisticated, print-inspired layouts with CSS that work across all major engines.

Good news for web typography: text-indent with each-line and hanging keywords is now Baseline Widely Available → You can now create sophisticated, print-inspired layouts with CSS that work across all major engines.

Chrome for Developers

28,110 次观看 • 2 个月前

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 次观看 • 6 个月前

Create this responsive flex layout using just HTML and CSS 🚀

Create this responsive flex layout using just HTML and CSS 🚀

David Mráz

38,100 次观看 • 1 年前

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

CSS by T. Afif

22,524 次观看 • 2 个月前

Create responsive footer with subscribe form using CSS and HTML 🚀 Code in the comments 🧑‍💻

Create responsive footer with subscribe form using CSS and HTML 🚀 Code in the comments 🧑‍💻

David Mráz

78,635 次观看 • 2 年前

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 次观看 • 3 年前

📌 2 lines of CSS to create a responsive Grid

📌 2 lines of CSS to create a responsive Grid

andrej

404,498 次观看 • 3 年前

Two ways to create responsive input fields in CSS ✨

Two ways to create responsive input fields in CSS ✨

Prasenjit

43,304 次观看 • 1 年前

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A

CodePen.IO

11,285 次观看 • 10 个月前

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻

Responsive table with resizable columns using HTML, CSS and JavaScript 🚀 Code in the comments 🧑‍💻

David Mráz

13,821 次观看 • 6 个月前

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

CSS Tip! ✨ Combine :has() and trig functions to select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

517,617 次观看 • 2 年前

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 次观看 • 1 年前

Create responsive holy grail layout with CSS grid 💪🚀

Create responsive holy grail layout with CSS grid 💪🚀

David Mráz

133,448 次观看 • 2 年前

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

Adam Argyle

22,444 次观看 • 1 年前

Create these burgers using HTML and CSS 🚀 Code in the comments 👨‍💻

Create these burgers using HTML and CSS 🚀 Code in the comments 👨‍💻

David Mráz

33,732 次观看 • 1 年前

Create this layout using nested css grids and media queries 💪

Create this layout using nested css grids and media queries 💪

David Mráz

14,283 次观看 • 1 年前

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

jhey ʕ•ᴥ•ʔ

280,975 次观看 • 1 年前

Create this sidebar using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

Create this sidebar using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

65,949 次观看 • 1 年前