スマホ対応HP作り方

CSS3でグラデーション

CSS3ではグラデーションを付ける事ができます。
CSSでボタン作成」で説明した箇所については説明を省いています。

CSS2ボタン

HTML側の記述

<a class="btn" href=""/>BUTTON</a>

↓コピーする↓

CSS側の記述

.btn {
width: 80%;
margin: 0 auto;
padding: 10px 15px;
display: block;
font-size: 15px;
text-align: center;
text-shadow: 1px 2px 3px #CCCCCC;
background: #E4E4E4;
background : -webkit-gradient(linear,left top, left bottom, from(#F3F3F3), to(#BEBEBE));
background : -moz-linear-gradient(top, #F3F3F3, #BEBEBE);

color: #000000;
border: 1px solid #CCCCCC;
}

↓コピーする↓

-webkit-gradient

「-webkit-gradient」はグラデーションを付ける指定です。
「linear,left top, left bottom, from(#F3F3F3), to(#BEBEBE)」左から順に、「left top:始点位置」「left bottom:終点位置」「from(#F3F3F3):始点カラー」「to(#BEBEBE):終点カラー」となります。

-moz-linear-gradient

「-moz-linear-gradient」はグラデーションを付ける指定です。
「top:始点位置」「#F3F3F3:始点カラー」「#BEBEBE:終点カラー」となります。

アドバイス

-webkit-gradientと-moz-linear-gradientは必ず両方を指定しましょう。

現状ではChromeやSafariなどのwebkit系と、FirefoxなどのMozilla系のブラウザで別々に指定する必要があります。

また、万が一グラデーションが反映されない場合も考え「background」も忘れずに記述しおきましょう。

ポイントサイト ・モンスト・キャンクラ