Edit your CSS Shapes with the Shape Path Editor
For quick visual adjustments directly on the page
Have you ever wanted to create more interesting shapes on the web, or flow text around the details of an image? Shape paths can be hard to code without a visual reference, but Firefox provides a shape editor to make it quick and clear.
CSS provides a number of built-in shapes we can use – from inset boxes to circles, ellipses, and polygons. I’ll show you how to use the tool to inspect, edit, and create shapes directly in the browser.
Use the shape path editor to create and adjust shapes on the fly!
Resources:
Shape Demos shown:
Resilient Web Training & Consulting
Take full advantage of the universal web, and reduce maintenance over the long term with resilient HTML, CSS, and JS systems. OddBird provides custom consulting and in-depth trainings on front-end architecture and workflow – from advanced HTML/CSS to integrated design systems, component libraries, testing, and documentation.
Contact us for 1-3 day workshops with Miriam Suzanne, or custom web app creation with our team of Python, UX, and front-end experts.
Schedule a call with Miriam