linear-gradientのグラデーションでしましま模様を実現するテクニック

cssでグラデーションを実現することができるlinear-gradient。今回はこれを使ったちょっとしたテクニックをご紹介します。内容としては、linear-gradientを使って、グラデーションではない、しましま模様を背景に設置するテクニック、です。どういうこと？と思いますよね。御覧ください。

CSS3によるしましま模様の設置方法

See the Pen gGBzBm by hoshu_t (@hoshu_t) on CodePen.

基本形として見出しの背景にbackground-imageでグラデーションを配置してみました。linear-gradientは開始色と終了色を指定することでその間をグラデーションで補完して表示してくれるCSS3プロパティです。中間色や角度を指定することもでき、その機能で複雑なグラデーションを実現することもできるのですがそれは使わず、ここではbackground-sizeを記述してみます。

See the Pen EwdLOB by hoshu_t (@hoshu_t) on CodePen.

10px四方のグラデーションが領域内でリピートしてこのような見た目になっています。見出しとしては見難くなっていますがわかりやすさのために色を濃くしているので後で調節しましょう。少ししましまの気配がしてきましたね。

ここでlinear-gradientの機能を活用します。プロパティに45degを指定してグラデーションの向きを斜めにし、中間色を指定してグラデーションの見栄えを調節します。

See the Pen QqZrMO by hoshu_t (@hoshu_t) on CodePen.

一気にしましま模様になりました。解説すると、中間色の設定方法を#dddから#ddd、#eeeから#eee、とすることで、グラデーションではなく矩形が隣り合っているような色変化にし、これを実現しています。
加えて色の調節も行っています。ここではモノトーンですが、サイトカラーに合わせたりしましまの太さを調節したりすると、シャープな印象になったりポップな雰囲気にしたりできそうですよね。

See the Pen VMExzY by hoshu_t (@hoshu_t) on CodePen.

もう一工夫だけして枠線のように使ってみました。領域の中の要素に背景色を設定してしましま部分の見え方を調節しています。

まとめ

今回はグラデーション用のプロパティをグラデーション以外の用途で使うテクニックでした。cssには機能を理解することで本来の使い方とは少し違う応用が効くことがあります。機能やプロパティの指定をしっかり理解して、どういうことができるのか表現の引き出しを広げておきたいです。
また面白いテクニックがあったらこちらで紹介しようと思います。