IT Wissenssplitter
Sorry, Bild fehlt

IT Wissenssplitter

Sherlock und Desiderat

Sorry, Bild fehlt

CSS hacken

Css wird eigentlich benutzt, um Webseiten ansehnlich zu gestalten. Hacken, bedeutet, dass man Dinge nicht so verwendet, wie sie eigentlich gedacht sind, sondern etwas Neues erschafft. Auf Wikipedia ist ein Aussage von Wau Holland, einem Gründer des Chaos Computer Clubs, zu finden, wonach ein Hacker jemand ist, der versucht einen Weg zu finden, wie man mit einer Kaffeemaschine Toast zubereiten kann (Siehe: Wikipediabeitrag zum Thema Hacker).
Nicht immer ist ein Hack nützlich, manchmal geht es einfach darum zu sehen, ob man etwas umsetzen kann.
Aber wie kommt man darauf einen Pinguin mittels HTML und CSS zu malen? Für den ersten LinuxPresentationDay 2021 suchte ein befreundeter Linuxer Leute, die Spaß daran haben an einem Wettbewerb teilzunehmen, bei dem animierte Gifs eingereicht werden sollten. Die Idee fand ich gut, war aber gerade dabei diese Webseite zu erstellen und beschäftigte mich daher grade mit den Gestaltungsmöglichkeiten von Webseiten mittels CSS.
Von da an war es nur noch ein kurzer Weg zur wahrscheinlich einer der umständlichsten Arten einen bewegten Pinguin zu malen.

Willst Du wissen wie es gemacht wurde?

Hier nur der HTML-Teil, in dem fast nur Buttons ohne Funktion definiert wurden:
Hier nun der CSS-Teil, in dem die Formen und Funktionen definiert wurden.
Es gibt einen HTML-Teil, in dem fast nur Buttons ohne Funktion definiert wurden und einen CSS-Teil, in dem die Formen und Funktionen definiert wurden. Das ist normalerweise in zwei getrennten Dateien, hier habe ich es in einer zusammen gefasst:
Wie Du siehst ist das alles kein Hexenwerk. Dennoch hier ein paar Anmerkungen zum Code:

Du kannst den Code gerne für Dein eigenes Projekt verwenden!

Quellen:

  1. Wolke mit CSS erstellen
  2. Webmaster Crashkurs
  3. Buttons erstellen
  4. Ebene auf Ebene mit z-index (Layer)
  5. CSS Popup, CSS-Info-Fenster und Tooltip
  6. Code_in_HTML_darstellen
  7. Wikipedia: Hacker