Nach Teil 1 und Teil 2 bin ich mit einem dritten Artikel zurück, um weitere schicke Formen zu erkunden. Wie in den vorherigen Artikeln werden wir CSS Grid mit Clipping und Masking kombinieren, um schicke Layouts für Bilder zu erstellen ...
Nun, als wir uns das letzte Mal getroffen haben, verwendeten wir CSS Grid und kombinierten es mit CSS clip-path und mask Techniken, um Grids mit schicken Formen zu erstellen.
Hier ist nur eines der fantastischen Grids, die wir zusammen erstellt haben:...
In einem früheren Artikel habe ich die Fähigkeit von CSS Grid untersucht, komplexe Layouts mit seinen Auto-Placement-Fähigkeiten zu erstellen. Ich ging einen Schritt weiter in einem anderen Artikel, der einen Zoom-Hover-Effekt zu Bildern in einem Grid-Layout hinzufügte ...
Wir haben kürzlich darüber berichtet, wie man mit CSS mask Eigenschaften fancy borders erstellt, und jetzt schneiden wir die Ecken mit CSS mask *und* clip-path ab! Es gibt viele Techniken, um verschiedene Formen aus den Ecken eines beliebigen Elements auszuschneiden. …
Ich liebe Formen, besonders bunte! Formen auf Websites gehören in die gleiche Kategorie der Nützlichkeit wie Hintergrundfarben, Bilder, Banner, Trennlinien, Grafiken und vieles mehr: Sie können uns helfen, Kontext zu verstehen und unsere Handlungen durch Affordanzen zu informieren.
Ein …
Geradeaus oder nach unten, das ist die sprichwörtliche Reihenfolge für Benutzersteuerelemente auf einem Bildschirm. Wie eine Liste von Menüpunkten. Aber was, wenn wir das in ein flüssigeres Layout mit Biegungen, Kurven und Nischen ändern? Wir können es ziehen ...
Lassen Sie uns die üblichen Kreise und Balken, die wir normalerweise in Diagrammen sehen, für exzentrischere Formen beiseite lassen. Da Online-Präsentationen heutzutage immer häufiger vorkommen, ist ein schneller Weg, Ihre Web-Folien aufzupeppen und sie hervorzuheben ...
CSS Shapes ist ein Standard, mit dem wir geometrische Formen über floated Elements erstellen können, was dazu führt, dass die Inline-Inhalte – normalerweise Text – um diese Elemente herum entlang der angegebenen Formen umbrechen.
Ein solcher geformter Textfluss sieht gut aus ...
Mein Weg zum Erlernen von CSS war etwas unorthodox. Ich begann nicht als Front-End-Entwickler. Ich war Java-Entwickler. Tatsächlich waren meine frühesten Erinnerungen an CSS das Auswählen von Farben für Dinge in Visual Studio.
Es dauerte nicht bis später …
