Ich habe die CSS-Kunst, die die Leute machen, schon immer genossen, aber ich habe mich selbst nie viel damit beschäftigt. Ich kenne viele der beteiligten Tricks, aber es überrascht mich immer wieder: die Art und Weise, wie Menschen aus kleinen Kästchen flüssige und schöne Bilder zaubern können. Ich grabe mich immer in die Entwicklertools ein, um zu sehen, wie die Dinge gemacht werden, aber ich hatte nie den Prozess entfaltet gesehen.
Immer wenn CSS-Kunst Aufmerksamkeit erregt, gibt es immer jemanden, der sagt: "Das ist nicht praktisch" oder "nimm einfach SVG" oder etwas ähnlich Abfälliges und Langweiliges. Das ist ein schreckliches Argument, selbst wenn es wahr wäre – niemand ist verpflichtet, jederzeit praktisch zu sein. Was für eine schreckliche Welt das wäre.
Im Oktober nahm ich mir die Zeit, Lynn Fisher (Twitter, CodePen), eine meiner Lieblings-CSS-Künstlerinnen, dabei zuzusehen, wie sie ihren Single-Div-Prozess live streamt. Irgendwo hinten in meinem Kopf nahm ich an, dass Single-Div-Kunst auf hochkomplizierten box-shadows beruht – fast ein Pixel-Art-Ansatz. Ich bin mir nicht sicher, woher diese Idee kam, ich habe wahrscheinlich vor Jahren jemanden dabei gesehen. Aber ihr Prozess ist viel "normaler" und "praktischer", als ich es mir selbst vorgestellt hatte: eine Reihe von vernünftigerweise geschichteten, dimensionierten und positionierten Hintergrundverläufen.
Moment. Das kann ich. Es ist nicht die Technik, die magisch ist – es ist die Dreistigkeit, aus ein paar Farbverläufen einen Käseblock mit Kuchen darin zu machen!
Ich habe all diese Eigenschaften schon früher in Kundenprojekten verwendet. Ich habe Farbverläufe erstellt, Bilder geschichtet, ihre Größe bestimmt und sie für verschiedene Effekte positioniert. Nichts davon ist neu, kompliziert oder radikal. Ich habe nichts über das CSS selbst gelernt. Aber es hatte einen riesigen Einfluss auf meine Wahrnehmung dessen, was ich mit diesen einfachen Werkzeugen erreichen konnte.
Innerhalb weniger Wochen habe ich das in Produktion eingesetzt. Wiederum ist es nichts Besonderes oder Kompliziertes – die perfekte tief hängende Frucht, bei der ein benutzerdefiniertes SVG *geradezu* zu sperrig erscheint. Hier ist der Effekt, den ich für ein persönliches Projekt mit ein paar benutzerdefinierten Eigenschaften erstellt habe, um die Anpassung zu erleichtern.
Letzte Woche haben wir einen ähnlichen Trick als Teil einer sehr praktischen und offiziellen Kundenkomponentenbibliothek verwendet. Es war Stacy Kvernmos Idee und es hat großartig funktioniert.
Danke Lynn und all ihr anderen fabelhaften CSS-Künstler! Danke, dass ihr uns allen gezeigt habt, wie weit wir diese Sprache, die wir so lieben, und die sehr ernsten Werkzeuge, die wir jeden Tag benutzen, noch treiben können.
Danke, dass du mir den Mut gegeben hast, mich in CSS-Kunst zu stürzen!
Oh, ich muss daran erinnert werden, dass CSS für alle ist. Danke dafür :-).