ページの装飾２

body要素内を装飾２

ページの見栄えをもう少し変えてみます。。

グラデーションを付ける

グローバルナビゲーションにグラデーションを付けます。

#nav ul{
  height:34px;
  list-style:none;
  border:1px solid #9932cc;
    　　　　← background-color:#dda0dd;を追加
  　　　　　← background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);を追加
}

グラデーションを旧バージョンのブラウザに対応させるには、上記に次のプロパティを追加します。

Chrome,Safari 用
background:-webkit-gradient(linear,left top,left bottom,from(#fff5ee),color-stop(0.5,#ba55d3),to(#d8bfd8));
Opera 用
background:-o-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
FireFox 用
background:-moz-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
IE用
 -pie-background:linear-gradient(#d8bfd8,#ba55d3,#fff5ee);
 behavior: url(js/PIE.htc);

マウスオーバー時の背景をグラデーションに

#nav li a:hover   {
   background-color:#ffff00  ← #ba55d3に変更
　　　　　　← background:linear-gradient(#d8bfd8,#ba55d3,#fff5ee);を追加
}

  background:-webkit-gradient(linear,left top,left bottom,from(#d8bfd8),color-stop(0.5,#ba55dd),to(#fff5ee));
  background:-o-linear-gradient(top,#d8bfd8,#ba55d3,#fff5ee);
  background:-moz-linear-gradient(top,#d8bfd8,#ba55d3,#fff5ee);
  -pie-background:linear-gradient(#d8bfd8,#ba55d3,#fff5ee);
  behavior: url(js/PIE.htc);

テーブル見出しセルの背景をグラデーションに

th{
   background-color: #f2cffb;
           ← background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);を追加
           ← color:#fff;を追加
}

  background:-webkit-gradient(linear,left top,left bottom,from(#fff5ee),color-stop(0.5,#ba55d3),to(#d8bfd8));
  background:-moz-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
  background:-o-linear-gradient(top,#fff5ee,#ba55d3,#d8bfd8);
  -pie-background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);
  behavior: url(js/PIE.htc);

グラデーションと影を付ける

見出し用セレクタ”.headerR1”にグラデーションと影を付けます。

.headerR1{
  padding:6px;     ← padding:5px 6px;に変更
  border-bottom:1px dashed #808080;  ← 削除
  color:#ba55d3;
                    ← background-color:#ebebeb;を追加
                    ← font-size:120%;を追加
                    ← background:linear-gradient(#fff, #ebebeb);を追加
                    ← box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);を追加
}

background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ebebeb));
background:-o-linear-gradient(top,#fff,#ebebeb);
background:-moz-linear-gradient(top,#fff,#ebebeb);
-pie-background:linear-gradient(#fff,#ebebeb);

-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.4);
behavior: url(js/PIE.htc);

behaviorの記述はグラデーションと影とで共通。

ボックスの角を丸くする

border-radiusプロパティを使い”.note”、”.sideBlock”セレクタに角丸ボックスを設定します。

.note{
	padding: 15px;
	margin-bottom: 15px;
	background: #f2cffb;
	border: solid 1px #d1d1d1;
	               ← border-radius: 8px;を追加
}

.sideBlock{
  padding: 15px;
  margin-bottom: 15px;
  background: #f2cffb;
  border: solid 1px #d1d1d1;
                 ← border-radius: 8px;を追加
}

 -webkit-border-radius:8px;
 behavior: url(js/PIE.htc);

サンプルページを見るにはここをクリック