線形グラデーション
上から下へ
左から右へ
左上から右下へ
<!DOCTYPE html> <html> <head> <style> #grad1{ height:200px; background: -webkit-linear-gradient(orange, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(orange, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(orange, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(orange, red); /* 標準構文(最後でなければなりません) */ } #grad2{ height:200px; background: -webkit-linear-gradient(left, orange , red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, orange, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, orange, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, orange , red); /* 標準構文(最後でなければなりません) */ } #grad3{ height:200px; background: -webkit-linear-gradient(left top, orange , red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom right, orange, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, orange, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom right, orange , red); /* 標準構文(最後でなければなりません) */ } </style> </head> <body> <h4>線形グラデーション - 上から下へ</h4> <div id="grad1"></div> <h4>線形グラデーション - 左から右へ</h4> <div id="grad2"></div> <h4>線形グラデーション - 左上から右下へ</h4> <div id="grad3"></div> </body> </html>
線形グラデーション - 角度指定
0 度
90 度
180 度
-90 度
注: Internet Explorer 9 以前のバージョンでは、グラデーションをサポートしていません。
<!DOCTYPE html> <html> <head> <style> #grad000{ height:100px; background: -webkit-linear-gradient(0deg, orange, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(0deg, orange, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(0deg, orange, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(0deg, orange, red); /* 標準構文(最後でなければなりません) */ } #grad090{ height:100px; background: -webkit-linear-gradient(90deg, orange, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(90deg, orange, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(90deg, orange, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(90deg, orange, red); /* 標準構文(最後でなければなりません) */ } #grad180{ height:100px; background: -webkit-linear-gradient(180deg, orange, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(180deg, orange, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(180deg, orange, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(180deg, orange, red); /* 標準構文(最後でなければなりません) */ } #grad-90{ height:100px; background: -webkit-linear-gradient(-90deg, orange, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(-90deg, orange, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(-90deg, orange, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(-90deg, orange, red); /* 標準構文(最後でなければなりません) */ } </style> </head> <body> <h3>線形グラデーション - 角度指定</h3> <div id="grad000" style="color:white;text-align:center;">0 度</div><br> <div id="grad090" style="color:white;text-align:center;">90 度</div><br> <div id="grad180" style="color:white;text-align:center;">180 度</div><br> <div id="grad-90" style="color:white;text-align:center;">-90 度</div> </body> </html>
複数のカラーストップ
3 色(均等間隔)
7 色(均等間隔)
3 色(不均等な間隔)
7 色(均等間隔:左→右)
Gradient Background
注: カラーストップは、%を指定しなければ、自動的に均等間隔になります。
注: IInternet Explorer 9 以前のバージョンでは、グラデーションをサポートしていません。
<!DOCTYPE html> <html> <head> <style> #grad31{ height:200px; background: -webkit-linear-gradient(red, orange, yellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, orange, yellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, orange, yellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, orange, yellow); /* 標準構文(最後でなければなりません) */ } #grad32{ height:200px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 標準構文(最後でなければなりません) */ } #grad33{ height:200px; background: -webkit-linear-gradient(red 10%, orange 85%, yellow 90%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red 10%, orange 85%, yellow 90%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red 10%, orange 85%, yellow 90%); /* For Firefox 3.6 to 15 */ background: linear-gradient(red 10%, orange 85%, yellow 90%); /* 標準構文(最後でなければなりません) */ } </style> </head> <body> <h2>複数のカラーストップ</h2> <h4>3 色(均等間隔)</h4> <div id="grad31"></div> <h4>7 色(均等間隔)</h4> <div id="grad32"></div> <h4>3 色(不均等な間隔)</h4> <div id="grad33"></div> <h4>7 色(均等間隔:左→右)</h4> <div id="grad34" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold"> Gradient Background </div> </body> </html>