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

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

На главную

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

148,169 subscribers

101,924 просмотров • 2 месяцев назад •via X (Twitter)

Наука и технологииОбразование
LIVE

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;
0:11

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 🔥
0:15

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%); }
0:11

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.
0:12

- 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
0:19

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`
0:13

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
0:18

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.
0:16

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 🧑‍🍳
0:18

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:
0:17

💡 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)
0:14

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.
0:14

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 просмотров • 16 дней назад

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

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
0:15

"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
0:16

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 💀
0:18

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
0:12

"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?
0:19

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 год назад