6つの矩形パネルのグリッドを作成する予定です(3 X 2)。各パネルは、システム内の別のモジュールを開くボタンとして機能します。私はマウスオーバーやホバーにいくつかの効果を求めて各パネルに適用しているので、実際にパネルをクリックする前にパネルが相互作用していることをユーザーが伝えることができます。 (それは、クリック可能であり、読み込み専用データではないことを彼らに示します)。例えば、パネルが実際にクリックされる前に、パネルに「押された」効果を与えるものがあればよいでしょう。 (私は他の提案にもオープンしています)。角度ブートストラップを使用してパネルに「押し込まれた」エフェクトを作成するバージョン0.13.4
私は現在、角度ブートストラップバージョン0.13.4を使用しています。ここで
は、私はそれを適用されるパネルのコードです:
<div
data-ng-if="vb.isAuthorized('ROLE_STAFF','ROLE_SRPROFESSOR')">
<div class="panel panel-default panelAttributes panel-snap"
data-ng-click="vb.change('classmodule')">
<div class="panel-body" id="content">
<div class="row col-md-12">
<img src="/WebContent/img/[email protected]" alt=""
class="img-responsive resize" /> <br> <span
class="classText Placement">Class Module</span>
</div>
<div class="col-md-6">
<p class="numericalText divContent">5</p>
<p class="infoText divContent">Community Colleges</p>
</div>
<div class="col-md-6">
<p class="numericalText divContent">28</p>
<p class="infoText divContent">Counties <br>Served</p>
</div>
</div>
</div>
</div>
私は任意の良い提案をお聞かせください!このようなものでは、どのようなデザイン・コンベンションが期待しているのかよくわからないので、ここで誰がどのようなアイディアを持っているのか見たいと思っていました。
私は現在、シャドウ効果を使用しています:
.panel-snap {
background-image: -webkit-linear-gradient(top, #FF5A00, #FFAE00);
background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
box-shadow: 3px 3px 5px 6px #A9A9A9;
}
は、感謝を私はどんな質問をお知らせ気軽に!