Wenn der aktuelle Trend im Flat-Design gezeigt hat, wie unglaublich begrenzt Web-Designer sind, wenn es um die Komposition geht. Jetzt, wo wir nicht mehr von Fasen, Farbverläufen und Glanz abgelenkt werden, ist klar, dass Webdesigner eine Struktur haben, um ihre Designs zu erstellen: Rechtecke.
Natürlich gibt es so viele Möglichkeiten, Rechtecke zu gruppieren, wie es Pixel auf einem Bildschirm gibt, aber wenn man die Anforderungen des Typs und die Notwendigkeit des Designs für unterschiedliche Auflösungen berücksichtigt, erscheinen die Layoutoptionen deutlich begrenzt.
Wir alle wissen, dass alle Ecken keine rechten Winkel sind; wir alle wissen, dass Linien nicht immer gerade sind. Tatsächlich ist das aufregendste Design des letzten Jahrhunderts aus dem Raster gebrochen und hat sich in Bögen und Winkeln abgespalten, was Spannung, Dramatik und Spannung erzeugt hat. Es ist ein einfacher Vorschlag im Druckdesign: Öffnen Sie ein Dokument in InDesign, wählen Sie das Ellipsenwerkzeug und zeichnen Sie einen Kreis auf der Bühne, wählen Sie das Textwerkzeug und klicken Sie auf den Kreis, fügen Sie nun Ihren Text ein; Jetzt versuche dasselbe in CSS, mach weiter, ich mache einen Kaffee während ich warte ...
Natürlich gibt es viele Möglichkeiten, einen Kreis auf einer Webseite zu zeichnen, aber wenn Sie Text um einen herum schweben, werden Sie feststellen, dass es sich nicht wirklich um einen Kreis handelt. seine Begrenzungsbox ist immer noch rechteckig. Die einzige Option zum Erstellen von Text, der zu einer Kurve schwebt, ist das Einfügen von Leerzeichen am Anfang jeder Zeile und von Zeilenumbrüchen am Ende, wodurch der Text künstlich eingerückt wird. etwas, das die Zugänglichkeit beeinträchtigt.
Um das Problem anzugehen, entwickelt das W3C CSS Shapes. Veröffentlicht am 20. Juni ihren ersten öffentlichen Arbeitsentwurf, CSS Formen Modul Level 1, erläutert die Verwendung nicht rechteckiger Formen in Bezug auf das Boxmodell und das Schwimmverhalten. Derzeit sind die vorgeschlagenen CSS-Erweiterungen in Bearbeitung, einschließlich der Formen Rechteck, Einfügung-Rechteck, Kreis, Ellipse und Polygon.
In der ersten Implementierung werden wir nur in der Lage sein, Formen zu schweben. Dazu verwenden wir die Shape-Outside-Eigenschaft wie folgt:
Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.