CSS Shapes Editor
Interactive editor for CSS Shapes.
Create and adjust CSS Shapes values with an interactive editor overlapping the selected element.
Update 21 May 2015:
---
For polygons, unit-less zero coordinates will inherit the non-zero sibling coordinate unit instead of defaulting to pixels.
Example 0 100% => 0% 100%
Shapes sidebar:
New sidebar to the DevTools Elements panel called "Shapes" which offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on the selected element.
Polygons:
Click the edges of the shape to add new points. Drag points to change the shape. Double-click points to remove them. Select the transform tool to move, scale and rotate the polygon shape.
Circles & ellipses:
Drag the shape to move it around. Pull on the edges and corners to scale and resize.
Update History
===
Update 13 Jan 2015:
---
Provides workaround for Chrome 40+ regression which causes editor to fail when selecting an element to edit.
Update 8 Dec 2014:
---
This extension has been wrongly accused of spreading malware. It does not.
Its source code is always available for inspection: https://github.com/oslego/chrome-css-shapes-editor
The latest release (Version 1.2.0) addresses some potential vulnerabilities exploitable by 3rd party malicious scripts.
If you experience malicious behavior from your browser, reset your browser settings:
https://support.google.com/chrome/answer/3296214
Latest reviews
Уже не работает ( Можно починить расширение? (
Very useful..especially the clip-path..I highly recommend people to watch video before using it.
Very useful..especially the clip-path..I highly recommend people to watch video before using it.
Couldn't figure out how to use it. Checked Dev Tools -> Elements and I see nothing new about shapes.
Couldn't figure out how to use it. Checked Dev Tools -> Elements and I see nothing new about shapes.
Great tool, thanks :D
Great tool, thanks :D
Useful when it works, very unreliable. I'll be working with a image then, reload the page to set my work back to the original and the extension will just not work. Or sometimes it will not work to begin with. At first I thought I was using it wrong but it seems like a fault with the extension
Can anyone tell me how can i use it bcz its not working in my PC. I already watched the demo video. Please help me.
Can anyone tell me how can i use it bcz its not working in my PC. I already watched the demo video. Please help me.
No acabo de ver la funcionalidad que tiene, si se integra con devtools, lo hace bastante mal y con opciones muy escondidas. Deberían aclarar cómo y dónde se integra y añadir las opciones. El link de personalización te lleva a Chrome Store.
I recommend reading the author's blog post, for some extra tips, like instantly changing units: http://razvancaliman.com/writing/css-shapes-editor-chrome/
I recommend reading the author's blog post, for some extra tips, like instantly changing units: http://razvancaliman.com/writing/css-shapes-editor-chrome/
A real time saver! Thanks!
A real time saver! Thanks!
Took me some time to figer it out... First: To access the functionality of the tool itself, the file being used with this extension as to be served by a server, local or distant. Second: select the element in the DOM. Third: select in the style tab (click on it), the actual part of shape-outside that form the shape ex.: polygone(...); code. Last: go to the shape tab and clic on the arrow. Have fun and get ready to use it, it's coming...!
Took me some time to figer it out... First: To access the functionality of the tool itself, the file being used with this extension as to be served by a server, local or distant. Second: select the element in the DOM. Third: select in the style tab (click on it), the actual part of shape-outside that form the shape ex.: polygone(...); code. Last: go to the shape tab and clic on the arrow. Have fun and get ready to use it, it's coming...!
Great and useful tool. Thanks!
Great and useful tool. Thanks!
I cant see the options.. I cant do nothing.. The extensions has only one option that take me to the chrome store page..
I cant see the options.. I cant do nothing.. The extensions has only one option that take me to the chrome store page..
Very useful tool.Unfortunately there are a lot reviews that have been made without even watching the video
Very useful tool.Unfortunately there are a lot reviews that have been made without even watching the video
Good idea, and good start! Though requires quite a few fixes for a long time: highly unpredictable, sometimes its doesn't display the shape in browser; you can't edit values in console; you can't adjust values that are defined in your CSS; no percentage support.
Good idea, and good start! Though requires quite a few fixes for a long time: highly unpredictable, sometimes its doesn't display the shape in browser; you can't edit values in console; you can't adjust values that are defined in your CSS; no percentage support.
Amazing plugin! Great work
Amazing plugin! Great work
ça marche pas
It is fully functional, however it does break some website displays in chrome dev channel for mac: Version 53.0.2783.2 dev (64-bit)
It is fully functional, however it does break some website displays in chrome dev channel for mac: Version 53.0.2783.2 dev (64-bit)
非常好用，感谢！感谢！
Спасибо))
very usefull
very usefull
thanks
thanks
制作不规则图像css很不错
I scanned in: C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\Extensions There's just JavaScript so why would there be malware? What the hell is happening in the 'User Reviews'?
doesn't work
doesn't work
Malware
配合Brackets做Css Shapes~
good..
good..
Malware. Took me manually deleting the files to remove it.
Malware. Took me manually deleting the files to remove it.
Malware, any extention you can't disable or remove by admins should be banned
Malware, any extention you can't disable or remove by admins should be banned
Love it, keep up the great work! :-D
Love it, keep up the great work! :-D
