Creative Section Breaks Using CSS Clip-Path

Published: 21 September 2022
on channel: CSS Weekly

9,615

332

Learn how to use CSS clip-path and Clip Path editor in Firefox DevTools to create beautiful, fluid section breaks, dividers, and separators.

🔗 Links
Demo: https://codepen.io/ZoranJambor/pen/vY...
Clip-Path on MDN: https://developer.mozilla.org/en-US/d...
Clip-Path Converter: https://yoksel.github.io/relative-cli...

📖 Timestamps
00:00 Intro
00:30 How clip-path works
01:21 Creating a header separator using clip-path: ellipse()
01:46 How Clip Path Editor in Firefox DevTools works
05:06 Creating a slanted header separator using clip-path: polygon()
06:34 Creating interesting hero section shapes using clip-path polygon()
07:54 Creating fluid section separators using SVG with clip-path: url()
09:40 Using Clip-Path Converter to convert absolute clip-path to relative
11:38 Conclusion

Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: https://masteringlinting.com/

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Keep up-to-date with CSS Weekly:
👉 Twitter:   / cssweekly
👉 Instagram:   / cssweekly
👉 Facebook:   / cssweekly

Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter:   / zoranjambor
👉 LinkedIn:   / zoranjambor

Zoran Jambor
#css #frontend

On this page of the site you can watch the video online Creative Section Breaks Using CSS Clip-Path with a duration of hours minute second in good quality, which was uploaded by the user CSS Weekly 21 September 2022, share the link with friends and acquaintances, this video has already been watched 9,615 times on youtube and it was liked by 332 viewers. Enjoy your viewing!