Fundstück

Entwicklerin baut Teslas Cybertruck in CSS

So sieht der Cybertruck mit CSS gebaut aus. (Screenshot: t3n.de)

Designerin Lynn Fisher, bekannt für tiefste CSS-Kenntnisse, hat Teslas Cybertruck dermaßen beeindruckt, dass sie sich veranlasst sah, das Gefährt auf Codepen in reinem CSS nachzubauen. Auch andere fühlen sich inspiriert.

Lynn Fisher ist Künstlerin, Designerin und Entwicklerin und löst nach eigenem Bekunden gern hartnäckige CSS-Probleme. Sie lebt und arbeitet im amerikanischen Arizona, wo sie mit ihrem Ehemann und zwei Hunden ein kleines Studio neben ihrem Hauptjob als Kreativchefin der Agentur Andyet betreibt.

Lynn Fishers Codepen. (Screenshot: t3n.de)

Lynn Fishers Codepen. (Screenshot: t3n.de)

Die Vorstellung des Tesla Cybertruck vor einigen Tagen war bekanntlich nicht frei von Pannen. Lynns Umsetzung des Gefährts in CSS ist es auf jeden Fall. Egal ob im Chrome, im Firefox oder im Safari, Lynn Cybertruck sieht stets gleich aus. Für die ungewöhnliche Optik als solches kann sie immerhin nichts.

Und er bewegt sich doch…

Auch der Frontend-Entwickler Jhey Tompkins nahm sich des Cybertrucks an und baute mit 427 Zeilen CSS und etwas HTML eine ganz ähnliche Version des futuristischen Pickups. Jheys Variante zeigt den neuen Tesla dabei sogar fahrend. Dabei funktionieren die Animationen unter Chrome und Firefox einwandfrei, Safari hingegen kann die Drehbewegungen der Räder nicht zeigen. Hatten wir da nicht erst was zu?

Jhey Thompsons Codepen. (Screenshot: t3n.de)

Jhey Thmpkins Codepen. (Screenshot: t3n.de)

Es ist wohl davon auszugehen, dass sich weitere Entwickler inspiriert fühlen werden, eigene Versionen des Tesla-Pickup zu bauen. Von daher lohnt es sich, gelegentlich den Tag Cybertruck auf Codepen unter diesem Link zu checken.

Viel Spaß dabei.

Passend dazu: Flexibler als gedacht: Was du mit CSS inzwischen umsetzen kannst

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

2 Kommentare
Adrian Koch

Form follows function.
Ich bin kein Fan von diesem Minimalismus, aber der hype ist real.

Antworten
Ludwig Franck
Ludwig Franck

Hier werden viele teuere Presswerkzeuge vermieden.
Super Konstruktion.

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

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

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

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung