IT Wissenssplitter

Sherlock und Desiderat

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:

Weder HTML noch CSS interessieren sich für Abstände, diese sind nur zur besseren Übersicht.
Was Du mit class ="wasauchimmer1" im HTML -Teil definierst musst Du im CSS mit .wasauchimmer1 aufrufen und kannst es mehrfach verwenden.
Was Du mit id ="wasauchimmer2" im HTML -Teil definierst musst Du im CSS mit #wasauchimmer2 aufrufen und kannst es nur einmal verwenden.
background-image: linear-gradient(grey, black) färbt den Hintergrund mit einem Farbverlauf aus zwei Farben ein. Du kannst auch mehr Farben verwenden oder radial-gradient statt linear-gradient benutzen.
Mit border-radius kannst Du die Form der Buttons verändern, z.B. border-top-left-radius verändert nur die obere linke Ecke.
Z-index gibt an, in welcher Ebene sich ein Element befindet. Stelle es Dir vor wie einen Stapel durchsichtiger Folien, auf die Du die Buttons druckst. Die Folie mit dem z-index: 1 liegt unten, die mit einer höheren Zahl darüber. Du kannst auch Zahlen überspringen, wenn Du noch nicht weißt, ob Du noch Ebenen dazwischen schieben willst.
hover legt fest was passieren soll, wenn man mit der Maus über den Button fährt, ihn aber nicht anklickt.
.wasauchimmer3:hover::after{animation wasauchimmer8 } ruft die animation wasauchimmer8 auf, wenn man mit der Maus über den Button fährt.
After ist kein echtes Element, sondern ein Pseudoelement. Es erzeugt ein Element in der HTML-Ausgabe, das hier mittels CSS aufgehübscht wird.
@keyframes wasauchimmer4 ist eine Animation. Z.B. kannst Du die Hintergrundfarbe verändern @keyframes wasauchimmer5 {from {background-image: linear-gradient(#80aaff, #3377ff)} to {background-image: linear-gradient(#80aaff,white, #3377ff)}; oder mit transform: rotateZ(-180deg); width: 50px; height: 75px; }} kannst Du das Objekt drehen und die Größe ändern.
Mittels .wasauchimmer6:hover::after, wasauchimmer7:focus::after{ } steuert man zwei Elemente an. Am Anfang den Punkt nicht vergessen und beide Elemente mittels Komma trennen.
Du kannst auch Codeschnipsel verwenden und einzelne Werte ändern, um besser zu verstehen was der Wert bewirkt.

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

Quellen: