読者です 読者をやめる 読者になる 読者になる

CSS3のグラデーション

線形グラデーション

上から下へのグラデーション

f:id:develog:20160826082231p:plain

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仕様*/
}

 

下から上へのグラデーション

f:id:develog:20160826082247p:plain

HTML
<div id="box2"></div>

CSS

#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);

 

左から右へのグラデーション

f:id:develog:20160826082305p:plain

HTML
<div id="box3"></div>

CSS

#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);
}

 

 右から左へのグラデーション

f:id:develog:20160826082319p:plain

HTML
<div id="box4"></div>

CSS

#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色にしたグラデーション

f:id:develog:20160826094238p:plain

HTML
<div id="box5"></div>

CSS

#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色)

f:id:develog:20160826094248p:plain

HTML
<div id="box6"></div>

CSS

#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%);
}

 

グラデーションを使ったボタン

f:id:develog:20160826094512p:plain

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プラグインをダウンロードします。

f:id:develog:20160826101339p:plain

 

CSS3Psを選択します。

f:id:develog:20160826111015p:plain

 

グラデーション画像を選択してCSS3Psをクリックします。

f:id:develog:20160826102007p:plain

 

CSSのコードが表示されます。このコードをCSSソースにコピーします。

f:id:develog:20160826102018p:plain

 

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の画像と同じグラデーションボタンが作成されます。

f:id:develog:20160826110503p:plain