CSSだけで複雑な背景画像を作ってみる
CSS3で追加された線形グラデーション linear-gradient と円形グラデーション radial-gradient を使用すれば、さまざまなパターンを表現することが可能です。
これに background-size プロパティを組み合わせれば、CSSだけで背景画像を作成することができます。
CSS3をサポートするブラウザが増えてきている現在では、ほとんどのパターンがCSSだけで作成可能になっています。
今回は下記の背景画像を作成してみます。
- pattern1
- pattern2
まずはそれぞれの仕様についてです
linear-gradient
書式
linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);
角度 (省略可能)
角度は deg を単位として指定します。 0deg を指定すると下から上への方向となります。正の数値は時計回りの回転を示します。
デフォルトは 180deg で、上から下への方向となります。
方向 (省略可能)
角度のかわりに方向をキーワードで指定できます。
キーワードとしては、 left, right, top, bottom の４つになります。
斜めの方向を示すには、 left top right bottom などと指定します。
最新仕様では必ず to をつけて記述します。
開始色 位置 / 終了色 位置
カラーコードやカラーネームで色を指定します。
開始色の位置を示す 0% 、終了色の位置を示す 100% は省略可能です。
開始色に位置を指定した場合は、その位置までは開始色がそのまま描画されます。 終了色に位置を指定した場合は、その位置からは終了色がそのまま描画されます。
経過色 / 位置 (複数指定可能)
開始色と終了色の間に経過色を入れる場合は、開始点からの距離を示す位置とともに指定します。
経過色の位置は単位を % や px で指定しますが省略可能です。省略したときは両隣の色の中間に配置されます。
radial-gradient
書式
radial-gradient(形状 サイズ at <ポジション>, 色 位置 [, 色 位置]+ );
形状 (省略可能)
円を示す circle か、楕円を示す ellipse のいずれかを指定できます。
デフォルトは ellipse です。
ポジション (省略可能)
グラデーションを開始するポイントです。
pxや%での数値指定と、キーワード指定ができます。
キーワードは、left, right, top, bottom, center があります。
デフォルトは 'center' です。
サイズ (省略可能)
px や % での数値指定と、キーワード指定ができます。
キーワードは以下の４つがあります。
| キーワード | 説明 |
|---|---|
| closest-side | 中心から最も近い辺に接するように外円が描かれます。 |
| farthest-side | 中心から最も遠い辺に接するように外円が描かれます。 |
| closest-corner | 中心から最も近い角の点を通るように外円が描かれます。 |
| farthest-corner | 中心から最も遠い角の点を通るように外円が描かれます。 |
デフォルトは farthest-corner です。
色 / 位置 (複数指定可能)
色はカラーコードやカラーネームで２色以上指定します。 位置はpxや%で数値指定します。
今回はこの linear-gradient と radial-gradient を使用して背景画像を作成していきます。
それでは pattern 1 を作成します
コード
.pattern1 { background-color: #3cc; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%); background-position: 0 0, 40px 40px; background-size: 80px 80px; }
radial-gradient の一行目の方では40%の大きさの円をrgba(255, 255, 255, 0.1)色で表示し、40％以降は透明( ''' transparent ''' )になっています。そのため、円の周りは背景色である#3ccが表示されます。
2行目は1行目と同様に20%の円を作成しています。
background-position では 0, 0 が radial-gradient の1行目で作成した40%の円の位置を決めており、40px, 40pxで2行目の円の位置を決めています。
続いて pattern 2 を作成します
repeating-linear-gradient
上で紹介した radial-gradient を使用してもストライプを作成できるのですが、 repeating-linear-gradient を使うと簡単にストライプを作成できます。
repeating-linear-gradient(ストライプの角度, 色1 始点, 色1 終点, 色2 始点、色2 終点[, 色3 始点, 色3 終点, …])
第1引数にストライプの角度を指定し、その後はストライプを作るボーダーの色とその始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの開始位置からの距離を指定します。色は何色でも指定できます。色の指定が終わった所で、再び最初に指定した色からボーダーが繰り返し表示されます。
コード
.pattern2 { background-color: #e9d4b9; background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); }
repeating-linear-gradientで色を複数指定することで複雑なストライプ柄も簡単に実装することができます。
サイト作成しました
色々なパターンを作成しまとめたサイトを作成しました。 よかったら見てみてください。
Elastic | A collection of background image created by CSS only
