CSS3 Das Zeichnen unkonventioneller Formen

Zeichnen vom Dreieck mit CSS

Einer der am häufigsten verwendeten Tricks ist die Verwendung der Funktion "Grenze/Rahmen" (engl. border) zum Zeichnen dreieckiger Formen. Dieser Trick verwirrt oft Entwickler, die sich zum ersten Mal treffen. Gleichzeitig können Sie ohne bessere Kenntnisse von CSS nicht einmal die tatsächlichen Möglichkeiten dieser Eigenschaft erkennen.

Zunächst ist es notwendig, die Implementierung der Grenzeigenschaft zu verstehen. Diese Eigenschaft besteht nämlich aus vier "Seiten" (border-left, border-right, border-top und border-bottom), die separat angepasst werden können. Durch Platzieren einer der Seiten wird ein Rechteck erhalten, das anhand der übertriebenen Abmessungen wie im folgenden Beispiel deutlich erkennbar ist:

Wenn jedoch eine der benachbarten Seiten platziert wird, wird die vorherige Form des Rechtecks in eine Trapezform umgewandelt, um diese beiden Seiten zu verbinden. Dies ist deutlich zu erkennen, wenn diese Seite eine andere Farbe hat. Natürlich ist es auch möglich, einen transparenten Hintergrund des Objekts zu verwenden, um den Effekt des "Ausschneidens" der Linie zu erzielen.

Wenn die Elementbreite auf 0 gesetzt ist, wird ein rechteckiges Dreieck erhalten. Es ist auch möglich, die andere benachbarte Seite transparent einzustellen, und durch Steuern der Breite dieser Seiten ist es möglich, verschiedene Dreieckskonfigurationen zu erhalten.

Wenn wir zu dem Schritt zurückkehren, in dem wir die Breite auf 0 setzen, können wir feststellen, dass es möglich ist, die Breite zu vergrößern und trapezförmige Formen zu erhalten.

Im folgenden Beispiel ist es möglich, die entsprechenden Eigenschaften mit Blick auf die Änderungen anzupassen:

Dieser Trick hat auch seine Einschränkungen, vor allem, weil es praktisch unmöglich ist, ihn mit der Eigenschaft „overflow: hidden“ zu kombinieren, um den Inhalt verborgen zu halten. Es gibt auch viele Einschränkungen für den Fall, dass die dreieckige Form in Form einer Linie anstelle einer ausgefüllten Form vorliegen sollte, wo begrenzte Anwendungsmöglichkeiten bestehen oder alternative Lösungen erforderlich sind.

DOM Elemente durch das Hinzufügen von Schatten ersetzen

Es gibt Fälle, in denen bestimmte visuelle Elemente auf die Seite angewendet werden. Zur Vereinfachung der DOM-Struktur, die häufig als "bevor" und "nach" Pseudoelemente verwendet wird, wird die Anzahl der zusätzlichen Elemente jedoch auf zwei begrenzt.

Wenn eine größere Anzahl visueller Elemente mit derselben Form benötigt wird, ist es möglich x-Eigenschaften der Schatten hinzuzufügen (engl. box-shadow). Während der Hauptzweck dieser Eigenschaft darin besteht, den Elementen Schatten hinzuzufügen, sollte beachtet werden, dass diese Eigenschaft das Anwenden von Schatten ohne das Bild zu verwischen (engl. blur) erlaubt. Es ist auch möglich, die Position des Schattens zu ändern, so dass es mit der Kombination mit relativen Einheiten ("rem", "em" ...) möglich ist, den Schatten relativ zu positionieren, was praktisch zu einer Kopie des Objekts wird.

Wenn mehr als ein Element benötigt wird, ist es genug, weitere Werte für den Schatten hinzuzufügen und ihn vom vorherigen Komma zu trennen. Es ist zu beachten, dass die Verwendung von negativen Werten möglich ist.

Zusätzlich zur Manipulation der vertikalen und horizontalen Verschiebung (engl. offset), d.h. der ersten beiden Werte der Box-Shadow-Eigenschaft, besteht die Manipulationsmöglichkeit der Ausdehnung und der Zusammenziehung des Schattens (engl. spread) nämlich des vierten Wertes. Durch Ändern dieses Werts ist es möglich, die Formgröße mithilfe negativer Einheiten zu ändern, um die Form zu verringern.

Durch die Kombination dieser Eigenschaften kann dieser Trick besonders nützlich für Animationen sein, in denen eine bestimmte Form mehrmals wiederholt wird.

Diese Anwendung hat natürlich ihre Nachteile. Vor allem, es erfordert oft mehr CSS-Code, insbesondere für Animationen kann es problematisch sein, obwohl es in einigen Fällen möglich ist, die Verwendung von Sass-Schleifen zu vereinfachen. Darüber hinaus gibt es eine Einschränkung der verwendbaren Formen, und vor allem ist es auf rechteckige, romboide und ellipsoide Elemente beschränkt.

Zu erwähnen ist auch eine Eigenschaft namens „filter: drop-shadow“, das gewissermaßen als "box-shadow" verwendet werden kann. Es gibt jedoch einen großen Unterschied in der Funktionsweise dieser beiden Eigenschaften, da „filter: drop-shadow“ auch für vorherige Schatten gilt, wenn mehrere Schatten verwendet werden, sodass die Anzahl der Objekte bei jedem Hinzufügen eines zusätzlichen Schattens dupliziert wird.

Zum Schluss dieses Tutorials

Dies sind nur einige der möglichen Tricks, die als Ersatz für SVG und Bilder verwendet werden können. Sie eignen sich besonders zum Animieren und können einfach an die Bedürfnisse der responsiven Website angepasst werden.

Natürlich werden diese Tricks im Allgemeinen ersetzt, wenn neue Features wie die "clip-path" Eigenschaft besser unterstützt werden, mit der praktisch jedes Objekt gezeichnet werden kann.

Bis dahin hoffen wir, dass unser Leitfaden zum Zeichnen ungewöhnlicher Formen mit CSS hilfreich sein wird.