5 einfache CSS Transitions die deine Nutzer überzeugen

CSS3 bringt unzählige Möglichkeiten für UX Designer und das auf sehr leichte Weise.

Ein paar Zeilen Code reichen um den Nutzern tolle Übergänge zu ermöglichen. Dadurch werden dein Benutzer gerne aud die Buttons drücken, was dir mehr Conversions bringt. Außerdem laufen die Effekte flüssig auf den meisten Geräten.

Aus diesen Gründen zeige ich euch heute wie ihr CSS in eure Website einbidet mit 5 Beispielen.

Als erstes erstellen wir einen DIV-Container:




    


    

Wenn wir damit fertig sind, legen wir die Größe, die Hintergrund-Farbe und den Übergang(transition) fest.


Bei transition gibt es drei Werte:
1.all = welche Objekte sollen den Effekt erhalten?
2.0.5s = wie lange soll der Übergang dauern?
3.ease = wie soll der Übergang beschleunigt werden?
Um einen Effekt zu ändern müssen wir nur diese drei Werte ändern

Hintergundfarbe

Um die Hintergundfarbe zu ändern musst du zum Beispiel folgendes schreiben:


Dann sieht das ganze so aus:

Fade In

beim Fade in ist das Objekt erst noch durchsichtig und wird dann beim :hover komplett sichtbar den Effekt erreicht ihr indem ihr
zu .pixel folgendes hinzufügt:

opacity:0.5;

und zu .pixel:hover folgendes

opacity:1;

Daraufhin sollte das ganze so aussehen:

Vergößern

Um etwas beim :hover zu vergrößern fügt ihr zu .pixel:hover das hier hinzu:

-webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);

Dann sieht das ganze so aus:

Das gleiche kannst du natürlich auch andersherum machen, also anstatt 1.3 beispielsweise 0.7.

Rahmen

Um einen coolen Rahmen-Effekt zu erhalten den man beispielweise für Buttons verwenden kann musst du folgendes zu pixel:hover hinzufügen:

box-shadow: inset 0 0 0 30px #01DFA5;

was folgendes ergibt:

3D Shadow

Um einen coolen 3D Effekt zu erreichen fügst du zu pixel:hover folgendes hinzu:

box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);

Du kannst ja mal selber ausprobieren wie das ganze aussieht und gucken welcher Effekt dir am besten gefällt.

Schreibe einen Kommentar