ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|

DTP・Webデザイン系企業に就職したスタッフIhaのブログテンプレート制作目録です。イラスト、フォト、プログラム、呟きなどいろいろ投稿していきます。基本的にはブログテンプレートデザインを制作した過程を書いています。

 

CSS3でグローバルナビにグラデーションをかける

ただの実験ですが、背景画像ではなく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]-->

Calendar

<< 2019年10月 >>
  12345
6789101112
13141516171819
20212223242526
2728293031  

Me

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0