CSS Shapes: un editor interattivo per Chrome

CSS Shapes Editor è un'estensione di Chrome che consente di modellare le forme delle CSS Shapes in tempo reale.

L'estensione creerà la sidebar Shapes all'interno del pannello Elements dei Chrome Dev Tools, cliccandovi verranno visualizzati gli stili shape e clip-path dell'elemento selezionato. Tramite i due pulsanti è possibile aggiungere (icona a forma di croce) oppure modificare (icona a forma di puntatore) un tracciato; per creare dei poligoni basta un semplice click sul tracciato per creare un nuovo punto dal quale estendere i lati.

CSS Shapes Editor può aiutare anche nei progetti responsive: come impostazione predefinita l'estensione utilizza il Pixel come unità di misura, ma accetta anche percentuali o l'unità relativa Em. Tenendo premuto il tasto Shift e cliccando sull'icona di modifica è possibile convertire automaticamente le unità inserite.

La semplicità d'uso ricorda le vecchie Mappe Immagini generate da Dreamweawer, con la grande differenza che questo strumento è gratuito e necessita almeno di una versione 37 di Google Chrome.

L'estensione può essere scaricata dal Web Store di Google Chrome: https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp