複雑なCSSイラストへのアドバイス

フロントエンドの開発について私が最も聞いている質問を私に尋ねると、 「CSSでどのように良くなるの？」だと思います。その質問は通常、私が作成したCSSイラストを共有した後に発生します。それは私がCodepenでやりたいことです。

多くの人にとって、CSSはこの神話上の獣ではありません。クリスからのこのツイートは、皮肉ではありますが、それには多くの真実があるからです。そうは言っても、あなたがあなたが望むものを作成することから離れているいくつかのプロパティとテクニックしかないと言ったらどうでしょうか？真実は、あなたが実際にそんなに近いということです。

私はしばらくこのような記事を作成したいと思っていましたが、非常に多くの可能性と非常に多くのテクニックがあるので、同じことを達成する方法が複数あるので、カバーするのは難しいトピックです。同じことがCSSのイラストにも当てはまります。それを行うための正しい方法も間違った方法もありません。私たちは皆、同じキャンバスを使用しています。ページにこれらのピクセルを取得するための非常に多くの異なるツールがあります。

CSSイラストに「すべてのサイズに適合する」アプローチはありませんが、私が提供できるのは、あなたの旅に役立つ一連のテクニックです。

時間と練習

CSSのイラストは、多くの時間と練習が必要です。正確になりたいほど、イラストが複雑になるほど、時間がかかります。時間のかかる部分は、通常、どのプロパティを使用するか、どのように使用するかを決定するのではなく、物事を正しく見えるようにすることを決定するのではありません。ブラウザ開発ツールのスタイルインスペクターに非常に精通する準備をしてください！また、Visbugを試すこともお勧めします。

2人の素晴らしいCSSアーティストは、ベンエヴァンスとダイアナスミスです。どちらも最近、CSSの図を参照する際に時間消費について話しました。

カップとベンの反応についてミームのような写真を投稿しました。

最初にツイートを見たとき、私はこれをCSSで作成したくなりましたが、それから私の返信には約1か月かかると思いました。

時間がかかります！

CSSイラストpic.twitter.com/vqpqlktte5

- ジー？ （@jh3yy）2020年5月10日

>

トレースは完全に受け入れられます

私たちはしばしば、私たちが説明したいのは何であるかについての考えを持っています。結局のところ、この記事はデザインに関するものではありません。それは、イメージを取得し、DOMとCSSでそれをレンダリングすることです。このテクニックは時間の夜明けから存在していると確信しています。しかし、それは私がここ数ヶ月共有してきたものです。

• 説明したいものの画像を見つけたり作成したりします。
• タグでHTMLに引き込みます。
• それがあなたのイラストの下に座るようにそれを配置します。
• 画像の不透明度を減らして、それがまだ見えるようにしますが、圧倒的すぎないようにします。
• DOMでトレースします。

驚いたことに、このテクニックは一般的な知識ではありません。しかし、正確なCSSイラストを作成するには非常に貴重です。

こちらの動作中のこのトリックを参照してください：

これがCSS @eggheadioを作成するタイムラプスですか？

後にクリップパスで影を微調整しました。§

？ https://t.co/xhdrspwwfg by @codepen #webdev #coding＃css #animation #webdesign #design #creative＃100daysofcode #html

- ジー？ （@jh3yy）2020年5月1日

ここで試してみてください：

応答性に注意してください

この記事から取得する2つのテイクアウトテクニックがある場合は、上記の「トレース」とこの次のテクニックにしてください。

CSSのイラストの素晴らしい例がいくつかあります。しかし、それらのいくつかについての不幸なことの1つは、小さな画面でスタイリングされていない、または表示可能でさえないということです。私たちは、技術の第一印象が重要な時代に住んでいます。 CSSで説明されたキーボードの例を考えてください。誰かがあなたの作品に出くわし、スマートフォンでそれを開き、彼らはイラストの半分またはその小さなセクションで迎えられます。彼らはおそらくデモの最もクールな部分を逃したでしょう！

私のトリックは次のとおりです。イラストにビューポートユニットをレバレッジし、独自のスケーリングユニットを作成します。

サイジングとポジショニングには、スケーリングされたユニットまたはパーセンテージを使用するオプションがあります。これは、プロパティがパーセンテージではなくViewPortユニットを受け入れるため、ボックスシャドウを使用する必要がある場合に特に便利です。

