So. Der Tag ist gekommen. Lange Textblöcke langweilen Sie und Sie suchen nach einem neuen Format. Etwas Elegantes. Etwas Kompaktes. Etwas, das die lange Schriftrolle in ordentliche kleine Rechtecke schneidet und sie zusammenbindet. Ich nenne diese Erfindung „Buch“.
Dank der Funktionen von CSS-Regionen (CanIUse, chrome://flags aufrufen und CSS-Regionen aktivieren) und CSS-3D-Transformationen ist die neueste Buchtechnologie endlich in modernen Browsern verfügbar. Sie benötigen nur ein paar Zeilen JavaScript und eine Menge CSS.
Beginnen wir mit der Definition der Buchstruktur. Das Buch besteht aus Seiten und die Seiten haben jeweils zwei Seiten. Die Seiten enthalten den Buchinhalt:
<div class="book">
<div> <!-- first page -->
<div> <!-- front cover -->
# My Fancy Book
</div>
<div> <!-- backside of cover -->
# By Me I. Myself
## 2012 Bogus HTML Publishing Ltd
</div>
</div>
<!-- content pages -->
<div>
<!-- front side of page -->
<div class="book-pages"></div>
<!-- back side of page -->
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
</div>
Wir verwenden CSS-Regionen, um den Buchtext auf die Buchseiten zu verteilen. Aber zuerst benötigen wir den Buchtext.
<span id="book-content">
blah blah blah ...
</span>
Nachdem wir unser Buch geschrieben haben, definieren wir nun das CSS für den Fluss. Ich verwende das Zeichen „+“ als Platzhalter für das Anbieterpräfix. Ersetzen Sie es durch -webkit- für WebKit-Browser, -moz- für Firefox usw.:
#book-content {
+flow-into: book-text-flow;
}
.book-pages {
+flow-from: book-text-flow;
}
Jetzt werden die Inhalte aus dem Span #book-content stattdessen in die div-Elemente .book-pages eingefügt. Das ist jedoch ein ziemlich schlechtes Buch. Für ein Buch, das mehr nach Buch aussieht, müssen wir uns auf die Suche machen. Unsere Reise führt über die Regenbogenbrücke der CSS-Transformationen in das Uhrwerkreich von JavaScript. In den Hallen der mechanistischen Feenkönige werden wir epische Übergangsmagie entfesseln und die sagenumwobenen drei Schlüssel erhalten, die die Benutzeroberfläche der Überwelt steuern.
Der Wächter der Regenbogenbrücke teilt uns die Weisheit stilvoller struktureller Auswahlmöglichkeiten mit, damit wir unsere HTML-Buchstruktur in eine eher buchförmige Form bringen können:
html {
width: 100%;
height: 100%;
}
body {
/* The entire body is clickable area. Let the visitor know that. */
cursor: pointer;
width: 100%;
height: 100%;
/* Set the perspective transform for the page so that our book looks 3D. */
+perspective: 800px;
/* Use 3D for body, the book itself and the page containers. */
+transform-style: preserve-3d;
}
.book {
+transform-style: preserve-3d;
position: absolute;
}
/* Page containers, contain the two sides of the page as children. */
.book > div {
+transform-style: preserve-3d;
position: absolute;
}
/* Both sides of a page. These are flat inside the page container, so no preserve-3d. */
.book > div > div {
/* Fake some lighting with a gradient. */
background: +linear-gradient(-45deg, #ffffff 0%, #e5e5e5 100%);
width: 600px;
height: 400px;
overflow: hidden;
/* Pad the page text a bit. */
padding: 30px;
padding-bottom: 80px;
}
/* Front of a page */
.book > div > div:first-child {
/* The front side of a page should be slightly above the back of the page. */
+transform: translate3d(0px, 0px, 0.02px);
/* Add some extra padding for the gutter. */
padding-left: 40px;
/* Stylish border in the gutter for visual effect. */
border-left: 2px solid #000;
}
/* Back of a page */
.book > div > div:last-child {
/* The back side of a page is flipped. */
+transform: rotateY(180deg);
padding-right: 40px;
border-right: 2px solid #000;
}
/* Front cover of the book */
.book > div:first-child > div:first-child {
/* The covers have a different color. */
background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
/* Put a border around the cover to make it cover the pages. */
border: 2px solid #000;
/* And center the cover. */
margin-left: -1px;
margin-top: -1px;
}
/* Back cover of the book */
.book > div:last-child > div:last-child {
background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
border: 2px solid #000;
margin-left: -1px;
margin-top: -1px;
}
Wenn wir also einen etwas papierförmigen Stil für unsere HTML-Datei erstellen, gelangen wir an die Tore des JavaScript-Königreichs mit seinen Billionen von Zahnrädern. Damit wir durch das Tor gelangen, müssen wir unser flaches Buch in ein richtiges Buch verwandeln. Um dem Buch mehr Volumen zu verleihen, haben wir jede Seite leicht auf der Z‑Achse versetzt.
(function() {
var books = document.querySelectorAll('.book');
for (var i = 0; i < books.length; i++) {
var book = books[i];
var pages = book.childNodes;
for (var j = 0; j < pages.length; j++) {
if (pages[j].tagName == "DIV") {
setTransform(pages[j], 'translate3d(0px, 0px, ' + (-j) + 'px)');
}
}
}
})();
Die Umwandlungsmagie, um die Feenlords zu beeindrucken, ist nicht die schwierigste Beschwörung. Die Ergebnisse sorgen jedoch dafür, dass die Seiten unseres Buches flüssig umgeblättert werden.
.book > div {
+transition: 1s ease-in-out;
}
Damit die Seiten sich tatsächlich umblättern, müssen wir die Ereignisse selbst mit unserer Sache verknüpfen.
(function(){
// Get all the pages.
var pages = document.querySelectorAll('.book > div');
var currentPage = 0;
// Go to previous page when clicking on left side of window.
// Go to the next page when clicking on the right side.
window.onclick = function(ev) {
if (ev.clientX < window.innerWidth/2) {
previousPage();
} else {
nextPage();
}
ev.preventDefault();
};
var previousPage = function() {
if (currentPage > 0) {
currentPage--;
// Rotate the page to closed position and move it to its place in the closed page stack.
setTransform(pages[currentPage], 'translate3d(0px,0px,' + (-currentPage) + 'px) rotateY(0deg)');
}
};
var nextPage = function() {
if (currentPage < pages.length) {
// Rotate the page to open position and move it to its place in the opened stack.
setTransform(pages[currentPage], 'translate3d(0px,0px,' + currentPage + 'px) rotateY(-150deg)');
currentPage++;
}
};
})();
So haben wir die „Buch“-Technologie erworben und können die Kristalltürme der Überwelt evakuieren und den blendenden Glanz und die heftigen Kernfeuer von Achenar, dem großen blauen Stern des Überwelt-Nexus, hinter uns lassen. Triumphierend kehren wir zu unseren Häusern zurück, schwingen unsere Bücher hoch über unseren Köpfen und sind bereit für die unvermeidliche Kaskade von Paraden und Feiern zu unseren Ehren.
Hier finden Sie ein Beispiel und die vollständigen Quellcodes. Wenn Sie in Ihrem Browser keine CSS-Regionen haben, sieht das Beispiel ziemlich kaputt aus. In diesem Fall können Sie stattdessen dieses Beispiel ausprobieren.