Anzeige
Anzeige
News
Artikel merken

Beindruckende CSS 3D Demo: „Making Love To WebKit“

Steven Wittens hat sein Blog „Acko.net: Hackery, Design & Math“ redesignt und dabei die bisher statische und von Hand gezeichnete 2D Headergrafik mit dynamischen „echten“ 3D-Elementen mittels CSS 3D Transforms ersetzt – ohne dabei auch nur eine einzige Grafik zu verwenden. Herausgekommen sind dabei eindrucksvolle 3D-Scrolleffekte mit räumlicher Tiefe. Wie er das genau gemacht hat, stellt er in einem Blogpost „Making Love To WebKit“ vor. Wir fassen hier das Wichtigste kurz für euch zusammen.

Von Monika Steinberg
2 Min. Lesezeit
Anzeige
Anzeige
Making Love to Webkit

Acko.net Blog: Redesign mit CSS 3D Transforms

3D mit CSS, three.js und DOM

Steven hat für die dreidimensionalen Perspektiven in seinem „Making Love To WebKit“ Demo CSS 3D Transforms und three.js – Mr. Doob’s JavaScript 3D Engine – verwendet. Three.js ist eine umfangreiche JavaScript 3D API mit der man Szenen, Kameras, Objekte, Lichter, Materialien und mehr im Browser erstellen kann. Derzeit funktioniert Stevens 3D Demo nur mit WebKit-Browsern wie Chrome und Safari, die CSS 3D bereits jenseits des Betastadiums unterstützen. Aber bald werden auch Internet Explorer 10 und Firefox bei CSS 3D mit an Bord sein, wie er in seinem Blogpost schreibt. Auf WebGL hat Steven absichtlich verzichtet da es keine DOM-Elemente oder native Interaktion unterstützt und beim Scrollen zuviel Verzögerung bedeutet hätte. Neben der umfassenden Standardbibliothek für 3D-Manipulation hat three.js den Vorteil, dass die Rendering-Komponente flexibel austauschbar ist. Man hat die freie Wahl zwischen 2D Canvas, WebGL Canvas oder SVG und bleibt so erst einmal unabhängig bei der Ausgabe.

Acko.net: Altes Design mit Grafik ohne CSS 3D

Anzeige
Anzeige

Verschieben oder Drehen eines Objekts geschieht in Stevens 3D-Demo nur über die Änderung einer CSS-Eigenschaft. Das Gleiche gilt für die Kamera: Die gesamte Szene ist in einem <div>-Tag eingepackt, das seine eigene 3D Transformation hat. Steven hat dann einen CSS 3D Renderer ergänzt, der eine three.js Szene ausliest und als DOM-Objekt mit gewünschter 3D-Position, Orientierung und Aussehen ausgibt. Das funktioniert so nur mit einfachen geometrischen Formen wie Linien oder Rechtecken aber mehr ist hier auch gar nicht nötig wie Steven schreibt.

Acko.net: DOM Baum

Wie kommt man eigentlich auf so etwas?

Stevens Idee begann mit einer zufälligen Entdeckung: Wenn man eine CSS Perspektive auf einem scrollbaren <div> platziert, dann behalten die 3D Elemente im Inneren des <div> Tags ihre Perspektive während des Scrollens. Das führt zu nativen Parallaxeffekten und lässt die Objekte quasi aus der Seite springen. Daraufhin hat er sich gefragt, wie weit man das wohl treiben kann. Und er hat es weit getrieben indem er auch noch einen eigenen Editor geschrieben hat.

Anzeige
Anzeige

Acko.net: 3D Szenen Editor von Steven Wittens

Der Editor hilft ihm dabei, seine 3D-Objekte mit verschiedenen Koordinaten in einer three.js-Szene zu platzieren und auf einfache Art und Weise aus verschiedenen Blickwinkeln mit Position, Orientierung, Tiefe und Schattierung zu versehen. Laut Steven wäre das von Hand „ein Projekt für die Ewigkeit“ gewesen.

Anzeige
Anzeige

Weitere Einzelheiten zu Designprozess, Performance oder Publishing dieses abgefahrenen CSS 3D Demos findet Ihr in Stevens Blogpost oder im zugehörigen Google+ Thread.

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
19 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

manuel

Euer Beitrag nutzt verdammt viel. Die Seite wie hier abgebildet gibt es gar nicht mehr. Die ist jetzt nur schwarz(weiß.

Antworten
Alexander Wachert

Warum das so ist, steht aber auch auf der Seite :P Das ist der ganze SOPA Quatsch den grad viele Webmaster abziehen. Wird morgen oder im Laufe des Tages sicher wieder „hybsch“ bunt sein ;)

Hats mal jemand auf einem Smartphone geöffnet (z.B. gestern als Jan drüber geticket hat auf G+)? Selbst da läuft das erstaunlich gut… (Android auf Desire-Z).

Antworten
Christoph

Nicht gleich nörgeln… zuerst mal lesen wieso die Seite heute in SW ist – steht alles auf der Seite selbst.

Antworten
manuel

Ich nörgel ja nicht gleich. Ich mein ja nur dass sich t3n ein anderes Veröffentlichungsdatum für diesen Artikel aussuchen hätte können anstatt dann, wenn die Seite schwarz-weiß ist ;)

Antworten
Monika Steinberg

Hallo zusammen,

danke für die Hinweis!
das war uns auch nicht klar, dass der Artikel gerad heute wegen der Proteste in US auf Schwarz-Weiss geschaltet wird.
Aber die 3D-Effekte in z.B. Safari sind schon noch am Start und der Artikel taucht bestimmt bald wieder auf.

Viele Grüße
Moni

Antworten
Steven Wittens

Keine Zensur ohne Umgehung. Bitte Die Amerikanen nicht erzahlen. ;)
http://new.acko.net/

Dank für das Artikel.

Antworten
Monika Steinberg

Steven hat uns gerade einen Link geschickt der den Blackout umgeht und den Artikel heute schon wieder anzeigt – besten Dank @Steven dafür:

http://t.co/2BLU1ct

Antworten
fimbim

@Monika: Den Link solltest du eigl. nicht unbedingt posten, sondern lieber die SOPA-Gegner unterstützen. Hab´s mir gebookmarked und schau morgen noch mal rein, wenns wieder läuft. Das ist ja Sinn und Zweck einer Revolte…

Antworten
Peter

@Monika: Danke für den Link!
@fimbim: Why SOPA is dangerous

Antworten
Fabian

Sehr beindruckend. Nette Idee! Ist wohl der Anfang des Web 3D;-)

Antworten
Monika Steinberg

@Steven Wittens thank you for the nice 3D demo and your reply – we keep quiet and won’t tell the Amis ;)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige