CSS3 と RGBa を使用してクールなボタンを作成する

さて、このタイトルを見ると、まず IE ブラウザを無視できます。

私はミニマリストの傾向があることを認めており、最小限のコードと画像でより多くのことができるようになりたいと考えています。

CSS3 はいくつかの新機能を追加するだけですが、これらのプロパティは多くの便利な機能を提供し、作業を大幅に簡素化します。今回作成したボタンは、RGBaカラーを使用しながら、CSS3の角丸効果、ボックスシャドウ、テキストシャドウ効果を最大限に活用しています。

まずはデモを見てみましょう:

これらの美しいボタンは 4 つの手順で作成できます。

1. ボタンの基本設定

最初にボタンの基本スタイルを設定する必要があります。ここでは a タグを使用します。もちろん、input タグやボタン タグなども使用できます。ここで a タグが使用されているのは、これら 3 つのタグのうち a タグのみがサポートされているためです。 :hover 疑似クラス。

ytzong Children's Shoes さんの提案に感謝します。コードの float 行と margin 行を節約できる、display:inline-block に変更しました。 ——シェンフェイ@2009.05.31

2.半透明のPNGグラデーション画像

ここで使用する画像はこれだけです。この透明な PNG 画像は、色のグラデーションを実現するために使用されます。この画像をモノクロ透明グラデーションと呼ぶことができます。 CSS では、このように背景デモと PNG 画像を使用することで、さまざまな色のグラデーション効果を実現できます。もちろん、これは CSS3 の機能ではありません。IE6 より前のブラウザを除き、すべてのブラウザでこの効果を実現できます。ここをクリックすると、png ファイルが表示されます。

3. 角を丸くする

角丸 (border-radius) は、IE ブラウザに加えて、現在ブラウザでサポートされている最高の CSS3 機能の 1 つですが、ほとんどのブラウザはプライベート属性を通じて実装されています。 。

4.影とRGBa

Box-shadow と text-shadow は、CSS3 に追加された 2 つの重要なプロパティであり、ブロック レベルの要素のシャドウとテキスト シャドウを簡単に実装できます。ただし、影の色を半透明にしたほうが、要素が背景によく溶け込むのではないでしょうか。 FF はバージョン 3.5 (現在は Firefox 3.5beta4 でサポートされています) までは text-shadow 属性のみをサポートしていることに注意してください。

 .btn {
 ...
背景: #222 url(sprites.png)repeat-x;
 /**背景画像**/
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
境界半径: 5px;
 /**角が丸い**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /**ボタンの影**/
テキストシャドウ: 0 -1px 1px rgba(0, 0, 0, 0.25);
 /**テキストシャドウ**/
 }

さて、これでボタンは完全に完成しました。目標は達成されました。

このボタンは黒なので、他の色のボタンの実装が簡単です。

これらのスタイルは .btn の後に配置する必要があることに注意してください。このようにして、これらの緑、青、赤などのボタンの背景色は、.btn の背景色をオーバーライドできます。そして使用します

最後に、IE ブラウザについて注意してください。これらのボタンは、IE7 および IE8 ブラウザでは直角、グラデーション色、影なし、透明色で表示されますが、IE6 では明るい青色の背景が表示されます。 PNG の透明度はサポートされていません。IE6 のボタンのように見せたい場合は、js の後に IE フィルターを使用してください。