Gradients - W3C
ページの背景やボタンなど様々な場所で使用できます。
グラデーションには4種類あります。
- linear-gradient
- radial-gradient
- repeating-linear-gradient
- repeating-radial-gradient
線形グラデーションのサンプルを作成しました。
http://okanoworld.appspot.com/sample/css/lineargradient/index.html
index.html
http://okanoworld.appspot.com/sample/css/lineargradient/index.html
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>線形グラデーション</title> <link rel="stylesheet" href="lineargradient.css"></link> </head> <body> <h1>線形グラデーションサンプル</h1> <div id="gradient1" class="box">linear-gradient(bottom, pink, white);</div> <div id="gradient2" class="box">linear-gradient(45deg, lightgreen, yellow);</div> </body> </html>
lineargradient.css
.box { width: 500px; height: 100px; margin: 10px; border-style: solid; border-color: gray; line-height: 100px; text-align: center; font-family: sans-serif; } #gradient1 { background: linear-gradient(bottom, pink, white); background: -webkit-linear-gradient(bottom, pink, white); background: -moz-linear-gradient(bottom, pink, white); } #gradient2 { background: linear-gradient(45deg, lightgreen, yellow); background: -webkit-linear-gradient(45deg, lightgreen, yellow); background: -moz-linear-gradient(45deg, lightgreen, yellow); }
0 件のコメント:
コメントを投稿