box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
Post on:2013年2月6日
sponsors
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。
10 Creative Techniques Using CSS3 Box Shadow
10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。
- 1. スクロールしてもバーを常に最上部に表示
- 2. サブナビゲーションのドロップダウン
- 3. シャドウを使った光沢が美しいボタン
- 4. 吹き出しスタイルの通知パネル
- 5. Appleのページラッパー
- 6. Appleのコンテンツボックス
- 7. Appleのフィーチャーリンク
- 8. 画像にさりげなくシャドウを添える
- 9. フォームの入力を目立たせる
- 10. エラステック対応のボタン
1. スクロールしてもバーを常に最上部に表示
重要な情報をバーに配置し、そのバーをスクロールしても常に上部に表示します。
使用サイト: Trilulilu
HTML
<div id="banner">
<h1>#01 Fixed Top Toolbar</h1>
</div>
CSS
#banner {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}
#banner h1 {
line-height: 60px;
}
実装のポイント
box-shadowがかなりシンプルに使われた好例で、3pxのシャドウを使用しています。ポイントはカラー指定のアルファ値に0.16を指定し、微かなシャドウにしていることです。
2. サブナビゲーションのドロップダウン
コンテンツの上にサブナビゲーションのドロップダウンをホバーでふわりと表示します。
使用サイト: Entrepreneur
HTML
<nav id="bar">
<ul>
<li><a href="#" class="selected">Startups</a></li>
<div class="subnav"><h3>Here is some dummy content</h3></div>
<li><a href="#">Internet Culture</a></li>
<li><a href="#">Making Money</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Technology</a></li>
</ul>
</nav>
CSS
#bar { display: block; height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; }
#bar ul { margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; }
#bar ul li { background: #22385a; display: block; font-size: 1.2em; position: relative; float: left; }
#bar ul li a {
display: block;
color: #fffff7;
line-height: 45px;
font-weight: bold;
padding: 0px 10px;
text-decoration: none;
z-index: 9999;
}
#bar ul li a:hover, #bar ul li a.selected {
color: #365977;
background: #fff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}
#bar ul .subnav {
display: block;
left: 14px;
top: 48px;
z-index: -1;
width: 500px;
position: absolute;
height: 90px;
border: 1px solid #edf0f3;
border-top: 0;
padding: 10px 0 10px 10px;
overflow: hidden;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333');
}
実装のポイント
ナビゲーションはホバー時にハイライトし、サブナビゲーションのパネルを表示します。ハイライト時には角丸になり、そのアイテムとパネルが繋がり、コンテンツから浮かんでいるようにbox-shadowを使用します。
3. シャドウを使った光沢が美しいボタン
box-shadowでシャドウを使った、ついついクリックしたくなる光沢が美しいボタンです。
使用サイト: YouTube
HTML
<button class="blues">Hover Me!</button>
CSS
blues {
color: #fff;
width: 190px;
height: 35px;
cursor: pointer;
font-family: Arial, Tahoma, sans-serif;
font-size: 1.0em;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-width: 1px;
border-color: #0053a6 #0053a6 #000;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
}
.blues:hover {
border-color: #002d59 #002d59 #000;
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}
.blues:active {
border-color: #000 #002d59 #002d59;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}
実装のポイント
シンプルなマークアップで、可能な限り多くのブラウザをサポートするスタイルシートのテクニックは必見です。キャプチャではノーマル・ホバーのみですが、アクティブのスタイルもユーザーの注意を引きつけるでしょう。
4. 吹き出しスタイルの通知パネル
リニューアルされたFacebookで使用されている吹き出しスタイルの通知パネルです。
使用サイト: Facebook
HTML
<div class="flyout"> <span id="tip"></span> <h2>Notifications</h2> <p>No new notifications!</p> </div>
CSS
.flyout {
width: 310px;
margin-top: 10px;
font-size: 11px;
position: relative;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
background-color: white;
padding: 9px 11px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #c5c5c5;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.flyout #tip {
background-image: url('images/tip.png');
background-repeat: no-repeat;
background-size: auto;
height: 11px;
position: absolute;
top: -11px;
left: 25px;
width: 20px;
}
.flyout h2 {
text-transform: uppercase;
color: #666;
font-size: 1.2em;
padding-bottom: 5px;
margin-bottom: 12px;
border-bottom: 1px solid #dcdbda;
}
.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; }
実装のポイント
吹き出し状の三角形をCSS3でつくることもできますが、ここでは画像を使用しています。画像を使用する利点は実装が簡単であり、画像なので回転して利用することもできます。
5. Appleのページラッパー
Appleのサイトには多くのbox-shadowを使ったエレメントが使用されています。その中から、いくつかのカラムを持ったラッパーです。
使用サイト: Apple
HTML
<div class="applewrap"> <div class="col"><img src="images/buystrip_hero.png" alt="Apple strip"></div> <div class="col"> <h2>Some Text</h2> <p>This demonstration has to contain some type of content. So, here it is. I'm sure it all looks real fancy.</p> </div> <div class="col last"> <h2>OSX Release Promo</h2> <img src="images/promo_mountain_lion.png" alt="OSX Mountain Lion"> </div> </div>
CSS
.applewrap {
width: 100%;
display: block;
height: 150px;
background: white;
border: 1px solid;
border-color: #e5e5e5 #dbdbdb #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}
.applewrap .col {
float: left;
box-sizing: border-box;
width: 250px;
height: 150px;
padding: 16px 7px 6px 22px;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
border-right: 1px solid #dadada;
}
実装のポイント
幅や高さを配置するアイテムによって変更して、簡単に利用することができます。このbox-shadowは、背景がホワイトやグレーのページにとてもフィットします。
6. Appleのコンテンツボックス
Appleでは他にもカラムデザイン用にbox-shadowを使用しています。このコンテンツボックスはページの下に関連した情報を表示するものです。box-shadowが内側の上から下にあることで、まったく異なるデザインスタイルにしています。
使用サイト: Apple
HTML
<div class="applebox"> <div class="col"> <p>Some first column content.</p> </div> <div class="col"> <p>and here too!</p> </div> <div class="col"> <p>Oh wow, just so much Apple...</p> </div> </div>
CSS
.applebox {
width: auto;
height: 85px;
box-sizing: border-box;
background: #f5f5f5;
padding: 20px 20px 10px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
}
.applebox .col {
width: 140px;
float: left;
margin: 0 0 0 30px;
}
実装のポイント
box-shadowはinsetで、RGBaのアルファ値に0.3を指定し、真っ黒なシャドウながら薄くしています。ページ内の他のエレメントとデザインの変化をつけるポイントとしています。
7. Appleのフィーチャーリンク
Appleからの最後は、ホバー時に背景がハイライトするパネルです。
使用サイト: iCloud
HTML
<div class="applefeature"> <a href=""> <img src="images/nav_apps_icon.png" alt="App Store"> <h4>Apps</h4> </a> </div>
CSS
.applefeature {
height: 150px;
margin: 8px;
vertical-align: top;
display: inline-block;
}
.applefeature a {
display: block;
width: 168px;
height: 140px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
font-weight: bold;
line-height: 1.3em;
background: #f7f7f7;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.applefeature a:hover {
background: #fafafa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7));
background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.applefeature a img {
display: block;
margin: 26px auto 4px;
}
.applefeature a h4 {
display: block;
width: 160px;
font-size: 1.3em;
font-family: Arial, Tahoma, sans-serif;
color: #646464;
text-align: center;
}
実装のポイント
フィーチャードリンクは固定された幅に、アイコンとテキストを配置したパネルです。ここにも前述のbox-shadowに類似したテクニックが利用されています。このパネルはフレキシブルなので、高さや幅を変更して小さくしたり大きくすることも簡単です。
8. 画像にさりげなくシャドウを添える
画像をフレームにはいったようなデザインにします。デモではbox-shadowがよりはっきり見えるように背景をグレーにしました。
使用サイト: WordPress
HTML
<img src="images/twitter-bird.jpg" alt="WP Box Shadow image styles" class="wpframe">
CSS
.wpframe {
background: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 8px;
-webkit-box-shadow: 1px 2px 1px #d1d1d1;
-moz-box-shadow: 1px 2px 1px #d1d1d1;
box-shadow: 1px 2px 1px #d1d1d1;
}
実装のポイント
マークアップはimg要素のみで、borderでフレームをつくり、box-shadowでシャドウをつけています。paddingは2pxづつなので、計8pxにします。
9. フォームの入力を目立たせる
フォームのフィールドに入力時、box-shadowで輝くように目立たせます。
使用サイト: Pinterestログインページ
HTML
<div class="formwrap"> <label for="email">Email</label> <input type="text" name="email" id="email" placeholder="" class="shadowfield"> </div> <div class="formwrap"> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="" class="shadowfield"> </div>
CSS
.formwrap { display: block; margin-bottom: 15px; }
.formwrap label {
display: inline-block;
width: 80px;
font-size: 11px;
font-weight: bold;
color: #444;
font-family: Arial, Tahoma, sans-serif;
}
.formwrap .shadowfield {
position: relative;
width: 250px;
font-size: 17px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px 12px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
.formwrap .shadowfield:focus {
border-color: #930;
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}
実装のポイント
そのままのフォームでも非常に魅力的ですが、フィールドにフォーカスした際に入力の邪魔にならないように目立たせるのは非常に効果的です。単にハイライトするだけでなく、アニメーションを使っているのも大きなポイントです。
10. エラステック対応のボタン
ホバーはアニメーションで微量のハイライトをいれ、アクティブにもアニメーションで効果的なスタイルを適用したボタンです。一見シンプルですが、実際には3つのシャドウを結合してします。
使用サイト: Mozilla
HTML
<div class="btn-container"> <a href="javascript:void(0)" class="blu-btn">Blue Button</a> </div> <div class="btn-container"> <a href="javascript:void(0)" class="grn-btn">Greenie</a> </div>
CSS
.blu-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #276195;
background-image: -moz-linear-gradient(#3c88cc,#276195);
background-image: -ms-linear-gradient(#3c88cc,#276195);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#3c88cc),color-stop(100%,#276195));
background-image: -webkit-linear-gradient(#3c88cc,#276195);
background-image: -o-linear-gradient(#3c88cc,#276195);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)";
background-image: linear-gradient(#3c88cc,#276195);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s
}
.blu-btn:hover, .blu-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
}
.blu-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}
.grn-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #659324;
background-image: -moz-linear-gradient(#81bc2e,#659324);
background-image: -ms-linear-gradient(#81bc2e,#659324);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#81bc2e),color-stop(100%,#659324));
background-image: -webkit-linear-gradient(#81bc2e,#659324);
background-image: -o-linear-gradient(#81bc2e,#659324);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)";
background-image: linear-gradient(#81bc2e,#659324);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s;
}
.grn-btn:hover, .grn-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
}
.grn-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}
実装のポイント
このスタイルはあらゆるクリック可能な要素に適用することができます。ユーザーはユニークなインタラクションを好みます、こういったインタラクションを入れることはクリック率が高くなることを意味します。
sponsors
