Einen "gepressten" Effekt auf einem Panel mit einem eckigen Bootstrap machen Version 0.13.4

Question

Ich plane ein Raster von 6 rechteckigen Panels, (3 X 2). Jedes Panel fungiert als eine Schaltfläche, die ein anderes Modul in meinem System öffnet. Ich suche nach einem Effekt bei mouseover oder hover, um auf jedes Panel angewendet zu werden, so dass der Benutzer erkennen kann, dass mit dem Panel interagiert wird, bevor er tatsächlich auf das Panel klickt. (Es wird ihnen zeigen, dass es anklickbar ist und nicht nur nur Daten lesen). Zum Beispiel wäre etwas, das dem Panel einen "gedrückten" Effekt verleiht, bevor das Panel tatsächlich angeklickt wird, schön. (Ich bin offen für andere Vorschläge).

Ich verwende derzeit eckige Bootstrap-Version 0.13.4.

Hier ist der Code für das Panel, dass ich es um die Anwendung wird:

<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/Shape@3x.png" 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> 

Bitte lassen Sie mich über gute Vorschläge kennen! Ich bin mir nicht sicher, welche Design-Konventionen mit solchen Dingen erwarten, also wollte ich sehen, welche Ideen jemand hier haben könnte.

ich zur Zeit einen Schatteneffekt bin mit:

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

Fühlen Sie sich frei, um mich von allen möglichen Fragen, Dank wissen!

Answer 1

Dies ist nur Ihre Wahl, natürlich gibt es einige Muster, denen Sie folgen können. Google Material ist sehr beliebt (aus gutem Grund), vielleicht können Sie sich von here als Ausgangspunkt inspirieren lassen. Eine weitere gute Quelle für schnelle Inspiration unter CodeDrops.

Ich verwende oft gerne SASS oder LESS, um Hover-Ereignisse um 10% heller/dunkler zu machen. Auf diese Weise können Sie eine Masterfarbe festlegen und sie präzise und konsistent bearbeiten. Du könntest sogar ein Mixin verwenden.

Persönlich denke ich, weniger ist mehr, wenn es um Interaktivität geht, aber es ist wirklich auf die Erfahrung, die Sie Ihrem Benutzer geben wollen.

Es kommt wirklich auf den Entwurfsprozess an, die Wahl dieser Entwurfsmuster kann ein sehr langwieriger und komplizierter Prozess sein. Designer können sich über diesen Prozess ausgiebig quälen.

Ich könnte weiterhin Designvorschläge auflisten, aber google ist dein Freund auf diesem, forsche und lasse dich inspirieren. Alternativ kannst du dein Element in einem codepen isolieren und damit herumspielen. Es kann wirklich Spaß machen, mit verschiedenen Stilen und Animationskombinationen zu experimentieren.