Sehr äußerst praktische CSS -Kunst

CSS -Kunst hat mich immer fasziniert, obwohl ich sie selten selbst probiere. Obwohl ich mit vielen Techniken vertraut bin, bin ich jedes Mal überrascht, wenn ich den Schöpfer ein glattes und schönes Bild mit einer einfachen Box bauen sehe. Ich benutze oft Entwickler -Tools, um die Geheimnisse dahinter zu studieren, aber ich habe den kreativen Prozess nie gesehen.

Immer wenn CSS -Kunstwerke Aufmerksamkeit erregen, gibt es immer Menschen, die kommentieren "dies ist nicht praktisch" oder "nur SVG direkt verwenden", und solche Aussagen sind sowohl Hautausschläge als auch langweilig. Auch wenn diese Behauptungen wahr sind, ist es ein schlechtes Argument - keiner wird gebeten, ständig die Praktikabilität zu verfolgen. In diesem Fall, wie langweilig die Welt wäre!

Im Oktober hatte ich die Ehre, eine einzige Div -Creation -Live -Sendung eines meiner Lieblings -CSS -Künstler Lynn Fisher (Twitter, Codepen) zu sehen. Ich dachte einmal fälschlicherweise, dass einzelne Div -Arbeiten auf extrem komplexen Boxschatten stützen - fast ein Pixelkunstansatz. Ich bin mir nicht sicher, woher diese Idee kommt, vielleicht habe ich gesehen, wie es jemanden vor ein paar Jahren getan hat. Aber ihr kreativer Prozess ist viel „normaler“ und „praktisch“ als ich erwartet hatte: Sie verwendet geschickt einige Hintergrundgradienten von Schichten, Skalierung und Positionierung.

Warten Sie, ich weiß, wie es geht! Es ist nicht so, dass die Technologie selbst Magie hat, sondern dass sie Mut ist, mehrere Gradienten in ein Stück Käse mit Kuchen im Inneren zu verwandeln!

Ich habe diese Eigenschaften in meinen Kundenprojekten schon einmal verwendet. Ich habe Gradienten, geschichtete Bilder, die Größe und Positionen für verschiedene Effekte erstellt. Keine davon ist neu, weder kompliziert noch radikal. Ich habe nichts Neues über CSS selbst gelernt. Dies hat meine Wahrnehmung jedoch stark verändert, was diese einfachen Tools erreichen können.

Innerhalb weniger Wochen habe ich diese Technik auf eine Produktionsumgebung angewendet. Auch hier gibt es nichts Seltsames oder kompliziertes daran - es ist wie eine niedrig hängende Frucht an Ihren Fingerspitzen, in diesem Fall erscheint der benutzerdefinierte SVG etwas sperrig. Hier ist der Effekt, den ich für mein persönliches Projekt erstellt habe, wobei einige benutzerdefinierte Eigenschaften verwendet werden, um die Verbesserungen zu vereinfachen:

Letzte Woche haben wir ähnliche Tricks in einer sehr praktischen und offiziellen Bibliothek von Kundenkomponenten verwendet. Dies ist die Idee von Stacy Kvernmos und funktioniert sehr gut.

Vielen Dank an Lynn und alle anderen talentierten CSS -Künstler! Vielen Dank, dass Sie uns die Höhen gezeigt haben, die wir lieben, und die „sehr ernsthaften“ Tools, die wir jeden Tag verwenden können.

Das obige ist der detaillierte Inhalt vonSehr äußerst praktische CSS -Kunst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!