Mit den Tools von CSS und dem Browserlayout lassen sich beeindruckende Visualisierungen für Webinhalte erstellen. Die Verwendung von Web-Funktionen wie CSS-Filtern, WebGL, HTML5-Video, SVG, Canvas und sich weiterentwickelnden Zukunftstechnologien wie CSS-Regionen, CSS-Formen und benutzerdefinierten CSS-Filtern verspricht eine enorme Erweiterung der kreativen Möglichkeiten. Adobe arbeitet seit vielen Jahren mit Content-Creatorn zusammen, die sich für Layout und Design begeistern. Dieses Wissen hat das Unternehmen aktiv auf das Web übertragen und zu vielen sich entwickelnden Webstandards beigetragen.
Mithilfe von National Geographic haben wir Inhalte aus dem Artikel „Forest Giant“ verwendet, um einen Prototyp zu erstellen, der zeigt, wie diese Funktionen ein ansprechendes Weblayout und responsive Techniken ermöglichen können. In diesem Artikel erfahren Sie, wie wir einige besonders interessante Merkmale der Website entwickelt haben. Einen guten Überblick bietet dieses Video unten, in dem Christian Cantrell die verschiedenen Funktionen der Website vorstellt.
Feinheiten des Layouts
Was ein gutes Layout ausmacht und welche Funktionen dahinterstecken, ist nicht immer offensichtlich. Deshalb haben wir ein Overlay für den Editor erstellt, in dem die wichtigsten Funktionen hervorgehoben werden. Wenn Sie die Markierungen des Editors aktivieren möchten, klicken Sie auf die Leiste unten im Artikel.

Layoutunabhängig
Im Web wird das Layout heute oft von den Inhalten bestimmt, wobei sich Container vertikal vergrößern, um den Text aufzunehmen. Beim Erstellen komplexer Layouts können Änderungen am Text oder an anderen Inhalten unerwünschte Auswirkungen auf das Gesamtlayout haben. In diesem Fall müssen die Inhalte aufgrund unerwarteter Änderungen neu gestaltet werden. Mithilfe von Regionen können wir unsere Inhalte wirklich vom Layout trennen, indem wir ein Element als Inhalt definieren und dann die Teile des Layouts angeben, durch die dieser Inhalt fließen soll.
Im Beispiel „Forest Giant“ ist die Geschichte in einem einzigen Element enthalten. Auf der gesamten Seite sehen wir dann das Layout-Scaffolding, bestehend aus Fotos und Textbereichen. Mit CSS definieren wir die Elemente, durch die der Inhalt fließen soll. Wenn das Kopieren am Ende eines Elements angelangt ist, wird mit dem nächsten Element in der DOM-Reihenfolge fortgefahren. So können wir sehr kreativ mit unseren Spalten umgehen, sie versetzen und ihre Höhe an das Design anpassen, ohne uns Gedanken darüber machen zu müssen, ob der Text in das Element passt oder es übersteigt. Außerdem können wir Elemente in unserem Layout platzieren, z. B. Bilder in voller Breite, während die Story weiterläuft.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Im obigen CSS-Code erstellen wir einen benannten Ablauf namens „story“. Der Inhalt dieses benannten Ablaufs ist das Element mit der ID „storyContent“. Dieser wird dann auf alle Elemente mit dem Klassennamen „story“ angewendet. CSS-Regionen sind ein hervorragendes Tool für responsives Design. Sie ermöglichen Funktionen wie mehrere Spalten und versetzte Spalten für ein ansprechendes Layout auf großen Bildschirmen, während sie sich auf kleineren Bildschirmen an ein einspaltiges Layout anpassen. Bei Regionen können Sie die Größe auch mit responsiven Einheiten wie „vw“ oder „vh“ festlegen. So können Sie dafür sorgen, dass Spalten in Ihrem Layout nicht die Höhe des Darstellungsbereichs überschreiten, ohne sich Gedanken über abgeschnittene Inhalte machen zu müssen, da sie ganz natürlich in das nächste Element in der Regionskette übergehen.
Initiale
Mit CSS-Ausschlüssen können wir Text um oder innerhalb unregelmäßiger Formen brechen. Das kann für Designelemente wie Initialen nützlich sein. Initialen sind eine gängige Designtechnik, bei der der erste Buchstabe einer Geschichte oder eines Kapitels vergrößert wird, damit der Rest des Textes um die Kontur des Buchstabens herumlaufen kann. Dieser Effekt ähnelt dem Umbruch von Inline-Inhalten um Floats, ist aber nicht mehr auf rechteckige Felder beschränkt. Mithilfe von „shape-outside“ auf einem Floating-Element können wir die Geometrie definieren, mit der sich unsere Inhalte eng um die Form des Charakters legen.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Dadurch wird eine Ellipse erstellt, in der sich der Inhalt um die kreisförmige Form winden kann. Da wir für die Form relative Einheiten verwenden, wirkt sich eine Änderung der Größe des Elements auf die Größe der Form aus.

