Share
Im vorherigen Tutorial haben wir einen kurzen Einblick in die Erstellung von CSS-Shapes erhalten, sodass wir die wahre Form eines Elements definieren können. Wir haben die Grundlagen angesprochen. Erstellen eines Kreises und Einwickeln einiger Textzeilen. Sehen wir uns nun komplexere Formen an, um unsere Seitenlayouts reicher und weniger kantig zu gestalten.
Neben einfachen Formen wie Kreisen und Rechtecken können wir auch erstellen Polygone; Formen, die aus mehreren (typischerweise fünf oder mehr) Seiten bestehen, wie z. B. einem Fünfeck oder einem Sechseck. Um eines zu erstellen, verwenden wir das CSS Polygon () Funktion, die mehrere durch Kommas getrennte Werte verwendet, um die Formkoordinaten zu definieren:
Accentsconagua
.Form Schwimmer: links; Hintergrundgröße: enthalten; Hintergrundwiederholung: keine Wiederholung; Marge: 30px; Breite: 265px; Höhe: 265px; Formrand: 20px; .pentagon background-image: url ('… /img/pentagon.svg'); Außenform: Polygon (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Mit dem obigen Code haben wir fünf Koordinaten hinzugefügt, wodurch eine Pentagonform erzeugt wird. Wenn Sie der Funktion eine weitere Koordinate hinzufügen, wird die Form in ein Sechseck, eine weitere für ein Siebeneck, eine andere für ein Achteck usw. umgewandelt.
Das manuelle Erstellen einer Polygonform ist nicht so einfach wie das Erstellen eines Kreises oder einer Ellipse, insbesondere wenn das Polygon komplex ist und Dutzende von Koordinaten umfasst. Glücklicherweise gibt es ein praktisches Werkzeug, das das Erstellen von CSS-Shapes intuitiver macht.
CSS Shapes Editor ist eine Chrome-Erweiterung. Nach der Installation wird eine neue Registerkarte mit dem Namen hinzugefügt Formen in DevTools unter der Elemente Tab, inline mit den anderen Unterregistern (Styles, Computer, usw.)
Das Formen Registerkarte enthält a Form außen Eigenschaft gepaart mit einem Plus + sign, um uns beim Hinzufügen von CSS-Shape-Funktionen zu helfen. Lass uns das auswählen Polygon () und das Element auf der Seite. Dann können wir die Form wie eine Grafikanwendung direkt im Browser zeichnen.
Beim Zeichnen aktualisiert die Browsererweiterung unsere Polygonfunktion mit den jeweiligen Koordinaten der gezeichneten Form und fügt sie dem Element gleichzeitig als Inline-Stil hinzu. Kopieren Sie anschließend den generierten Code und fügen Sie ihn in Ihr Stylesheet ein.
Generierte PolygonkoordinatenMit dieser Technik können wir auf unserer Webseite jede Form oder Form zeichnen und anwenden, zum Beispiel:
Bild aus So fügen Sie mit Adobe Photoshop einer Regenszene Drama hinzuEin weiterer möglicher Wert, den wir im verwenden können Form außen Eigenschaft ist die URL () Funktion; Dieselbe Funktion, die wir an anderer Stelle in CSS verwenden, um ein Hintergrundbild hinzuzufügen. In diesem Fall die URL () Funktion aktiviert die Form außen Eigenschaft zum Definieren einer Elementform basierend auf dem Bild.
Sie können die Option verwenden URL () Funktion statt Polygon () Wenn Sie eine besonders komplexe Grafik haben, mit vielen Kurven und Ecken, und Sie möchten, dass Ihr Inhalt reibungslos um sie herum verläuft. Oder beim Umgang mit benutzergeneriertem Inhalt, bei dem das Definieren der Form schwierig sein kann.
Wir werden diesen Ara-Papagei von Unsplash verwenden. Zuerst müssen Sie eine Version mit Transparenz erstellen, zum Beispiel:
Die Form unseres Ara PapageisDas ursprüngliche Papageienbild wird dem Container als Hintergrundbild hinzugefügt:
.Behälter Hintergrundwiederholung: keine Wiederholung; Hintergrundbild: URL ('… /img/parrot.png'); Für das Shape selbst fügen wir das zu einem anderen Element innerhalb des Containers hinzu und verwenden diesmal eine andere CSS-Shape-Eigenschaft mit dem Namen Form-Bild-Schwelle.
.Form Formrand: 15px; Form außerhalb: URL ('… /img/parrot-shape.png'); Form-Bild-Schwelle: 0; Diese besondere Eigenschaft legt den Grenzwert für minimale Transparenz fest, der die Bildform definiert. es dauert eine Zahl zwischen 0 zu 1 als Wert. Wenn Sie ein leicht transparentes Bild haben, möchten Sie es vielleicht auf einstellen 0,8 oder 0,5. Wir haben unseren Wert auf gesetzt 0 da der die Papageienform umgebende Bereich vollständig transparent ist.
Das Ergebnis sollte ungefähr so aussehen:
Die Browser-Unterstützung für CSS-Shapes ist anständig. Erwarten Sie jedoch nicht viel von Firefox, Internet, Explorer oder Edge. Als Antwort auf Stephens Frage im vorherigen Tutorial haben wir mehrere Möglichkeiten.
„Das ist eine coole, aber echte Frage: Was ist der Rückfall für IE / FF? Es scheint, als würde ein All-In mit einem Shape-Layout für viele Benutzer an einigen seltsamen Orten landen. ”- Stephen Bateman
Erstens können wir Modernizr verwenden. Modernizr ist eine zuverlässige JavaScript-Bibliothek für das Testen von Browserfunktionen. Stellen Sie sicher, dass Sie die aufgenommen haben CSS-Formen und das CSS hinzufügen Klassenoption beim Herunterladen der Bibliothek. Dann können Sie die Layoutstile angeben, wenn CSS Shape nicht unterstützt wird, wie folgt:
/ ** * Wenn der Browser "CSS Shape" nicht unterstützt. * / .no-Shapes .Shape Shape-Outside: Polygon (); / ** * Styles, wenn der Browser "CSS Shape" unterstützt. * / .shapes .shape
Wenn das Laden von Modernizr zu groß erscheint, da Sie nur testen müssen, ob der Browser CSS aktiviert hat, können Sie die folgenden JavaScript-Zeilen hinzufügen.
if ('undefined' === type of document.querySelector ('. shape'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Jede Eigenschaft in CSS wird mit einem gleichwertigen Objekt unter dem JavaScript-Style-Objekt geliefert, sodass wir den Stil dynamisch durch JavaScript hinzufügen können. Dieser Code erkennt, ob der Browser die ShapeOutside Wenn das nicht der Fall ist, fügen wir die Methode hinzu keine css-form Klasse, die wir verwenden können, um die Fallback-Stile hinzuzufügen.
.Form Form außerhalb: Polygon (); .no-forms .shape
Schließlich können wir das CSS verwenden @Unterstützung Syntax im Stylesheet zum Beispiel.
@Unterstützt (Shape-Outside: Circle ()) .Shape Shape-Outside: Circle ();
Es liegt an Ihnen, zu entscheiden, welcher Ansatz am besten zu Ihrem Projekt passt.
Eine großartige Sache bei CSS Shapes ist, dass es einen natürlichen Fallback gibt. Kein biggie. Habe ein Quadrat. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@jensimmons) 11. Februar 2015
In diesem Tutorial haben wir herausgefunden, wie Sie die Polygon () Funktion in CSS Shape und lernte, wie wir mit einer Chrome-Erweiterung Polygone mühelos zeichnen können. Wir haben auch gelernt, wie man ein Bild nutzen kann, um Formen für uns zu zeichnen. besonders nützlich bei zu komplexen formen. Trotz der vernünftigen Browserunterstützung von CSS Shapes sprachen wir über die Verwendung von Alternativen für nicht unterstützte Browser.
