背景にCSSでグラデーション - Sample2(ななめ方向)

<body>要素の background に、CSS で ななめ方向の線形グラデーションを指定しています。

グラデーションの位置指定は「to bottom right」

[↓ このページのHTML ↓]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="css/style2.css">
</head>

<body>
<header>
<h1>タイトル</h1>
</header>
<div id="container">
<p>テキスト</p>
<pre>ソース</pre>
<pre>ソース</pre>
</div>
<footer>
Copyright © <a href="">ほんっとにはじめてのHTML5とCSS3</a> All Rights Reserved.
</footer>
</body>
</html>
[↓ このページのCSSの抜粋 ↓]
body {
	width:100%;
	margin:0;
	padding:0;
	color:#666;
	font-family:Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	line-height:1.6em;
	/*背景の指定*/
	background:#3cc; /*グラデーション未対応のブラウザ用*/
	background:-webkit-linear-gradient(left top, #fcc, #cf6 20%, #3cc 40%, #006 70%) #3cc; /*オールド用*/
	background:linear-gradient(to bottom right, #fcc, #cf6 20%, #3cc 40%, #006 70%) #3cc; /*標準型*/
	}

★このページのCSSを全部見る