この記事では、それぞれに 1 つの HTML 要素を使用してさまざまなフラグを作成することで、CSS グラデーションを確認します。体験の一環として、疑似要素 ::before および ::after、およびクリップパス プロパティもチェックします。
単純なフラグをコーディングし、紋章のコーディングは CSS では難しいため避けます。不可能ではありませんが、実行する価値のある作業でもありません。そのためには SVG を使用してください。
さまざまな国旗のウィキペディア ページを使用して、寸法、サイズ、位置、色を取得しました。間違いが含まれている場合は、あらかじめご容赦ください。
まず、フラグの HTML コードとなるものと、いくつかの一般的なスタイルを追加しましょう。
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
これらの機能について簡単に説明します:
これらの一部はオーバーエンジニアリングです。はい、CSS をオーバーエンジニアリングすることができます。ほとんどのフラグではそれらが必要ないためです。特に、この記事でコーディングするものです…しかし、最終的にはプロパティを必要とするものがいくつか見つかるでしょう。それらを個別に何度も追加する代わりに、クラスに直接含めてはどうでしょうか?
線形グラデーションは、単一方向のプログレッシブ カラー トランジション (線に沿って名前が付けられています) を作成します。 デフォルトでは、方向は上から下へ垂直です。これにより、フラグの作成が簡単になります。
ポーランドの国旗から始めましょう。同じ高さを占める 2 つの色があります。上部は白、下部は赤です。これは、最もシンプルなグラデーションの 1 つです。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
このグラデーションでは、上から 50% (旗の半分) に達するまで白が色として設定され、その後、同じく 50% から赤に変わります。
アスペクト比も追加しました: 8 / 5;それがポーランドの国旗の公式の比率（5:8）だからです。次の例ではこのプロパティを無視してかまいませんが、必ず追加してください。追加しないと、フラグに幅がなく、表示されなくなります。
CSS グラデーションは 2 色に限定されず、必要な数だけ使用できます。ただし、色が多すぎると一部のブラウザーではグラデーションが正しく表示されない場合があることに注意してください。
この例としてはドイツの国旗が挙げられます。ここでは上から下まで 3 色になります。
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
この例の表記は、意図的に複数行で非常に長くなりました。 value の後に 2 つの値を追加したことに注目してください。これらはそれぞれ、各色の開始点と終了点です。上の例では、黒は上 (0%) から始まり、旗の 3 分の 1 (33.33%) まで進み、赤は直後 (33.33%) から始まり、旗の 3 分の 2 (66.66%) まで進みます。 )、そして最後に、黄色は 66.66% の直後から始まり、旗の一番下 (100%) まで進みます。フラグの場合、終了値とそれに続く開始値は一致しますが、一致しない場合、ブラウザは色を段階的に遷移させます。
デフォルトで最初の色が 0 で始まり、最後の色が 100% で終わることを考慮すると、線形グラデーションからこれらの値を削除できます。また、開始値が前の終了値よりも低い場合、色の間で急激な停止が発生します。フラグにはこれが必要ですが、あまり入力したくないので、開始値としてできる限り低い値、つまり 0% または単に 0 を入力するだけです。そうすることで、上記の CSS は次の結果をもたらすものに縮小されます。同様の結果ですが、かなり短くなります:
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
垂直方向の線形グラデーションしか生成できないとしたら、それは退屈で役に立たないでしょう。グラデーションが描画される方向を変更する方法があります。いくつか確認してみましょう:
ベルギーの国旗を例に挙げてみましょう。色は垂直方向に重ねられるのではなく、水平方向に重ねられます。左から右に、それぞれ黒、黄色、赤です。これは少なくとも 2 つの異なる方法で実現できます:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
放射状グラデーションは、1 つの原点から全方向への漸進的な色の遷移を作成し、色の楕円 (辺が等しい場合は円) のように見える放射状の効果を生成します。 デフォルトでは、その点は要素の水平方向と垂直方向の絶対中心です。
考慮すべき重要な点がいくつかあります:
これらの最初の考え (およびキーワード) を念頭に置いて、いくつかのフラグを作成してみましょう!
日本の国旗は、白い旗の中央にある大きな赤い円です。これは、見つけることができる最も単純な放射状グラデーションの 1 つです。フラグは長方形であるため、前に確認した円キーワードを使用することになります。これを使用しない場合は、代わりに楕円が表示されます。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
最も近い側のサイズ キーワードと円形のキーワードを組み合わせて、高さの 60% の円を生成しました (上辺と下辺が左辺と右辺よりも近いため)。
要素の中心から円と楕円だけを作成できれば、CSS を使用していくつかのフラグ (ラオスやブルンジなど) を複製できます。それでも、中心から外れた円を持つ他のもの (コスタリカやエチオピアなど) を開発することはできませんでした。
radial-gradient() メソッドを使用すると、グラデーションの原点を示すことができます。サイズと形状のキーワード (存在する場合) の後に at posX posY を使用してこれを行います。これを使ってバングラデシュの国旗を作成してみましょう:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
グラデーションの中心を移動し始めると何が起こるでしょうか?最奥コーナーまでの距離が変わる！これにより、それに応じてサイズを調整するための三角関数の計算が行われます。または、代わりに、最も遠い隅 (この場合は最も近い側など) ではない別の基準点を特定することもできます。
これを避けるために、幅と高さの絶対サイズを指定できます。そうすると、その絶対値で形が決まってしまうので、円なのか楕円なのかが分かりません。
円錐グラデーションは、1 つの原点から時計回りに回転するプログレッシブ カラー トランジションを作成します。このように視覚化するのは複雑に聞こえるかもしれないので、人々に説明するときは例を使用することを好みます。紙に印刷された規則的な線形グラデーションを想像してください (ここまではうまくいきました)。次に、紙を取り出し、片側を折り、円錐形に丸めます（これが名前の由来です！）結果として得られる図形は、上から見ると円錐形のグラデーションのように見えます。お役に立てば幸いです。
放射状グラデーションと同様、円錐グラデーションのデフォルトの原点は要素の絶対中心です。また、放射状のグラデーションとして、at posX posY を使用してその点を変更できます。
これは、円錐形のグラデーションを使用して作成する非常に単純なフラグです。まず、中心を水平方向 40%、垂直方向 50% に配置し、停止点を指定する必要があります。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
先ほども言いましたが、簡単です!あまり内容がありませんので、ベナンの国旗についてあまり知られていない事実をご紹介します。黄色は国の宝を表し、赤は祖先の勇気を表し、緑は民主主義の希望を表しています。
これに基づいて、チェコ共和国の国旗の描き方を見てみましょう:
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
これは問題なく動作しますが、#fff を 2 回使用していることに注意してください。一度だけ使えたら良いと思いませんか？ご想像のとおり、答えは「可能です」です。勾配勾配は必ずしも 0 度から開始する必要はありません。 from [角度] を使用して開始位置を指定できます。
たとえば、赤色から始めたいとします:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
角度は正または負の値にすることができ、その場合、開始点はそれぞれ時計回りまたは反時計回りに移動します。
線形、放射状、円錐形のグラデーションを使用して比較的単純なフラグを生成する方法を学びました…しかし、場合によってはフラグが複雑になり、単一のグラデーションでは対応できない場合があります。その場合はどうすればよいでしょうか?
CSS では、要素内に複数の背景画像 (およびグラデーション) を使用できます。値をカンマで区切る必要があります。直観に反するかもしれませんが、覚えておくべき重要なことの 1 つは、上の背景が重なって下の背景を隠してしまうということです。
スウェーデンの国旗は、青色の背景に黄色の十字です。線形グラデーションの透明-黄色-透明を使用して、それぞれの黄色のバーを生成できます。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
この例には、見た目以上のものがあります:
前の旗は複数のグラデーションの動作を示していましたが、透明度を使用していたので、グラデーションがどのように重なっているかを示すのはうまくいきませんでした。それでは、別の例を見てみましょう。異なるタイプの複数のグラデーションを使用する例です。
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
背景を組み合わせる場合、グラデーションの種類は 1 つだけに限定されません。どの種類でも使用できます。
これまで、線形、放射状、円錐形のグラデーションと、それらを組み合わせる方法について見てきました。しかし、いずれの場合も、グラデーションが旗全体を占めていました。一部の透明度ではそのように見えない場合がありますが、グラデーションのサイズは常に幅と高さの 100% でした。
しかし、ニーズに合わせてグラデーションのサイズを変更する方法があります。最も簡単な方法は、背景サイズを指定することです。サイズがコンテナより小さい場合、背景は繰り返されます (background-repeat: none のようなものを使用しない限り)
カタールの国旗を使った例を見てみましょう。旗はパターンを 9 回繰り返し、円錐形のグラデーションで簡単に複製できます。グラデーションの幅を旗の 100%、高さを旗の高さの 9 分の 1 に指定すると、ブラウザはコンテナがいっぱいになるまで背景を繰り返し、描画を完成させます。
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
もちろん、サイズを指定したら、グラデーションが配置される位置も指定できます。これは、background-position を使用して行います (ここで、background-repeat プロパティが役に立ちます)。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
最後の色のサイズと位置を指定する必要がないことに注意してください。コンテナ全体を自動的に占有するもののみを設定できます。
背景画像、サイズ、位置の値はカンマで区切ることができます。これは、背景が少数しかない場合には便利ですが、背景が複数ある場合は非常に面倒な作業になる可能性があります。迷ったり、価値観が混在したりするのは簡単です。
代わりに、以下に示すように、background プロパティの短い形式を使用して、すべての値を一度に指定できます。background: グラデーションの位置 / サイズの繰り返しです。
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
線形、放射状、円錐形のグラデーションを見てきましたが、それぞれのバリエーションで「カラー パターン」を追加できます。フラグはこれに最適です。多くは水平線の繰り返しで構成されています。
私は反復グラデーションについて話しています。これらは通常のグラデーションと同じように動作し、100% または 360 度に達するまで指定されたパターンを繰り返します。 3 つの繰り返しグラデーションがあります:
ギリシャの国旗を例に挙げてみましょう。これを達成するには、3 つまたは 4 つの大きな線形グラデーションを使用することも、3 つの繰り返し線形グラデーションを使用することもできます。
左上の十字を実現するには、最初の 2 つの線形グラデーションの位置とサイズの両方を定義する必要があります。
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}
ウガンダの国旗には美しい灰色のタンチョウが描かれていますが、実用的な理由から CSS でコーディングしません。残りの 2 つの旗の部分に焦点を当てます。中央の白い円と、黒、黄色、赤の数本の水平線です。
この構成は 2 つの異なる方法で実現できます:
最初のオプションは次のようになります:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
2 番目のオプションは次のようになります:
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
しかし、どちらのオプションも最終的には同じように見えます。 CSS では、他のプログラミング スタイルと同様に、通常、目標を達成する方法が複数あることを覚えておくことが重要です。
「単一要素フラグ」という用語は誤解を招く可能性があります。空ではないすべての HTML 要素には、描画にも使用できる少なくとも 2 つの疑似要素 (::before と ::after) が含まれています。したがって、実際には、個別にスタイル設定でき、多くの可能性を提供する 3 つの要素があります。
上記のようにグラデーションを使用してカタールの国旗をコーディングした場合、一部のモニターではグラデーションの三角形のエッジがシャープすぎて見苦しく見えることに気付いたかもしれません。これを解決する方法はたくさんありますが、私が気に入っている解決策は、クリップパスを備えた疑似要素を使用して、より滑らかできれいな線を作成することです。
このオプションは、いくつかの線形グラデーションと、次のセクションで説明するピクセル差のトリックを使用する場合に比べて、コードを簡素化します。
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
この場合の擬似要素は複雑なパターンに限定される必要はありません。たとえば、キューバ、バハマ、ヨルダンの国旗を考えてみましょう。左側には円錐形のグラデーションを使用して描画した三角形があります。これらのグラデーションには問題があります。特定のモニターではエッジが硬すぎるか、ピクセル化して見えます。次のセクションで線形グラデーションを使用してこれを解決するトリックがあります。代わりに、疑似要素 (3 点ポリゴン パス) を使用して三角形を作成すると、エッジがより滑らかに見えます。上のバーレーンの国旗に似ています。
5 つの星の頂点のおおよその点を取得し、それらを ::before および ::after 疑似要素のクリップパスを使用して適用しました。多くの CSS アーティストはクリップパス チートの使用を検討しており、星は円錐形のグラデーションで描画できます。ただし、簡単にするために、クリップパスとして残しておきます。
旗の背景として円錐形のグラデーションを追加し、擬似要素に星を追加すると、すぐにパナマの国旗を描くことができます。
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
背景を組み合わせると、リストされている順序で積み重ねられることに注意してください。つまり、最初のものが上に来て、下のものと重なり、その後も続きます。
設計の観点からは理にかなっていますが、CSS の観点からは直観に反している可能性があります。カスケードにより、プロパティまたはクラスの最後の出現が以前に定義されたものよりも優先されます。
この記事では、グラデーション エッジが鮮明すぎる、またはピクセル化して見える可能性があることについて説明しました。これはブラウザがグラデーションをレンダリングする方法が原因で発生しますが、特に SVG のハードストップ エッジでは発生しないため、迷惑です。
たとえば、次の行はモニターによってはうまく表示されない可能性があります:
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
これを回避するコツは、終点と次の始点の間にピクセルの差を追加することです。それぞれからそれぞれ 0.5 ピクセルを減算または追加するか、より簡単には、それらの 1 つから 1 ピクセルを減算または追加するだけです。この線はすべてのモニターで滑らかに見えます:
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
繰り返しのグラデーションを扱うときによくある間違いは、最初の色の開始点を追加しないことです。これにより、グラデーションが奇妙に見えます。繰り返しグラデーションが期待どおりに機能しない場合は、そこに 0 (または任意の値) を追加したかどうかを必ず確認してください。
疑似要素は最初は恐ろしいかもしれませんが、他の要素と何ら変わりはなく、疑似要素と一緒に HTML 要素に付加されるだけです。
値を指定して content プロパティを追加することを忘れないでください (表示するだけの場合は空の文字列が一般的です)。そうしないと、擬似要素が表示されません!
CSS で描画したり CSS アートを作成したりする場合、クリップパス プロパティの使用は不正行為であると多くの人が主張します。作業が簡単になり、ベルトに取り付けておくと便利なツールです。 「不正行為」という理由だけでそれを破棄するつもりはありません。
クリップパスとマスクの使用方法を学びましょう。最終的にはプロジェクトで役立つでしょう。
今度は CSS グラデーションを練習します。ぜひ、自分でフラグを作り直してみてください。以下は、練習に適した国旗を持つ国のリストです (複雑さの順に並べ替えられています):
そして、フラグをコーディングする独自の方法はないことを覚えておいてください。それぞれの方法はさまざまな方法で実行できます。使いやすいグラデーション、または最もよく見えるグラデーションを使用してください。
以上がAlvaro Montoro プレゼンツ: フラグを楽しむ… CSS を使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
