CSS3 hat unzählige Möglichkeiten für UX-Designer eingeführt, und das Beste daran ist, dass die coolsten Teile wirklich einfach zu implementieren sind.
Mit nur ein paar Zeilen Code erhalten Sie einen beeindruckenden Übergangseffekt, der Ihre Nutzer begeistert, die Interaktion steigert und letztendlich, wenn sie gut genutzt wird, Ihre Conversions erhöht. Außerdem sind diese Effekte hardwarebeschleunigt und eine progressive Erweiterung, die Sie jetzt verwenden können.
Hier sind 8 wirklich einfache Effekte, die Ihrer Benutzeroberfläche Leben einhauchen und den Gesichtern Ihrer Benutzer ein Lächeln verleihen.
Alle diese Effekte (Takt eins) werden mit der Übergangseigenschaft gesteuert. Damit wir sehen können, dass diese Effekte funktionieren, richten wir ein div in einer HTML-Seite ein:
Nachdem Sie dies getan haben, legen Sie die Breite und Höhe (also die Dimensionen), die Hintergrundfarbe (damit wir es sehen können) und die Übergangseigenschaft fest.
Die Übergangseigenschaft hat drei Werte: die Eigenschaften zum Übergang (in unserem Fall alle) die Geschwindigkeit des Übergangs (in unserem Fall 0,3 Sekunden) und ein dritter Wert, mit dem Sie ändern können, wie die Beschleunigung und Verzögerung berechnet wird, aber wir ' Bleib beim Standard, indem du dieses Feld leer lässt.
Jetzt müssen wir nur die Eigenschaften ändern und sie werden für uns animieren ...
Wenn du mitkommen möchtest, kannst du Laden Sie die Demo-Dateien hier herunter.
Dinge einzublenden ist eine ziemlich häufige Anfrage von Kunden. Es ist eine großartige Möglichkeit, die Funktionalität hervorzuheben oder auf einen Handlungsaufruf aufmerksam zu machen.
Einblendungseffekte werden in zwei Schritten codiert: Zuerst legen Sie den Anfangszustand fest; Als nächstes setzen Sie die Änderung, zum Beispiel bei Hover:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Stellen Sie sicher, dass Sie die Klasse Ihres Divs auf "Fade" setzen, damit das funktioniert.)
Um ein Element zu vergrößern, mussten Sie seine Breite und Höhe oder seine Füllung verwenden. Aber jetzt können wir die CSS3- Transformation zum Vergrößern verwenden.
Setze die Klasse deines DIVs auf "grow" und füge diesen Code deinem Style Block hinzu:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS-Transformationen haben eine Reihe verschiedener Verwendungen, und eine der besten ist die Transformation der Rotation eines Elements. Gib deinem Div die Klasse "rotate" und füge folgendes zu deinem CSS hinzu:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D-Schatten waren ein Jahr oder so verpönt, weil sie nicht als kompatibel mit flachem Design angesehen wurden, was natürlich Unsinn ist, sie funktionieren fantastisch gut, um einem Benutzer Feedback zu ihren Interaktionen zu geben und mit flachen oder falschen 3D-Interfaces zu arbeiten .
Dieser Effekt wird erreicht, indem ein Feldschatten hinzugefügt und dann das Element auf der x-Achse mithilfe der Transform- und Translate- Eigenschaften verschoben wird, so dass er scheinbar außerhalb des Bildschirms wächst.
Gib deinem Div die Klasse "Threed" und füge dann folgenden Code zu deinem CSS hinzu:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Einer der angesagtesten Button-Stile ist momentan der Ghost-Button; eine Schaltfläche ohne Hintergrund und eine schwere Umrandung. Wir können natürlich einem Element einen Rahmen hinzufügen, aber das wird die Position des Elements ändern. Wir könnten dieses Problem mit der Box-Sizing beheben, aber eine viel einfachere Lösung ist der Übergang in einem Rahmen mit einem Schatten im Inset-Box.
Geben Sie Ihrem div die Klasse "border" und fügen Sie Ihren Styles das folgende CSS hinzu:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}