CSS3でグローバルナビにグラデーションをかける
2012年08月12日 19:29:51
テーマ：Webデザイン
ただの実験ですが、背景画像ではなくCSS3を用いてwidth:100%のグラデーションを作ってみました。上から下へのグラデーションも良いけど、横型で画面の幅100%使ってやってみたくなったので実行しました(゜∀゜)
色見本はAdobe社のKulerを参考にしました。色相環のようなカラーピッカーになっていて選択した色に合う他色をプログラムで出力しているようです。
今回の配色は、このブログのベースカラーである青を基調として（ちょいっといじって）、Kulerから出力された色の値を参考にしています。この配色のグラデーションをグローバルナビの背景に適用。オンマウス時は不透明度60%にぼかされるようセット。IEではCSS3が使えないっぽいので、CSSハックで以前の背景画像をセットして対応しています。ソースを見たときに</head>の上にあるのがソレです。
以下、CSSソース
Mozilla,Webkit用のCSS
background: -moz-linear-gradient(left top,#103ecf,
#2dcfe6 30%,
#dc06c0 50%,
#06dc65 70%,
#6206e6); /*Firefox用*/
background: -webkit-gradient(linear,left top,right bottom,from(#103ecf),
color-stop(0.3, #2dcfe6),
color-stop(0.5, #dc06c0),
color-stop(0.7, #06dc65),
to(#6206e6)); /*Safari,Google Chrome用*/
IE7,8,9用のCSSハック
<!--[if IE ]>
<style type="text/css">
<!-- /*IE7,8用*/
#gnv{
height:40px;
background:url(/blog/iha/file/671028ce27.png) repeat-x;
}
#gnavi ul.nl li a{
background:url(http://blog.town-nets.com/blog/iha/file/671028ce27.png) repeat-x;
}
#gnavi ul.nl li a:hover{
filter:alpha(style=0,opacity:60);
}
-->
</style>
<![endif]-->
