CSS3 を使用して、繊細で滑らかなテクスチャを持つボタンのセットを作成する_html/css_WEB-ITnose

CSS3 には多くの強力な新機能が導入されており、デザイナーや開発者はさまざまな絶妙なインターフェイス効果を簡単に作成できます。下の光るボタンがかわいいですね。ボタンの上にマウスを置くと、ダイナミックな光沢のある移動効果が表示されます。

注意事項: 最良の結果を得るには、IE10 以降、Chrome、Firefox、Safari などの最新のブラウザで閲覧してください。

オンラインデモ

ソースコードのダウンロード

これらの絶妙な効果は、読みやすくするためにCSS3RGBA、box-shadow（シャドウ）、border-radius（境界フィレット）、およびlinear-gradient（線形グラデーション）を使用しています。簡略化した公開部分のコードは次のとおりです:

.button {

min-height: 1.5em;

display: inline-block;

padding: 12px 36px;

margin: 40px 5px 5px 0px;

cursor :pointer ;

opacity: 0.9;

color: #FFF;

font-size: 1em;

letter-spacing: 1px;

/* X 軸オフセット 1 ピクセル、Y 軸オフセット 2ピクセル、不透明度 黒のテキストシャドウ: 0.9 4px;

/*

マルチレイヤーシャドウを使用してボタンの 3 次元効果を実現します

最初のレイヤー: Y 軸を 1 ピクセルオフセット、不透明度 1 の白い外側のシャドウ効果0.25

2番目のレイヤー: Y軸を1ピクセルオフセット、不透明度0.25の白い内側のシャドウ効果

3番目のレイヤー: オフセット0、不透明度0.25の黒い外側のシャドウ効果

4番目のレイヤー: Y 軸のオフセット 20 ピクセル、不透明度 0.03 の白いインナーシャドウ シャドウ効果

5 番目のレイヤー: X 軸オフセット -20 ピクセル、Y 軸オフセット 20 ピクセル、不透明度 0.15 の黒いインナーシャドウ効果

6 番目のレイヤー: X 軸オフセット 20 ピクセル、Y 軸オフセット 20 ピクセルと不透明度 0.05 の白いインナーシャドウ効果

*/

box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba( 255,255,255,0.25) 0px 1px 0px、インセット rgba(0,0,0 ,0.25) 0px 0px 0px、インセット rgba(255,255,255,0.03) 0px 20px 0px、インセット rgba(0,0,0,0.15) 0px -20px 20px、 inset rgba(255,255,255,0.05) 0px 20px 2 0px;

/* let 変化する属性は 100 ミリ秒以内に均一に遷移します*/

transition: すべて 0.1 秒線形 } .button:hover {

/*

The multi - マウスがホバーしているときのボタンのレイヤーのシャドウ効果は、デフォルトのボタンとまったく同じです 最初のレイヤーには変更があります:

最初のレイヤー: X 軸オフセットが 2 ピクセルの黒い外側のシャドウ効果、Y-軸オフセット 5 ピクセル、不透明度 0.5

*/

box-shadow: rgba(0,0 ,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0) 、0,0,0.25）0px 0px 0px、Inset RGBA（255,255,0.03）0px 20px、Inset RGBA（0、0,0,0.15）0px -20px 20px、Inset RGBA（255,255,255,0.05）20px 20px; .shine {

display: block;

position:relative;

/* IE はグラデーションを実現するために以下のフィルターを使用します Effect*/

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr= '#00ffffff',GradientType=1 );

/* 水平方向の線形グラデーションを使用して、ボタンの上部に Guanze 効果を実現します */

背景: 線形グラデーション (左、RGBA (255,255,255,0) 0%、 RGBA（255,255,255,1）50％、RGBA（255,255,25,0）100％）; : rgba(255,255,255,0.2) 0px 1px 5px;

/* 変更されたプロパティを 300 ミリ秒以内にイーズインアウトします (最初に加速してから減速します) モード遷移*/

トランジション: すべて 0.3 秒イーズインアウト; }

この記事への固定リンク: http://www.i7758.com/archives/1591.html