CSS3のグラデーション
線形グラデーション
上から下へのグラデーション
HTML
<div id="box1"></div>
CSS
#box1 {
width: 300px;
height: 100px;
margin: 50px auto 0;
background-color: #F36;/*グラデーションが効かないIE8のため*/
background:-webkit-linear-gradient(top, #F36, #FCC);/*Android標準ブラウザーのため*/
background:linear-gradient(to bottom, #F36, #FCC);/*W3C仕様*/
}
下から上へのグラデーション
HTML
<div id="box2"></div>
#box2 {
width: 300px;
height: 100px;
margin: 50px auto 0;
background-color: #F36;
background:-webkit-linear-gradient(bottom, #F36, #FCC);
background:linear-gradient(to top, #F36, #FCC);
}
左から右へのグラデーション
HTML
<div id="box3"></div>
#box3 {
width: 300px;
height: 100px;
margin: 50px auto 0;
background-color: #F36;
background:-webkit-linear-gradient(left, #F36, #FCC);
background:linear-gradient(to right, #F36, #FCC);
}
右から左へのグラデーション
HTML
<div id="box4"></div>
#box4 {
width: 300px;
height: 100px;
margin: 50px auto 0;
background-color: #F36;
background:-webkit-linear-gradient(right, #F36, #FCC);
background:linear-gradient(to left, #F36, #FCC);
}
カラーを3色にしたグラデーション
HTML
<div id="box5"></div>
#box5 {
width: 300px;
height: 100px;
margin: 50px auto 0;
background-color: #F36;
background:-webkit-linear-gradient(
left,
#F00 0%,
#FFF 50%,
#00F 100%);
background:linear-gradient(
to right,
#F00 0%,
#FFF 50%,
#00F 100%);
}
左上から右下へのグラデーション(3色)
HTML
<div id="box6"></div>
#box6 {
width: 300px;
height: 100px;
margin: 50px auto 0;
background-color: #F36;
background:-webkit-linear-gradient(
-45deg,
#F00 0%,
#FFF 50%,
#FF0 100%);
background:linear-gradient(
135deg,
#F00 0%,
#FFF 50%,
#FF0 100%);
}
グラデーションを使ったボタン
HTML
<p class="button1"><a href="#">button</a></p>
CSS
.button1 a {
display: block;
width: 200px;
padding: 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px #666;
color: #FFF;
text-align: center;
text-decoration: none;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4);
font-family: 'Baloo Paaji', cursive, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 150%;
background-color: #F36;
background: -webkit-linear-gradient(
top,
#FFCED7 0%,
#F74657 49%,
#f10013 51%,
#FE2951 100%);
background: linear-gradient(
to bottom,
#FFCED7 0%,
#F74657 49%,
#f10013 51%,
#FE2951 100%);
}
PhotoshopのCSS3Psを使用してボタンを作成
PhotoshopのCSS3Psを使うと、Photoshopと同様のグラデーションボタンをCSS3で作成することができます。
CSS3Psプラグインをダウンロードします。
CSS3Psを選択します。
グラデーション画像を選択してCSS3Psをクリックします。
CSSのコードが表示されます。このコードをCSSソースにコピーします。
HTML
<p class="button2"><a href="#">button</a></p>
CSS
.button2 a {
display: block;
width:200px;
padding: 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px #666;
color: #666;
text-align: center;
text-decoration: none;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4);
font-family: 'Baloo Paaji', cursive, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 150%;
border: solid 1px #34a7db;
background-image: -webkit-linear-gradient(bottom, #29b0ed, #a0d8ef 50%, #bee8f9 50%, #e4f5fc);
background-image: linear-gradient(to top, #29b0ed, #a0d8ef 50%, #bee8f9 50%, #e4f5fc);
}
Photoshopの画像と同じグラデーションボタンが作成されます。