Formen
Neben Initialen können Sie mit Ausschlüssen auch Text innerhalb von Formen mit „shape-inside“ umbrechen. Wir verwenden diese Funktion auf der gesamten Website, insbesondere bei großen Bildunterschriften, und nutzen den Negativraum von Fotos, um den Text einzurahmen. Außerdem können wir Text an der Kontur anderer Bilder und Grafiken brechen, um Layouts zu emulieren, die bisher im Web nur sehr schwer zu realisieren waren.
Formen können auch mit responsiven Layouts funktionieren, wenn Sie relative Einheiten verwenden, um die Form zu definieren. So können wir Formen erstellen, die sich je nach Container oder Darstellungsbereich anpassen, und sogar Medienanfragen verwenden, um die Form vollständig zu ändern oder zu entfernen, da alles in CSS definiert ist. Unten sehen Sie ein Beispiel für eine Polygonform, die auf der Website verwendet wird, mit den Werten, die 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 Umbruch von Zeilen der gesamte Textblock innerhalb eines Elements berücksichtigt, anstatt Wort für Wort umzubrechen. So wird verhindert, dass nur ein oder zwei Wörter in einer Zeile stehen. Stattdessen werden Textzeilen umgebrochen, um Zeilen innerhalb eines Elements gleichmäßig zu gestalten. So können wir ganz einfach ästhetisch ansprechende Textblöcke erstellen, insbesondere für kurze Textzeilen wie Zitate oder Untertitel.
Genau hier verwenden wir im Artikel ausgewogenen Text. Da diese Funktion ein von Adobe vorgeschlagener Standard ist, verwenden wir eine von Randy Edmunds erstellte Polyfill, um dieselben Ergebnisse zu erzielen. Diese Funktion ist am besten in responsiven Fällen zu sehen. Wenn Sie die Größe des Browsers ändern, sehen Sie, dass der Block den Text weiterhin so ausrichtet, dass Zeilen ungefähr dieselbe Breite haben. Die Verwendung der polyfill für den ausgeglichenen Text ist einfach, da es sich um ein jQuery-Plug-in handelt. Wir müssen lediglich „balanceText()“ auf einen Selector anwenden, wenn sich das Layout ändert, um einen gut ausgewogenen Text zu erhalten, der so aussieht:
$('.balance').balanceText();

