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: [ Ссылка ]
Clip-Path on MDN: [ Ссылка ]
Clip-Path Converter: [ Ссылка ]
📖 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: [ Ссылка ]
Subscribe to CSS Weekly Newsletter:
💌 [ Ссылка ]
Keep up-to-date with CSS Weekly:
👉 Twitter: [ Ссылка ]
👉 Instagram: [ Ссылка ]
👉 Facebook: [ Ссылка ]
Keep up to date with what I'm up to:
🔗 Blog: [ Ссылка ]
👉 Twitter: [ Ссылка ]
👉 LinkedIn: [ Ссылка ]
- Zoran Jambor
#css #frontend
Creative Section Breaks Using CSS Clip-Path
Теги
cssfrontend developmentwebdevhtmlcss clip-pathclip-pathcss clip-path effectsclip-path cssbackground using css clip-pathclip-path uihtml css clip-pathcss section breakcss separatorfirefox devtoolsclip path editorcss clip-path editorclip-path editorclip-path devtoolsclip-path developer toolssvgsvg clip pathcss svg clip-pathcss shapesclip-path svg
