備忘録:【CSS】背景のデザイン

スポンサーリンク

初めに

最近、CSSを使ったWebデザインに興味を持ちました。

備忘録としてメモのように書いておきます(笑)

index.html は統一

下記にあるサンプルは全て同じ index.html を使用しています。

ソースのダウンロードでは index.html も含まれます。

index.html

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<title>BG Sample</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” href=”./style.css” type=”text/css”>
</head>
<body>
<p>Background Sample</p>
</body>
</html>

1.背景色のアニメーション

背景色がだんだん変わるアニメーション

デモ

style.css

body {
background-color: #2d669f;
animation: bg-color 8s infinite;
-webkit-animation: bg-color 8s infinite;
}

@-webkit-keyframes bg-color {
0% { background-color: #2d669f; }
25% { background-color: #415589; }
50% { background-color: #000082; }
75% { background-color: #00b5b5; }
100% { background-color: #2d669f; }
}

@keyframes bg-color {
0% { background-color: #2d669f; }
25% { background-color: #415589; }
50% { background-color: #000082; }
75% { background-color: #00b5b5; }
100% { background-color: #2d669f; }
}

p {
margin: 10%;
font: 30px italic, Georgia, Times, Serif;
text-align: center;
color: #fff;
}

ソースのダウンロード

BG_Trans.zip

2.背景のパターン

背景色にパターンを付ける

デモ

style.css

body {
background: #888 url(./images/pattern.png) repeat top left;
}

p {
margin: 10%;
font: 30px italic, Georgia, Times, Serif;
text-align: center;
color: #fff;
}

ソースのダウンロード

BG_Pattern.zip

3.グラデーション背景

グラデーションの背景

デモ

style.css

body {
background: linear-gradient(-90deg, #e6ed00, #ed00a1) fixed;
}

p {
margin: 10%;
font: 30px italic, Georgia, Times, Serif;
text-align: center;
color: #fff;
}

ソースのダウンロード

BG_Grad.zip

最後に

今はこれだけしかありませんが、随時更新していきます。

スポンサーリンク





スポンサーリンク

コメントをどうぞ。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です