非常に実用的なCSSアート

CSSアートはいつも私を魅了してきましたが、私はそれを自分で試すことはめったにありません。多くのテクニックに精通していますが、クリエイターがシンプルな箱で滑らかで美しい画像を構築するのを見るたびに、私はまだ驚いています。私はしばしば開発者ツールを使用してその背後にある謎を研究しますが、創造的なプロセスを目撃したことはありませんでした。

CSSアートワークスが注目を集めるときはいつでも、「これは実用的ではない」または「SVGを直接使用するだけ」とコメントする人が常にいます。これらの主張が真実であっても、それは悪い議論です。常に実用性を追求するように求められていません。その場合、世界がどれほど退屈になるか！

10月、私は私のお気に入りのCSSアーティストであるLynn Fisher（Twitter、Codepen）の1人による単一のDiv Creationライブブロードキャストを見ることができました。私はかつて、Single Div Worksは非常に複雑なボックスの影、つまりピクセルアートアプローチに依存していると誤って考えていました。このアイデアがどこから来たのかわかりませんが、数年前に誰かがそれをするのを見たかもしれません。しかし、彼女の創造的なプロセスは、私が思っていたよりもはるかに「正常」で「実用的」です。彼女は、レイヤー化、スケーリング、ポジショニングの背景グラデーションを巧みに使用しています。

待って、私はそれをする方法を知っています！テクノロジー自体が魔法を持っているわけではなく、彼女がいくつかの勾配を中にケーキを入れたチーズに変える勇気であるということです！

以前にクライアントプロジェクトでこれらのプロパティを使用しました。さまざまな効果のグラデーション、レイヤード画像、サイズ、および位置を作成しました。これらはどれも新しいものではなく、複雑でも急進的でもありません。 CSS自体について新しいことを学んだことはありません。しかし、これはこれらの単純なツールが達成できることに対する私の認識を大きく変えました。

数週間以内に、私はこの手法を生産環境に適用しました。繰り返しになりますが、これに奇妙なことも複雑なこともありません - それはあなたの指先での垂れ下がった果物のようなものです。その場合、カスタムSVGはわずかにかさばっています。ここに、私が個人的なプロジェクトに作成した効果を示します。いくつかのカスタムプロパティを使用して、微調整を簡素化します。

先週、私たちは非常に実用的で公式の顧客コンポーネントライブラリで同様のトリックを使用しました。これはステイシー・クルバーモのアイデアであり、非常にうまく機能します。

リンと他のすべての才能のあるCSSアーティストに感謝します！私たちが愛する高さと、私たちが毎日使用できる「非常に深刻な」ツールを達成できる「非常に深刻な」ツールを見せてくれてありがとう。

以上が非常に実用的なCSSアートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。