Webdesign – Drehende Coca Cola Dose mit CSS

Eine Cola Dose im Web, die sich rollen lässt

Rollende CocaCola-Dose?!

Guten Abend Leute,
ein bisschen HTML hier, ein bisschen CSS da – wer sich ein wenig damit beschäftigt, kann schnell die Basics erlernen und kleine Webseiten bauen. Aber wie steht es eigentlich mit interaktiven Elementen? Wie wäre es beispielsweise mit einer rollenden CocaCola Dose? Auch das ist möglich!


Das World Wide Web ist immer für eine Überraschung zu haben: Eine Coca Cola Dose, die man selbst drehen kann! Mehr kann man seine User nun wirklich nicht in die Seite integrieren! Man bedenke, dass diese Cola-Dose ausschließlich mit CSS gestaltet wurde! Also kein Javascript oder ähnliches! Was ich außerdem wirklich sehr begutachte ist, dass diese – ich nenne es mal – Animation sehr flüssig und sauber geworden ist. Wenn derartiges schon möglich ist, ist es kein Wunder, dass immer mehr Firmen auf eigenständige und gut konstruierte Webseiten stehen.
Natürlich stellt man sich hier die Frage, wie so etwas denn funktioniert. Fakt ist auf jeden Fall, dass hier mit mehrern Bildern gearbeitet wurde. Jeder “Scroll” ist ein neues Bild – somit müssten es mindestens 50 sein. Desweiteren wird der Befehl erteilt, dass sich die Dose nach links bis zum Rand bewegen kann, denn erst dadurch wird die Dose zum drehen gebracht.
Aber um nun mehr aus der Funktion rauszukitzeln, fehlt mir das nötige Wissen, wie solche CSS-Dosen programmiert werden. Werde ich näheres erfahren, werde ich euch natürlich informieren. Wie wäre es, wenn ihr selbst mal die Dose dreht – klickt einfach auf den folgenden Link.
Link: http://www.romancortes.com/blog/pure-css-coke-can/
Außerdem habe ich noch ein Papiervogel auf der gleichen Website von Román Cortés gefunden. Hier ist es beispielsweise möglich, die Lichtquelle zu positionieren!
Link: http://www.romancortes.com/blog/css-paper-bird/
Manche denken sich bestimmt, dass es gar nicht so schwer sein kann. Aber wer ab und zu mal programmiert, so z.B. CSS, weiß, dass es extrem schwer ist, Webseiten aufzubauen… außer man beschäftigt sich damit ein wenig länger ;-)
Was soll ich dazu sagen, ich kann sowas leider nicht ^^
Aber irgendwann werde ich mich mal damit beschäftigen und auch sowas kreieren.

Wie findet ihr die Coke? Klasse oder ;)


wallpaper-1019588
[Comic] Der Zauberer von Oz
wallpaper-1019588
UNIQLO – Neue Kollektion zu Final Fantasy vorgestellt
wallpaper-1019588
Pokémon GO: Neue Funktionen vorgestellt
wallpaper-1019588
Dragon Ball Xenoverse 2 – Neue Charaktere für den „Future Saga“-DLC angekündigt