cssのみで背景描画

CSSグラデーションで作った背景パターンのサンプル
http://www.nxworld.net/tips/css-gradient-pattern.html

サイト見て実際にふと使ってみたくなったのでやってみました。

・垂直ストライプ


<div id="body1" style="background: repeating-linear-gradient(90deg, #222, #222 30px, #fff 0, #fff 60px); width: 100%; height: 300px;"> </div>


「90deg」の部分は角度なので数字次第でボーダーとか斜め向きにできます。

・ギンガムチェック

<div style="background-color: #fff;
background-image: linear-gradient(-45deg, rgba(200,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(200,0,0,.5) 50%, rgba(200,0,0,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(200,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(200,0,0,.5) 50%, rgba(200,0,0,.5) 75%, transparent 75%, transparent 100%);
background-size: 52px 52px; width: 100%; height: 200px;"> </div>



<div style="background-color: #fff;
background-image: linear-gradient(0deg, rgba(200,0,0,.5) 5px, transparent 5px, transparent 10px, rgba(200,0,0,.5) 10px, rgba(200,0,0,.5) 15px, transparent 15px, transparent 20px), linear-gradient(90deg, rgba(200,0,0,.5) 5px, transparent 5px, transparent 10px, rgba(200,0,0,.5) 10px, rgba(200,0,0,.5) 15px, transparent 15px, transparent 20px);
background-size: 52px 52px; width: 100%; height: 200px;"> </div>



<div style="background-color: #fff; background-image: linear-gradient(90deg, rgba(0,0,30,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,30,.5) 50%, transparent 50%);
background-size: 52px 52px; width: 100%; height: 200px;"> </div>


こういうシンプルなの好きなので、画像じゃなくていいんだ〜ポワ〜とか思いつつ、このサイトにはストライプとか柄の背景は向いてないなと思いdivの一部で囲って満足。機会あれば使いたいけど、そんなcssありきのデザインなかなかないですよね。
カテゴリ: css   2015/11/27