正在加载视频...

视频加载失败

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

one way: clip-path: shape() in css single element, draw outline, scoop corner no stitched-together pieces/mask gymnastics 🧙

jhey ʕ•ᴥ•ʔ

148,169 subscribers

101,924 次观看 • 2 个月前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;

Haz

229,702 次观看 • 9 个月前

In Firefox DevTools you can use a visual editor to adjust CSS clip-path of an element! Love such small features, just like the visual controls for flexbox and grid in Chrome DevTools 🔥

In Firefox DevTools you can use a visual editor to adjust CSS clip-path of an element! Love such small features, just like the visual controls for flexbox and grid in Chrome DevTools 🔥

Minko Gechev

14,504 次观看 • 3 年前

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

326,445 次观看 • 8 个月前

- Added option to draw half-outlines. This will only draw the top-left portions of the outline for a crosshair. You can use this via cl_crosshair_drawoutline in console. 0 = No outline, 1 = Full outline, 2 = Half outline.

- Added option to draw half-outlines. This will only draw the top-left portions of the outline for a crosshair. You can use this via cl_crosshair_drawoutline in console. 0 = No outline, 1 = Full outline, 2 = Half outline.

Thour

31,035 次观看 • 1 个月前

In Figma Design you can easily cut up a shape with a path using the shape builder tool, without moving over to draw! 🤯 Just draw the path you want to use to "Cut." Just select your object and path and press "M," and click your regions. #FigmaTip

In Figma Design you can easily cut up a shape with a path using the shape builder tool, without moving over to draw! 🤯 Just draw the path you want to use to "Cut." Just select your object and path and press "M," and click your regions. #FigmaTip

miggi from figgi

247,309 次观看 • 1 年前

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 次观看 • 11 个月前

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

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 次观看 • 11 个月前

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.

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 次观看 • 2 年前

how the clip + mask combo works: mask the container element using the relevant keycap image so the image is clipped on translate clip the container element so the hit area doesn't overlap other keys 🧑‍🍳

how the clip + mask combo works: mask the container element using the relevant keycap image so the image is clipped on translate clip the container element so the hit area doesn't overlap other keys 🧑‍🍳

jhey ʕ•ᴥ•ʔ

119,045 次观看 • 1 年前

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,533 次观看 • 1 年前

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

CSS by T. Afif

32,338 次观看 • 4 个月前

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.

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 次观看 • 15 天前

Putting the pieces together. 🧩 See you at Opening Night in one week.

Putting the pieces together. 🧩 See you at Opening Night in one week.

Nebraska Men's Basketball

11,674 次观看 • 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,852 次观看 • 1 年前

The perfect way the pieces of this armadillo fit together

The perfect way the pieces of this armadillo fit together

Nature is Amazing ☘️

12,201,097 次观看 • 1 年前

this has to be the CRAZIEST monkey clip… no way bro pulled out the george floyd mask 💀

this has to be the CRAZIEST monkey clip… no way bro pulled out the george floyd mask 💀

clip 🛸

961,864 次观看 • 2 年前

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner

CodePen.IO

21,647 次观看 • 1 年前

Introducing Stork Games Every round, Storkie hides in a new spot. Your mission: Draw a box containing Storkie, as close to the edges of his shape as possible without cutting anything off. Click and drag from one corner to the opposite corner to box him in. A new game drops every 12 hours; you only get one shot each round. Ready to play?

Introducing Stork Games Every round, Storkie hides in a new spot. Your mission: Draw a box containing Storkie, as close to the edges of his shape as possible without cutting anything off. Click and drag from one corner to the opposite corner to box him in. A new game drops every 12 hours; you only get one shot each round. Ready to play?

Stork

45,003 次观看 • 1 年前