Loading...

The Firefox Shape Path Editor

8,853 views

Loading...

Loading...

Transcript

The interactive transcript could not be loaded.

Loading...

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Jun 12, 2018

Everything on the web starts as a rectangular box. You can use Clip Path and CSS Shapes to change that. Clip the shape of of the element, and make it a circle. Float something and get the content that flows around it to flow along the edges of a polygon. These CSS properties make much more interesting graphic design possible. But also, they can be tricky.

The Firefox Shape Path Editor is a tool you can use in Firefox 62 or later to help you edit the basic shape in CSS.

Demo at: http://labs.jensimmons.com/2018/02-00...

Shape Path Editor: https://developer.mozilla.org/docs/To...
CSS Shapes: https://developer.mozilla.org/docs/We...
Clip Path: https://developer.mozilla.org/docs/We...
Guide on basic shapes: https://developer.mozilla.org/docs/We...
Details on basic shapes syntax: https://developer.mozilla.org/Web/CSS...

Music by Vidian, http://beta.ccmixter.org/files/Vidian...
Photo of the bees by Karunakar Rayker, https://twitter.com/krayker

Loading...

When autoplay is enabled, a suggested video will automatically play next.

Up next


to add this to Watch Later

Add to

Loading playlists...