CSS3で光沢を表現する
ナビゲーションをつくる
今回は以下のナビゲーションにlinear-gradientを施す形で光沢を表現します。
コードは以下の通り。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>DEMO</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Links</a></li> </ul> </nav> </body> </html>
body { margin: 0; padding: 0; } nav { background-color: #ddd; } nav ul { overflow: hidden; list-style: none; } nav li { float: left; width: 100px; border-right: #fff 1px solid; font-weight: 700; } nav li:first-child { border-left: #fff 1px solid; } nav a { display: block; text-decoration: none; text-align: center; background-color: #f36; padding: 10px 0; color: #fff; } nav a:hover { opacity: 0.7; }
見てわかる人もいるかもしれませんが、前回の記事のコードをちょっと加工しただけです。
ナビゲーションに光沢を施してみる
CSSに以下の記述を追加します。
nav a { display: block; text-decoration: none; text-align: center; background-color: #f36; padding: 10px 0; color: #fff; /* ここから先を追記 */ background: -webkit-linear-gradient( top, #ffced7 0%, #f74657 49%, #f10013 51%, #fe2951 100% ); background: -ms-linear-gradient( top, #ffced7 0%, #f74657 49%, #f10013 51%, #fe2951 100% ); background: linear-gradient( to bottom, #ffced7 0%, #f74657 49%, #f10013 51%, #fe2951 100% ); /* ここまで追記 */ }
以下はGoogle chromeでの表示結果です。
ベンダープレフィックスをつけているので、FireFoxとIE10以上でも表示されます。その
他のブラウザでは確認していません。
linear-gradientはIE9以下ではサポートされていません。F12ボタン(Windowsの場合)を
押して開発者ツールでブラウザのバージョンを下げれば、そのことがわかります。
linear-gradientの注意点
上記コードでlinear-gradientを施した際、ベンダープレフィックスつきの書式と、ついていない書式で違う部分が
あります。(それ以外は同じということなのでコピペが有効)
top
とto bottom
の部分ですね。今回のグラデーションの場合、上から下へのグラデーションと
なっているわけですが、linear-gradientでは、プレフィックスつきの場合は起点の名前を、そうでない
(ベンダープレフィックスではない)場合は、to ××
で方向を指定します。
上記のナビは光沢にするため%なんかを使っていますが、基本形は下記のような感じになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>DEMO</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="grad_box"></div> </body> </html>
body { margin: 0; padding: 0; } #grad_box { width: 200px; height: 200px; background: #ddd; background: -webkit-linear-gradient(top, #ffced7, #fe2951); background: -ms-linear-gradient(top, #ffced7, #fe2951); background: linear-gradient(to bottom, #ffced7, #fe2951); }
現在ではフラットデザインが主流となっているので使用場面が限られますが、それでも覚えておいて損はないはずです。