Übergänge filtern
Übergänge sind eine wichtige Möglichkeit, die Aufmerksamkeit der Nutzer zu lenken und den Status der Website zu kommunizieren. Mithilfe von Deckkraft und neuerdings auch 3D-Transformierungen lassen sich elegante Übergänge und Animationen erstellen, 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 von Graustufen zu Farbe zu wechseln, wenn einige Bilder in den Blick kommen. Diese Filter können mit Deckkraft oder anderen Filtern kombiniert werden, um komplexe Bildeffekte und Übergänge zu erstellen. Mit 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 Überblendungseffekte und 3D-Verzerrungen zu ermöglichen. Wenn Sie unten auf der Website auf „Explore the President Tree“ (Präsidentenstammbaum erkunden) klicken, wird die Seite eingerollt und ein weiterer Bereich darunter sichtbar. Das ist nur ein Beispiel dafür, wie benutzerdefinierte Filter ansprechende Übergänge zwischen Inhalten ermöglichen können. Die Animation kann mithilfe von CSS-Übergängen erstellt werden. Wenn Sie jedoch robustere Animationen oder Interaktionen verwenden möchten, als mit Übergängen möglich sind, können Sie Werte an Ihren Shader übergeben, indem Sie den Stil mit JavaScript festlegen, wie unten gezeigt. So können Sie die Übergänge genauer steuern oder sogar Methoden der Nutzereingaben verwenden, um den Shader zu manipulieren.
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 die Inhalte als Textur auf der GPU, um den Effekt anzuwenden. Deshalb müssen wir sie entfernen, sobald sie fertig ist, da unsere Inhalte sonst verschwommen erscheinen können.
$("#map").css("webkitFilter", "none");
Mit benutzerdefinierten CSS-Filtern lassen sich interessante Effekte erzielen, z. B. ein Seitenumbruch, der so aussieht, als würde in einem echten Buch eine Seite umgeblättert. Sie ermöglichen es Webentwicklern, komplexe Effekte in einer Sprache namens GLSL zu programmieren und auf Webinhalte anzuwenden. Weitere Informationen zu benutzerdefinierten Filtern, all diesen Parametern und ihrer Verwendung finden Sie in dieser Anleitung.

Texturen in WebGL vorab rendern
Das Juwel dieses Artikels war das erste vollständige Bild von „The President“, der nach Volumen der zweitgrößte Baum der Welt sein soll. Dieses Bild wurde erstellt, indem Hunderte von Fotos des Baums zu einem Gesamtbild zusammengefügt wurden. Wir wollten diesen Prozess simulieren, indem wir das Bild in eine Reihe kleiner Fotos aufteilen, die an ihren Platz fliegen, um das vollständige Bild zu erstellen. 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 schnell zu Leistungsproblemen führen, jedes Mal, wenn eine neue Textur auf dem Bildschirm dargestellt werden soll, ganz zu schweigen von zusätzlichen Netzwerkanfragen. Um dies zu vermeiden, haben wir unsere Texturen so groß wie möglich gemacht und sie für jede Kachel versetzt. Diese Technik wird oft als Sprite-Mapping bezeichnet und ist in der Spieleentwicklung üblich. Das führte zu drei großen Texturen für den gesamten Baum. Um den Leistungseinbruch zu vermeiden, der jedes Mal auftritt, wenn eine der Texturen zum ersten Mal auf dem Bildschirm sichtbar wird, rendern wir vor Beginn der Animation Quadrate mit einer Größe von 1 Pixel mit jeder der Texturen. Dadurch wird der Leistungseinbruch an den Anfang verschoben. So können wir den gesamten Baum flüssig durchfliegen und animieren, auch auf einem Tablet.
Um die Texturen zu verschieben, ändern wir die UV-Werte, mit denen die Textur der Geometrie zugeordnet wird. In Three.js sieht das 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 kann auch mit einem benutzerdefinierten GLSL-Shadermaterial erzielt werden, das die gezeichneten Koordinaten auf der Geometrie verschiebt.
Experimentelle Funktionen
Da einige der in der Demo verwendeten Funktionen noch experimentell sind, muss der Artikel in Chrome Canary geöffnet und alle für Chrome Canary auf dieser Website genannten Flags aktiviert werden.
Nachdem Sie Chrome Canary installiert und richtig konfiguriert haben, sehen Sie sich die Demo an. Das gesamte Projekt ist Open Source und auf GitHub verfügbar.
Fazit
Wir haben auch untersucht, wie diese Funktionen in mobilen Apps verwendet werden könnten, ähnlich wie bei einem E-Book. Sie können sich diesen Prototyp in der Entwicklung ansehen und sehen, wie wir die verschiedenen Interaktions- und Touch-Paradigmen nutzen, um diese Funktionen auf einem Tablet zu präsentieren.
Da sich das Layout von Webbrowsern ständig weiterentwickelt, wünschen sich viele Nutzer, dass die Produktionsqualität und Layoutqualität, die sie von herkömmlichen Leseinhalten gewohnt sind, beibehalten wird. 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 deutliches Zeichen dafür, dass das Web der Zukunft beides ermöglichen wird.