シャドウボクシング：イメージフリー、CSS3、光沢のあるボタン

CSS3ボタンスタイル：Box-Shadowを使用してクールなボタンエフェクトを作成します

この記事では、CSS3：CSS3グラデーションとボックスシャドウを使用してボタンを作成する2つの方法について説明します。 CSS3グラデーションはボタンスタイルでますます人気があり、構成が簡単でボタン領域でスケーリングできますが、ブラウザのサポートは限られています（主にFirefox、Chrome、およびSafari）。構文は異なるブラウザー間で一貫性がありません。

対照的に、Box-Shadow属性を使用して色層をオーバーレイするために、画家オーバーレイの顔料と同様に、画像のないズーム可能で完全に構成可能なスムースボタンを作成できます。この方法は、一見ボックスシャドウの色を重ねるのが複雑に思えるかもしれませんが、より柔軟です。

純粋なCSS3グラデーションのサポートは、重要なUI要素や画像ベースのボタンの柔軟性の欠如に最適ではないことを考えると、WebデザイナーがCSS3グラデーションとボックスシェードプロパティを使用してボタンを作成する方法をマスターすることが重要です。

メソッド1：Box-Shadowはマルチレイヤー効果を作成します

基本的なフラットオレンジボタンから始めましょう。次の手順では、Box-Shadowを使用して光沢のあるボタン効果を作成する方法を段階的に示します。

ステップ1：標準の影を追加

Box-Shadowの基本的な構文は次のとおりです

コンマで区切られた複数の影をオーバーレイできます。たとえば、box-shadow: X偏移量 Y偏移量 模糊半径 颜色

最初の影は、20％の透明度を備えた黒い影を作成し、右下に3ピクセルをオフセットし、6ピクセルのぼやけた半径を備えています。 2番目の影にはオフセットがなく、ボタンをよりテクスチャにする微妙な暗い輝きを提供します。

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

ステップ2：基礎となる色を追加

キーワードは、シャドウを反転させてボタン内に表示できます。それを使用して基礎となる色を作成できます：

insetこれにより、ボタンの下半分に柔らかいライトオレンジの領域が残り、ガラスの表面の光の反射をシミュレートします。

inset 0px 25px 25px #930;

ステップ3：ハイライトカラーを追加

ボタンの上部に明るいオレンジ色の影を追加して、ぼやけた半径が小さく、ハードエッジのハイライトを作成します。

新しいボックスシャドウは前の影の下に重ねられているため、ハイライト色は暗い色の前に配置する必要があることに注意してください。

inset 0px 20px 2px rgba(240, 150, 69, .5)

ステップ4：リフレクションを調整

ハイライトをより自然にするために、ぼやけた暗いオレンジ色の影をボタンの上部に重ねることができます：

inset 0px 5px 12px #930

ステップ5：HOVERステータス

を追加します

マウスがホバリングしている場合、シャドウパラメーターを調整してボタンをより3次元に見せることができます：

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

ブラウザー互換性この方法は、SafariとChromeで完全に機能します。 FirefoxのCSS構文はほぼ同じで、を

に置き換えるだけです。 OperaとIE9はBox-Shadowもサポートしていますが、

プレフィックスを削除する必要があります。古いIEはBox-Shadowをサポートしていません。 -webkit-box-shadow -moz-box-shadow-webkit-概要

この例で使用されているオレンジ色のボタンは少し安っぽいかもしれませんが、ボックスシャドウを使用してカラーレイヤーをオーバーレイするこの方法は非常に実用的であり、さまざまなクールなボタン効果を作成できます。 このアプローチは、CSS3グラデーションと比較して、より良いブラウザの互換性と柔軟性を提供します。 この記事がUIデザインに新しいアイデアを提供できることを願っています。

（手順1-5のレンダリングをここに挿入する必要がありますが、写真を直接挿入できないため、説明に従って画像を追加してください。実際の画像リンクに画像リンクを置き換えてください）

以上がシャドウボクシング：イメージフリー、CSS3、光沢のあるボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。