読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

CSS

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

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

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



グラデーションを設定する

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


解説

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



サイズを指定してグラデーションを設定する

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


解説

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



サイズと方向を指定してグラデーションを設定する

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


解説

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

サイズを指定して円形のグラデーションを設定する

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


解説

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


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