CSS Shapes Editor für Google Chrome

Mittels CSS-Shapes lassen sich zum Beispiel Bilder besser in den Textfluss integrieren, bzw. man kann selbst festlegen, wie der Text eine Grafik umfließt. Hier ein Beispiel:

Shape1

Im Code sieht das obere Beispiel so aus:

<img src="remote.png" align="left” style="shape-outside: polygon(0px 0px, 180px 16px, 365px 501px, 0px 506px);">

Die CSS-Shape ist als Polygon definiert. Allerdings ist es nicht gerade einfach die Werte von Hand festzulegen und im Code festzulegen. Eine Hilfestellung bietet sich hier in Form eines Google Chrome-Plugins an, dem “CSS Shapes Editor”. 

Nachdem das Plugin installiert ist, klickt man mit rechter Maustaste auf das gewünschte Element und wählt den Menüpunkt “Inspect Element” aus:

Inspect Element

Es öffnen sich die Entwickler-Tools. Durch Klicken auf den >> Button kann man den “Shapes”-Editor auswählen und durch Klick auf das Plus Icon dem Element die gewünschte Shape-Form hinzufügen. Zur Auswahl stehen Kreis, Ellipse und das Polygon:

Entwickler-Tools

Hat man die gewünschte Form hinzugefügt, klickt man auf den Zeiger (Pointer) neben dem Plus. Anschließend kann man die Form im Browser-Fenster bearbeiten.

Form bearbeiten

Änderungen werden direkt sichtbar. Ist das Ergebnis wie man es sich wünscht, kopiert man nur noch den Quelltext heraus. Eine Besonderheit gibt es zu beachten, bei mir hat der Editor nur funktioniert mit Dateien die auf einem Webserver lagen. Mit einer lokalen Datei funktionierte der Editor nicht. Also ggf. die HTML-Dateien einfach schonmal auf den Webspace kopieren.

Ich habe noch ein kleines Video erstellt, welches die Bedienung beschreibt:

Obwohl CSS-Shapes eine super Sache sind, funktionieren diese derzeit nicht in allen Browser. Google Chrome und Opera unterstützen diese. Firefox, Safari und Internet Explorer ignorieren diese bisher. 

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert