CSSでページの背景をほんのりおしゃれにする方法まとめ（コピペでつかえるよ）

HTMLで高速でモックをつくってみせるとき、背景が単色だとちょっと見栄えが良くない時ってありますよね。
そんなときにほんのりおしゃれに見える背景のつくりかたをいくつかご紹介しましょう。

※ Chromeでしか動作確認してません

こちらのDEMOの背景をCSSだけでほんのりおしゃれにしていこうとおもいます。

body {
    background: linear-gradient(#333, #000);
}

単純ですが、これだけでほんのりおしゃれになります。
グラデーションがきつすぎると逆におしゃれじゃなくなるのでほんのり設定しましょう。

body {
	background: linear-gradient(#333, #000);
	background-size: auto 4px;
}

グラデーションにもbackground-sizeを設定することができます。
なのでサイズをうまく調整することによってたくさん線を引いた感じに仕上げることができるのです。おしゃれですね。

body {
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #333), color-stop(1, #000));
	background-size: 4px 4px;
}

グラデーションを斜めにかけることによってタイルっぽくみせることもできます。おしゃれです。

body {
	background: radial-gradient(#000, #333);
	background-size: 4px 4px;
}

円形グラデーションをかけることもできます。頑張ればおしゃれになりますが、今回は頑張ってないのでほんのりおしゃれどまりです。

以上です。背景をおしゃれにするだけで雰囲気も変わってきますね。

みかづきブログその3