グラデーションを使って作ろう!背景パターンでストライプやボーダーの基本的な作り方

tutorial
 2018.11.07
 2018.11.08

「コピペでできる!cssとhtmlのみで作るいい感じの背景パターン 12選」
「コピペでできる!cssとhtmlのみで作るちょっと複雑なの背景パターン 11選」
使っているボーダーやストライプの表現ですが、ちょっとしたブロックの背景や見出しの背景などにも使えますよね。
でもちょっと「アレンジしたい」「角度を変えたい」などの希望もあると思います。
そこで今回はグラデーションを使ったボーダーやストライプの基本的な作り方をご説明します。

グラデーションを使ってボーダーを作ろう

グラデーションってどうやって作るの?

グラデーションは「linear-gradient」や「repeating-linear-gradient」を使って作ります。
ボーダーを作るために、縦にグラデーションで色が変わるように設定してあげましょう。
縦にグラデーションを設定する場合。
linear-gradient(1色目 1色目の位置,2色目 2色目の位置);



background: linear-gradient(#E91E63 10%, #00BCD4 90%)
この場合、要素のうちの上から10%は#E91E63の単色で表示され、下から10%(100%−90%)は#00BCD4の単色で表示されます。
その間の60%(100%-[上]10%-[下]10%)がグラデーションとなります。
この80%を少なくなるように設定していくと。。。

間の%を同じ数字に(間が0%)するとグラデーション部分がなくなりきっちりとした2色になります。

ちなみにカラーの2色目の位置を0に設定して1色目を20%に設定すると太さの違うボーダーが出来上がります。

これは2色目の位置を1色目より小さいものにした場合その色より以前の中で(この場合1色目)最も大きい値が指定されているものとみなされるからです。
つまり、linear-gradient(#E91E63 20%, #00BCD4 20%);と同様です。
もちろんlinear-gradient(#E91E63 50%, #00BCD4 0);であれば先ほど作ったlinear-gradient(#E91E63 50%, #00BCD4 50%);と同じになります。

繰り返しを設定しよう

繰り返しを設定するために作ったグラデーションのサイズをしてします。
background-size:幅 高さ;


ボーダーなので幅は100%で、高さは20pxに指定しました。
linear-gradientとの組み合わせにより高さ20pxを100%とした50%(20px*50%=10px)が#E91E63、残りの50%が#00BCD4となります。

3色以上の場合はどうするの?

これは簡単です。色の数と位置を増やすだけです。



この場合、linear-gradientの設定は以下になります。
linear-gradient(#E91E63 25%, #00BCD4 25%, #00BCD4 50%, #FFC107 50%, #FFC107 75%, #4CAF50 75%, #4CAF50 100%)
0〜25%:まずは最初の色のストップ位置が25%「#E91E63 25%」
25%〜50%:スタート位置が25%「#00BCD4 25%」ストップ位置が50%「#00BCD4 50%」
50%〜75%:スタート位置が50%「#FFC107 50%」ストップ位置が75%「#FFC107 75%」
75%〜100%:スタート位置が75%「#4CAF50 75%」ストップ位置が100%「#4CAF50 100%」

こちらの書き方でもOKです。
linear-gradient(#E91E63 25%, #00BCD4 0, #00BCD4 50%, #FFC107 0, #FFC107 75%, #4CAF50 0, #4CAF50 100%)

じゃぁストライプを作るには?

ストライプもボーダーと同様に「linear-gradient」で設定します。
linear-gradient(グラデーションの方向, 1色目 1色目の位置,2色目 2色目の位置);
今度はグラデーションの方向の指定を追加します。
「linear-gradient」のグラデーションの方向は(to bottom)[上から下へ]がデフォルト値です。
なので、ストライプの場合は(to right)[左から右へ]を指定します。
これは(90deg)を指定したものと同じです。
また、繰り返しを設定するために作ったグラデーションのサイズは、
ストライプなので幅は20pxで、高さは100%に指定しました。
linear-gradientとの組み合わせにより幅は20pxを100%とした50%(20px*50%=10px)が#E91E63、残りの50%が#00BCD4となります。

今度は斜めストライプを作ってみよう

次は斜めのストライプを作る場合はどうでしょう?なんとな〜く、ストライプを斜めに角度を入れればいいんじゃないか?
そう思いますよね。
まずは45度のストライプを見てみましょう。
linear-gradient(45deg, #E91E63 25%, #00BCD4 0, #00BCD4 50%, #E91E63 0, #E91E63 75%, #00BCD4 0, #00BCD4 100%);
background-size: 28px 28px;
幅20px(1色目10px2色目10px)のストライプを作成したい場合
三平方の定理を思い出してください。思い出せないけど…。
2×10√2=28.2842712475なので28pxで指定しています。


うまくいったようですが、気分によってはもうちょっと傾けたい思こともあります。それに4色だったらどうだろう?とか。
これを30度にしてみましょう。

残念なことになってしまいました。なんか面倒くさいです。
こんな時は「linear-gradient」ではなく「repeating-linear-gradient」を使うとうまくいきます。

「repeating-linear-gradient」ではグラデーションの繰り返しを設定できますので、「background-size」の指定はいらなくなります。
三平方の定理も忘れることができます。
その代わり色の位置は実際のストライプのサイズを入れます。
今回の場合、1色目10px、2色目10pxの合計20pxのストライプなので図のようになります。

repeating-linear-gradient(グラデーションの方向, 1色目のスタート位置(実際のサイズ), 1色目 1色目のストップ位置(実際のサイズ), 2色目 2色目のスタート位置(実際のサイズ), 2色目 2色目のストップ位置(実際のサイズ));
「repeating-linear-gradient」を使えば複雑な角度のストライプが作成できますね。

「linear-gradient」や「repeating-linear-gradient」をうまく使っていろんなストライプ柄を作ってみてはいかがでしょう。

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?