上記で作成したCSS egghead.ioのロゴを考えてみましょう。使用したい画像を見つけて、IMGタグでDOMにポップしました。

 <image src="'egghead.png'/"></image>

 img {
 高さ：50vmin;
 左：50％;
 不透明度：0.25;
 位置：修正;
 トップ：50％;
 変換：翻訳（-50％、-50％）;
}

高さ、50Vminは、CSSイラストの望ましいサイズです。不透明度が低下すると、進行するにつれて、イラストを明確に「追跡」することができます。

次に、スケーリングされたユニットを作成します。

 /**
 *画像寸法は742 x 769です
 *幅は742です
 *高さは769です
 *私の希望のサイズは50vminです
*/
：根 {
  - サイズ：50;
 -unit：calc（（var（ -  size） / 769） * 1vmin）;
}

画像の寸法を配置すると、画像とともにスケーリングする均一なユニットを作成できます。高さが最大のユニットであることがわかっているため、それをベースとして使用して分数単位を作成します。

私たちはこのようなものを手に入れます：

 - ユニット：0.06501950585VMIN;

それは厄介に見えますが、私を信じてください、それは大丈夫です。これを使用して、Calc（）を使用してイラストのコンテナをサイズできます。

 。卵 {
 高さ：calc（769 * var（ -  unit））;
 位置：相対;
 幅：calc（742 * var（ -  unit））;
 z-index：2;
}

CSSイラストのコンテナ内のスタイル要素にパーセンテージまたはnew -unitカスタムプロパティを使用する場合、レスポンシブCSSイラストが表示されます。

このデモのサイズを変更すると、すべてがサイズの制約として50Vminを常に使用していることがわかります。

2回測定し、1回カットします

別のヒントは、物事を測定することです。ヘック、物理的なオブジェクトを使用している場合は、巻尺をつかむことさえできます！

これは少しファンキーに見えるかもしれませんが、私はこのシーンを測定しました。ラウンジにあるテレビコンボユニットです。これらの測定値はセンチメートルに相当します。それらを使用して、テレビの実際の高さに基づいてレスポンシブユニットを取得しました。カスタムプロパティのおかげで、その番号、および他のすべての名前を覚えることができる名前を付けることができます。

 ：根 {
  - ライトスイッチ：15;
  - ライトスイッチボーダー：10;
  - ライトスイッチトップ：15;
  - ライトスイッチボトム：25;
 -TV-Bezel：15;
 -TV-UNIT-BEZEL：4;
  - デシードハイト：25vmin;
 -one-cm：calc（var（ - 希望高） / var（ -  tv-height））;
 -TV-WIDTH：158.1;
 -TV-HEIGHT：89.4;
 -unit-height：42;
 -Unit-Width：180;
  - ユニットトップ：78.7;
 -TV-BOTTOM：114.3;
 -Scaled-TV-Width：calc（var（ -  tv-width） * var（ -  one-cm））;
 -Scaled-TV-Height：calc（var（ -  tv-height） * var（ -  one-cm））;
  -  scaled-unit-width：calc（var（ -  unit-width） * var（ -  one-cm））;
 -Scaled-unit-height：calc（var（ -  unit-height） * var（ -  one-cm））;
}

変数を計算するとすぐに、どこでも使用できます。私のテレビの幅は158.1cm、高さ89.4cmのことを知っています。マニュアルをチェックしました。しかし、私のCSSイラストでは、常に25vminにスケーリングされます。

すべてのものに絶対的なポジショニングを使用します

これにより、いくつかのキーストロークが節約されます。多くの場合、要素を絶対に配置しようとしています。自分を救って、このルールをどこかに置いてください。

 / *クラス名は異なる場合があります */
.css-illustration *、
.css-illustration *：after、
.css-illustration *：前に
.css-illustration：after、
.CSS-Illustration：{前
 ボックスサイズ：ボーダーボックス;
 位置：絶対;
}

あなたのキーボードはあなたに感謝します！

ポジショニングは、CSSのトリッキーな概念です。 CSS Almanacの使用方法の詳細については、CSS Almanacで読むことができます。

または、この小さな配置の遊び場で遊びをしてください。

アプローチに固執します

これは断然最も難しいことです。 CSSイラストにどのようにアプローチしますか？どこから始めますか？あなたは最も外側の部分から始めて、あなたの方法で働くべきですか？それはあまりうまくいきません。

