jQuery Flat Shadow – Tiefe und Schatten für Flat Design
Kommentare

Wer gerne Flat Design einsetzen möchte, aber dennoch nicht auf ein wenig Tiefe in seinen grafischen Elementen verzichten möchte, sollte sich mal das jQuery Plugin „jQuery Flat Shadow“ von Pete R., einem UI Designer aus Bangkok, anschauen. Damit lassen sich lange Schatten mit Verlauf für HTML Elemente erzeugen – ohne Photoshop. Man kann die Farbe des Schattens definieren als auch den Winkel und den Verlauf des Fadings.

Um jQuery Flat Shadow einzusetzen, muss man einfach die aktuellste jQuery Bibliothek (hier) zusammen mit jquery.flatshadow.js im <head> des Dokuments einfügen, gefolgt vom HTML Markup und dem folgenden function call:

<div class=„flat-icon“> FLAT </div>
<div class=„flat-icon“> UI </div>

$(".flat-icon").flatshadow({   color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned)   
angle:
"SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned)  
fade: true,
// Gradient shadow effect   boxShadow: "#d7cfb9" // Color of the Container's shadow });

 

Personalisierung

 jquery.flatshadow erlaubt ferner das Hinzufügen von individuellen Effekten zu individuellen Elementen. Dazu muss man einfach eine data-color und einen data-angle wie im folgenden Beispiel zum Markup hinzufügen.

<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div> 

<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>

Dann sollte man noch die Farb- und globalen Angle-Optionen wie hier entfernen:





$(".flat-icon").flatshadow({

   fade: true,   

    boxShadow: "#d7cfb9"

});

Jetzt sollte jedes einzelne Element seinen eigenen Effekt haben, ohne dass die man die Funktion mehrere Male aufrufen muss.

Hier gibt es ein ausführliches Tutorial vom Macher Pete R. jQuery Flat Shadow kann bei Github runtergeladen werden.

Und hier einige Screenshots, die die Möglichkeiten von jQuery Flat Shadow zeigen:

http://www.onextrapixel.com/examples/add-depth-to-flat-ui-with-flat-shadow/Screenshot: http://www.onextrapixel.com/examples/add-depth-to-flat-ui-with-flat-shadow/


 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -