Die Verwendung der Tools von CSS und Browserlayout kann beeindruckende Visualisierungen für Webinhalte ermöglichen. Die Verwendung von Webfunktionen wie CSS-Filtern, WebGL, HTML5-Videos, SVG, Canvas und neuen Technologien wie CSS-Regionen, CSS-Formen und benutzerdefinierten CSS-Filtern verspricht eine enorm erweiterte Creative-Landschaft. Adobe arbeitet schon lange mit Creatorn zusammen, die sich leidenschaftlich für Layout und Design begeistern, und wendet dieses Wissen aktiv im Web an, um viele sich weiterentwickelnde Webstandards zu erfüllen.
Mithilfe von National Geographic haben wir Inhalte der Funktion „Forest Giant“ verwendet, um einen Prototyp zu erstellen, der zeigt, wie diese Funktionen ein aussagekräftiges Web-Layout und responsive Techniken ermöglichen können. In diesem Artikel erfahren Sie, wie wir einige besonders interessante Merkmale der Website erstellt haben. Einen kurzen Überblick erhalten Sie in diesem Video unten, in dem Christian Cantrell Ihnen die verschiedenen Funktionen der Website näherbringt.
Feinheiten des Layouts
Was ein gutes Layout ausmacht und welche Funktionen dahinter stehen, können subtil sein. Deshalb haben wir ein Editor-Overlay erstellt, das die bemerkenswertesten Funktionen hervorhebt. Um die Markierungen zu aktivieren, klicken Sie auf die Leiste am unteren Rand des Artikels.
Layoutunabhängig
Im heutigen Web wird das Layout häufig durch unsere Inhalte vorgegeben, bei denen die Container vertikal vergrößert werden, damit der Text passt. Wenn Sie komplexe Layouts erstellen, können Änderungen am Text oder an anderen Inhalten unerwünschte Auswirkungen auf das Gesamtlayout haben und dazu führen, dass Inhalte aufgrund unerwarteter Änderungen neu gestaltet werden müssen. Mit Regionen können wir unseren Inhalt wirklich vom Layout trennen, indem wir ein Element als unseren Inhalt definieren und dann die Teile des Layouts festlegen, durch die der Inhalt fließen soll.
Im Beispiel von „Forest Giant“ ist die Geschichte in einem einzigen Element enthalten. Auf der gesamten Seite sehen wir dann unser Layout-Gerüst, bestehend aus Fotos und Textbereichen. Mit CSS definieren wir die Elemente, durch die der Inhalt fließen soll. Wenn die Kopie das Ende eines Elements erreicht, wird das nächste Element in der DOM-Reihenfolge aufgerufen. Auf diese Weise können wir mit unseren Spalten wirklich kreativ werden, sie verschieben und ihre Höhe an das Design anpassen, ohne uns Gedanken darüber zu machen, ob der Text passt oder die Höhe des Elements überschreitet. Außerdem können wir Elemente in unser Layout einbinden, wie z. B. Bilder in voller Breite, während die Geschichte durch das Layout fließt.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Im obigen CSS erstellen wir einen benannten Ablauf namens "story". Der Inhalt dieses benannten Ablaufs ist das Element mit der ID "storyContent". Anschließend werden alle Elemente mit dem Klassennamen "story" durchlaufen. CSS-Regionen sind ein großartiges Tool für responsives Webdesign, das Funktionen wie Mehrspalten- und Spaltenversatz für ein Rich-Layout auf großen Bildschirmen und die Anpassung an ein einspaltiges Layout auf kleineren Bildschirmen ermöglicht. Bei Regionen können Sie auch die Größe Ihrer Region mit responsiven Anzeigenblöcken wie vw oder vh festlegen. So können Sie dafür sorgen, dass die Spalten die Höhe des Darstellungsbereichs in Ihrem Layout nicht überschreiten, ohne befürchten zu müssen, dass Inhalte abgeschnitten werden, da sie automatisch in das nächste Element in der Regionskette übergehen.
Fallkappen
Mithilfe von CSS-Ausschlüssen kann Text um oder innerhalb von unregelmäßigen Formen umgebrochen werden. Dies kann bei Designelementen wie Drop-Caps nützlich sein. Bei der gebräuchlichen Designpraxis wird der erste Buchstabe einer Geschichte oder eines Kapitels vergrößert, damit der Rest des Textes um die Kontur der Figur fließt. Dieser Effekt ist dem Umschließen von Inline-Inhalten sehr ähnlich. Mit Ausschlüssen sind wir jedoch nicht mehr auf rechteckige Felder beschränkt. Mit „shape-outside“ in einer Gleitkommazahl können wir die Geometrie definieren, die es unserem Inhalt ermöglicht, die Form des Zeichens eng umzuschließen.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Dadurch wird eine Ellipse erstellt, sodass der Inhalt um die kreisförmige Form fließen kann. Da wir für die Form relative Einheiten verwenden, wirkt sich das Ändern der Größe des Elements auch in der Größe der Form aus.
Formen
Neben Drop-Caps können Sie mit Ausschlüssen Text innerhalb von Formen umbrechen. Wir nutzen diese Funktion auf der gesamten Website, insbesondere bei großen Bildunterschriften, wobei der Freiraum von Fotos genutzt wird, um den Text umrandet. Außerdem können wir Text entlang der Kontur anderer Bilder und Grafiken emulieren, die Layouts im Web emulieren, die zuvor nur sehr schwer zu erreichen waren.
Formen können auch mit responsiven Layouts verwendet werden, indem relative Einheiten zum Definieren der Form verwendet werden. Auf diese Weise können wir Formen erstellen, die sich basierend auf dem Container oder Darstellungsbereich dehnen, und sogar Medienabfragen verwenden, um die Form vollständig zu ändern oder zu entfernen, da alles in CSS definiert ist. Im Folgenden sehen Sie ein Beispiel für eine Polygonform, die auf der Website verwendet wird, wobei die Werte die Punkte definieren:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Ausgeglichener Text
Bei der Funktion „Ausgeglichener Text“ wird beim Zeilenumbruch der gesamte Textblock innerhalb eines Elements betrachtet, nicht Wort für Wort. Es werden Situationen vermieden, in denen ein oder zwei Wörter in einer einzelnen Zeile enthalten sind, indem Textzeilen aufgeteilt werden, um die Zeilen innerhalb eines Elements gleichmäßig zu verteilen. So können wir ganz einfach ästhetisch ansprechende Textblöcke erstellen, besonders bei kurzen Läufen wie z. B. Zitaten oder Untertiteln.
Genau an dieser Stelle verwenden wir den ausgewogenen Text im Artikel. Da es sich bei dieser Funktion um einen Standard von Adobe Propose handelt, verwenden wir einen Polyfill von Randy Edmunds, um dieselben Ergebnisse zu erzielen. Diese Funktion eignet sich am besten für responsive Schutzhüllen. Wenn Sie die Größe des Browsers ändern, werden Sie feststellen, dass der Block den Text so ausbalanciert, dass Zeilen mit etwa derselben Breite angezeigt werden. Das Polyfill mit ausbalanciertem Text ist einfach, da es sich um ein jQuery-Plug-in handelt. Wir müssen lediglich „balanceText()“ auf einen Selektor anwenden, wenn sich das Layout ändert, und wir erhalten einen ausgewogenen Text, der wie folgt aussieht:
$('.balance').balanceText();
Übergänge filtern
Übergänge sind ein wichtiges Mittel, um die Aufmerksamkeit der Nutzer zu lenken und den Status der Dinge auf Ihrer Website zu kommunizieren. Durch die Deckkraft – und seit Kurzem auch 3D-Transformationen – wurden sie verwendet, um reibungslose Übergänge und Animationen zu erzeugen, wenn Nutzer scrollen oder mit Teilen Ihrer Website interagieren. Wir haben jetzt Filter, die für denselben Zweck verwendet werden können.
In „Forest Giant“ verwenden wir Filter, um bei einigen Bildern von Graustufen in Farbe zu wechseln. Diese Filter können mit der Deckkraft oder anderen Filtern kombiniert werden, um komplexe Bildeffekte und Übergänge zu erzeugen. Mithilfe von benutzerdefinierten Filtern können wir noch dramatischere Effekte hinzufügen.
Benutzerdefinierte Filter werden mit GLSL geschrieben, derselben Schattierungssprache wie WebGL. Sie können diese Shader über CSS auf DOM-Elemente anwenden, um komplexe Mischeffekte und 3D-Verzerrungen zu ermöglichen. Wenn Sie am unteren Rand der Website auf „Explore the President Tree“ klicken, wird die Seite sich zusammengerollt und ein weiterer Abschnitt darunter zu sehen. Dies ist nur ein Beispiel dafür, wie benutzerdefinierte Filter umfassende Übergänge zwischen Inhalten ermöglichen können. Die Animation kann mithilfe von CSS-Übergängen erzielt werden. Wenn Sie jedoch robustere Animationen oder Interaktionen verwenden möchten, als es bei Übergängen möglich ist, können Sie Werte an Ihren Shader übergeben, indem Sie den Stil wie unten gezeigt mit JavaScript festlegen. Auf diese Weise können Sie das Easing noch detaillierter steuern oder sogar Methoden der Benutzereingabe zur Bearbeitung des Shaders zulassen.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
Unser Filter rastert den Inhalt als Textur auf der GPU, um den Effekt anzuwenden. Deshalb müssen wir sie am Ende wieder entfernen, da unsere Inhalte sonst möglicherweise unscharf erscheinen.
$("#map").css("webkitFilter", "none");
Benutzerdefinierte CSS-Filter ermöglichen interessante Effekte wie den Seitenumbruch, der aussieht, als würde eine Seite in einem echten Buch umgedreht. Damit können Webentwickler komplexe Effekte in einer Sprache namens GLSL programmieren und auf Webinhalte anwenden. Weitere Informationen zu benutzerdefinierten Filtern, all diesen Parametern und ihrer Verwendung finden Sie in dieser Anleitung.
Texturen in WebGL vorab rendern
Das Juwel in diesem Artikel war das erste vollständige Bild des „Präsidenten“, der vermutlich der zweitgrößte Baum der Welt nach Volumen ist. Dieses Bild wurde erstellt, indem Hunderte von Fotos des Baums zusammengefügt wurden, um ein vollständiges Bild zu erstellen. Wir wollten diesen Prozess simulieren, indem wir das Bild in eine Reihe kleiner Fotos zerlegen, die zusammenfliegen und das Gesamtbild ergeben. Dazu wurde WebGL verwendet, insbesondere die Three.js-Bibliothek, ein API-Wrapper auf höherer Ebene für WebGL.
Das Rendern einer großen Anzahl von Texturen kann bei jedem Versuch, eine neue Textur auf dem Bildschirm zu zeichnen, schnell zu Leistungsproblemen führen, ganz zu schweigen von zusätzlichen Netzwerkanfragen. Um diesen Wert zu verringern, haben wir unsere Texturen so groß wie möglich gestaltet und für jede Kachel verschoben. Diese Technik wird oft als Sprite-Mapping bezeichnet und ist in der Spieleentwicklung üblich. Daraus entstanden drei große Texturen für den gesamten Baum. Um die Leistungseinbußen zu vermeiden, sobald eine der Texturen erstmals auf dem Bildschirm sichtbar wird, rendern wir 1-Pixel-Quadrate mit jeder der Texturen, bevor die Animation beginnt, und verschieben die Leistung an den Anfang. So können wir problemlos durch den Baum fliegen und seine gesamte Höhe animieren, sogar auf einem Tablet.
Zum Versetzen der Texturen ändern wir die UVs, mit denen die Textur der Geometrie zugeordnet wird. In Three.js sieht sie so aus:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
Hier sehen Sie, dass wir eine Variable für den x- und y-Offset der Textur verwenden. Derselbe Effekt konnte mit einem benutzerdefinierten GLSL-Shader-Material erreicht werden, das die gezeichneten Koordinaten auf der Geometrie verschiebt.
Experimentelle Funktionen
Da sich einige der Funktionen, die in der Demo verwendet werden, noch in der Testphase befinden, muss der Artikel in Chrome Canary angesehen und alle für Chrome Canary genannten Flags auf dieser Website aktiviert werden.
Wenn Sie Chrome Canary installiert und richtig konfiguriert haben, sehen Sie sich die Demo an. (Beachten Sie, dass das gesamte Projekt Open Source ist und auf GitHub verfügbar ist.)
Fazit
Wir haben auch untersucht, wie diese Funktionen im Kontext mobiler Apps genutzt werden können, ähnlich wie in einem E-Book. Sie können sehen, wie dieser Prototyp gerade entwickelt wird und wie wir die verschiedenen Interaktions- und Touch-Paradigmen einsetzen, um diese Funktionen auf einem Tablet zu präsentieren.
Da sich das Layout von Webbrowsern ständig weiterentwickelt, sehen wir den Wunsch, den Produktionswert und die Layoutqualität, an die wir uns in der Vergangenheit bei älteren Leseinhalten gewöhnt haben, auch in Zukunft aufrechterhalten zu können. Mit Funktionen wie CSS-Regionen, Ausschlüssen, ausgewogenem Text, benutzerdefinierten Filtern und WebGL müssen Creator nicht mehr zwischen Reichweite und Designqualität wählen. „Forest Giant“ ist ein klares Zeichen dafür, dass das Web der Zukunft beides zulässt.