2016-08-08 1 views
0

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; 
} 

は、感謝を私はどんな質問をお知らせ気軽に!

答えて

0

これは純粋にあなたの選択ですが、もちろんいくつかのパターンがあります。 Googleマテリアルは非常に人気があります(正当な理由で)おそらくhereからインスピレーションを得ることができます。迅速なインスピレーションのためのもう一つの良いリソースはCodeDropsです。

私はしばしば、ホバーイベントを10%明るく/暗くするためにSASSまたはLESSを使用します。これにより、マスターカラーを設定し、正確かつ一貫性のある方法で操作することができます。あなたはmixinを使うことさえできます。

私は個人的には、インタラクティブ性に関してはそれほど多くはないと思っていますが、実際にはあなたのユーザーに与えようとしている経験にはまったくありません。

実際にデザインプロセスが始まります。これらのデザインパターンを選択すると、非常に時間がかかり、複雑なプロセスになる可能性があります。設計者は、このプロセス全体を徹底的に苦労させることができます。

私はリストデザインの提案を残すことができましたが、実際にGoogleはこの1つのあなたの友人であり、研究し、インスピレーションを得ています。または、codepenであなたの要素を分離し、それを使って遊んでください。さまざまなスタイルやアニメーションの組み合わせを試してみるのはとても楽しいことです。

関連する問題