簡単、きれい!RGBaカラーを使って横メニューを作ってみる

RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白(rgba(255,255,255,0.4)など)と黒(rgba(0,0,0,0.1)など)だけで、その透明度を変えて様々なところで使っています。

rgba-menu0.png

先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。

RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。

早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。

HTML
<ul id="menu">
  <li><a href="#">IE</a></li>
  <li><a href="#">Firefox</a></li>
  <li><a href="#">Chrome</a></li>
  <li><a href="#">Safari</a></li>
  <li><a href="#">Opera</a></li>
</ul>

続いてCSSです。グラデーションを使っているため長くなっています。

CSS
#menu {
  width: 600px;
  padding: 0;
  margin: 0;
  list-style-type: none;
  border-radius: 5px;
}
#menu li {
  width: 20%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;
  color: #fff;
  background: #ff7400;
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
  background-image: -moz-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
  background-image: -o-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
  background-image: -ms-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
  background-image: linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.9);
  display: block;
  border-left: 1px solid rgba(255,255,255,0.2);
  border-right: 1px solid rgba(0,0,0,0.2);
}
#menu li:first-child a {
  border-left: 0px;
  border-radius: 5px 0 0 5px;
}
#menu li:last-child a {
  border-right: 0px;
  border-radius: 0 5px 5px 0;
}
#menu li a:hover {
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  background-image: -moz-linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  background-image: -o-linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  background-image: -ms-linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1));
}

CSS3プロパティのグラデーションや角丸、CSS3セレクタのlast-childを使っていますので、ブラウザによっては対応してい場合があります。実際に設置したものが下になります。

アップしてみると下の画像のようになります。

rgba-menu.png

メインとなる色(今回は#ff7400)の上に、白(rgba(255,255,255,0.4)など)や黒(rgba(0,0,0,0.1)など)の半透明のフィルタが乗っかっているイメージです。当然色はまとまりますので、全体に統一感がでます。で、メインとなる18行目の色を変えるだけで全体が変わります。

rgba-menu1.png

1行変えるだけで、こんなに様々な種類のメニューを作ることができます。これはかなり便利だと思います。

さいごに

ということで、RGBaカラーを使って横メニューを作ってみました。

カラーツール「0to255」で色を決めてメニューを作ってみる」で作ったメニューとほぼ同じメニューですが、こちらだとメイン以外の色を選ぶ必要がないので楽に作れます。ただ、IE8以下では対応していないというデメリットもありますので注意が必要です。

白黒のRGBaカラーはテキストシャドウなんかにもよく使いますし、本当に便利だと思いますので、ぜひお試しください。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
対応していないIE8以下だと、具体的にどうなっとしまうのかも、知りたかった。
【2012/11/16 20:49】 | たか #- | [edit]
たかさん

確かにそうですね。
今後IE8でのスクリーンショットなども載せていきたいと思います。
ありがとうございました!
【2012/11/17 17:43】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加