オッズは、いくつかのアプローチを試して、それを進めるためのより良い方法を見つけることです。あなたは確かに少し前後に行うことはできますが、練習すればするほど、パターンを見つけて、自分に最適なアプローチを開発することでより良くなります。

私は、イラストがレイヤーで構成されているベクトル画像を作成する方法に自分のアプローチを関連付ける傾向があります。必要に応じて、それを分割して紙にスケッチしてください。しかし、底から始めて、あなたの道を進んでください。これは、最初に大きな形状を意味する傾向があり、後で詳細を説明します。要素を移動する必要がある場合は、いつでもスタッキングインデックスをいじくり回すことができます。

スタイルのしっかりした構造を維持します

それは私たちを構造に導きます。あなたのイラストのためのフラットDOM構造を避けるようにしてください。物事をアトミックに保つことで、イラストの一部を簡単に移動できます。また、イラストの一部を表示して非表示にしたり、後でアニメーション化したりすることがはるかに簡単になります。 CSS Snorlaxデモを検討してください。腕、足、頭などは別々の要素です。アニメーションを.snorlax__arm-letクラスに単純に適用できるので、アニメーションを一緒に維持しようとした場合よりもはるかに簡単になりました。

これがデモを作成する私のタイムラプスショットです：

昨夜構築したCSS Snorlaxのタイムラプスをまとめようとしましたか？

それを見て面白い！

？ https://t.co/vbvymfun5v by @codepen＃webdev #coding #html #css #webdesign＃100daysofcode #creative #design #animation pic.twitter.com/0mjtlprqfp

- ジー？ （@jh3yy）2020年4月28日

厄介な形の処理

CSSで形を作成するためのCSS-Tricksに関するかなり良い記事があります。しかし、長い曲線や外側の曲線のように、さらに「厄介な」形状はどうでしょうか？これらのシナリオでは、箱の外で考える必要があります。オーバーフロー、ボーダーラジウス、クリップパスなどのプロパティは大きなヘルパーです。

このCSS Jigglypuffデモを検討してください。チェックボックスを切り替えます。

それが湾曲した形を作成するための鍵です！ボーダーラジウスが適用されている体よりもはるかに大きい要素があります。次に、オーバーフローを適用します：身体に隠されて、その部分を切り取ります。

外側の曲線をどのように作成できますか？これは少し難しいです。しかし、私が使用したいトリックは、厚い境界線を持つ透明な要素です。次に、ボーダーラジウスを適用し、必要に応じて余分なものをクリップします。

トグルを押すと、そのコーナーを横切るために使用している要素が明らかになります。別のトリックは、背景色に合った円にオーバーレイすることです。背景色を変更する必要があるまでこれは問題ありません。変数やその色のために何かを用意しても大丈夫です。しかし、それは物事を維持するのが少し難しくなる可能性があります。

クリップパスはあなたの友達です

クリップパスを含む、その最後のデモでは、いくつかの興味深いCSSプロパティに気付いたかもしれません。複雑なCSS形状を作成する場合は、おそらくクリップパスが必要です。親ボックスオーバーフローを隠す際に、要素の小片を切り取るのに特に便利です。

これが、さまざまなクリップパスの可能性を紹介する少し前に作成した小さなデモです。

また、「CSSの形」の記事からアイデアを取り入れ、クリップパスで再作成するこのデモもあります。

ボーダーラディウスはあなたの他の友達です

曲線を作成するには、ボーダーラジウスが必要になります。珍しいトリックの1つは、「ダブル」構文を使用することです。これにより、各コーナーの水平および垂直半径を作成できます。

このデモで遊んで、ボーダーラジウスの力を本当に感謝してください。私は、物事を応答し続けるために、全面的にパーセンテージを使用することを提唱しています。

シェーディングテクニック

あなたはすべての形を持っています、すべてがきれいにレイアウトされており、すべての正しい色が整っています...しかし、まだ何かが外れています。オッズは、それがシェーディングの欠如であるということです。

シェーディングは深さを追加し、現実的な感触を作り出します。 Gal Shirのイラストのこの環境を考えてみましょう。ギャルは、シェードとグラデーションを使用して美しいイラストを作るのに最適です。私はそれを再作成し、シェーディングを切り替えるスイッチを含めて、それがどんな違いをもたらすかを見るのは楽しいと思いました。

多くの場合、シェーディング効果は、ボックスシャドウと背景イメージの組み合わせで作成されます。

