Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

CodePen's profile picture

CodePen.IO

203,017 subscribers

11,852 Aufrufe • vor 1 Jahr •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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

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

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

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

CSS by T. Afif

22,524 Aufrufe • vor 4 Monaten

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

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().
0:11

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

24,796 Aufrufe • vor 5 Monaten

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

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 *(just let me have my Mom joke)
0:12

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 *(just let me have my Mom joke)

Una 🇺🇦

43,205 Aufrufe • vor 4 Monaten

toggle 🌛 brought to life with CSS && SVG
0:19

toggle 🌛 brought to life with CSS && SVG

jhey ʕ•ᴥ•ʔ

84,240 Aufrufe • vor 1 Jahr

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨
0:14

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

Kevin Grajeda

29,161 Aufrufe • vor 1 Jahr

csp has smart shape now along with the default shape tools !! when will a certain other art program get proper shape tools
0:13

csp has smart shape now along with the default shape tools !! when will a certain other art program get proper shape tools

tomato 🍅

73,865 Aufrufe • vor 5 Monaten

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

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

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

jhey ʕ•ᴥ•ʔ

99,995 Aufrufe • vor 15 Tagen

A drone display creating a Moon shape surrounded by golden sparks
0:11

A drone display creating a Moon shape surrounded by golden sparks

Astropics

92,087 Aufrufe • vor 8 Monaten

jelly with a beautiful sunflower shape 🌻💛
0:18

jelly with a beautiful sunflower shape 🌻💛

rrraarrraahey

349,196 Aufrufe • vor 11 Monaten

step by step heart shape process!!
0:12

step by step heart shape process!!

Alis

360,811 Aufrufe • vor 1 Tag

Crushmetric pen, a metallic, shape-shifting pen by artist Noah Deledda,
0:11

Crushmetric pen, a metallic, shape-shifting pen by artist Noah Deledda,

Science girl

41,915 Aufrufe • vor 10 Monaten

Learn how to cut different nape lines for women round, v shape and straight.
0:10

Learn how to cut different nape lines for women round, v shape and straight.

Learn Something

36,692 Aufrufe • vor 5 Monaten

Artists, GET READY The NFT bull is taking shape Collectors are buying >$500k of art on Shape $250k + $250k gifted by So what will you mint? Show them what to buy on day 1 below Shape Rotation Starts 9/30 ⚫
0:16

Artists, GET READY The NFT bull is taking shape Collectors are buying >$500k of art on Shape $250k + $250k gifted by So what will you mint? Show them what to buy on day 1 below Shape Rotation Starts 9/30 ⚫

Shape

208,892 Aufrufe • vor 1 Jahr