これらのプロパティの重要なことは、それらをコンマ分離リストに積み重ねることができることです。たとえば、デモの大釜には、体全体で使用されている勾配のリストがあります。

 .cauldron {
 背景：
  放射状勾配（25％55％で25％25％、var（ -  rim-color）、透明）、
  放射状勾配（-2％50％で100％100％、透明性、透明92％、var（ - 大釜色））、
  放射状勾配（-5％50％で100％100％、透明性、透明80％、var（ - 暗闇））、
  線形勾配（310deg、var（ - 内側のリムカラー）25％、透明）、var（ - 大釜色）;
}

ここでは、radial-gradient（）と線形勾配（）が使用されており、常に完全に丸い数値値を持つとは限らないことに注意してください。繰り返しますが、これらの数字は問題ありません。実際、スタイルインスペクターで物事を微調整し、いじくり回すのに多くの時間を費やします。

それは一般的に、Box-Shadowで働いているのと同じです。ただし、それを使用すると、挿入図の値を使用して、トリッキーな境界と追加の深さを作成することもできます。

 .cauldron__opining {
 Box-Shadow：
  0 0px calc（var（ -  size） * 0.05px）calc（var（ -  size） * 0.005px）var（ -  rim-color）Inset、
  0 calc（var（ -  size） * 0.025px）0 calc（var（ -  size） * 0.025px）var（ -  inner-rim-color）Inset、
  0 10px 20px 0px var（ - 暗闇）、0 10px 20px -10px var（ -  inner-rim-color）;
}

フィルターを使用する方が理にかなっていることは確かです：代わりに、あなたが望む効果を得るためにDrop-Shadow（）。

Lynn FisherのA.Singlediv.comは、これらのプロパティの実施の素晴らしい例です。そのサイトに突き刺して、イラストでイラストを使用する優れた方法とイラストの背景イメージをいくつか検査してください。

Box-Shadowは非常に強力であるため、イラスト全体を作成できます。私はかつて、ドルのCSSイラストを作成することについて冗談を言っていました。

CSSでは？ ？#webdev #css #animation #webdesign #coding＃100daysofcode #html https://t.co/vmyeyssk83

- ジー？ （@jh3yy）2020年4月22日

ジェネレーターを使用して、単一のdivでイラストを作成しました。しかし、Alvaro Montoroはそれをもう少し取り、代わりにBox-Shadowでそれを行うジェネレーターを書きました。

プリプロセッサは非常に役立ちます

必要ではありませんが、プリプロセッサを使用すると、コードをきちんと整頓することができます。たとえば、PUGは、特に多数の繰り返し要素を扱うためにループを使用する場合、HTMLをより速く書きます。そこから、CSSカスタムプロパティをスコープして、スタイルを1回だけ定義するだけで、必要に応じて上書きする必要がある方法でスコープできます。

乾燥した構造を示す別の例を以下に示します。花は同じマークアップで構成されていますが、それぞれにスコープ付きCSSプロパティを適用するために使用される独自のインデックスクラスがあります。

最初の花にはこれらの特性があります。

 .flower-1 {
  -  hue：190;
 -x：0;
 -Y：0;
  - サイズ：125;
 -R：0;
}

それが最初のものなので、他のすべてがそれに基づいています。 2番目の花がどのように右に向かっていて、わずかに上にあるかに注意してください。必要なのは、異なる値を同じカスタムプロパティに割り当てることです。

 .flower-2 {
  -  hue：320;
 -X：140;
 -Y：-75;
  - サイズ：75;
 -R：40;
}

アニメーション化されたレスポンシブCSS Leifは、最新のCodepen Sparkの機能です！ ✨

動物の交差を知らない人のために、レイフはあなたの島を訪れる緑のshしたナマケモノですか？

これがタイムラプスです！ ？

？ https://t.co/tkhx4nwxp7 @codepen pic.twitter.com/najirsslymを介して

- ジー？ （@jh3yy）2020年5月19日

それでおしまい！

出て、これらのヒントを使用し、独自のヒントを考え出し、共有し、CSSの傑作を共有してください！ねえ、あなたがあなた自身のアドバイスを持っているなら、それも共有してください！これは間違いなく多くの試行錯誤を通じて学習されるようなものです。私にとって有効なものは、あなたのために働くものとは異なるように見えるかもしれません。

以上が複雑なCSSイラストへのアドバイスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。