!

NEU: Mein Videokurs für Redakteure

Icon Hover mit Schatten

Icons können mehr als eine bloße Information transportieren - zum Beispiel zum Interagieren anregen. Vielleicht befindet sich hinter deinem Icon ein Link zu einer anderen Seite, einem Produkt oder ähnlichem und dem User ist gar nicht klar, dass er mit einem klick auf das Icon an einen anderen Ort gelangt.

Icon beim drüber-hovern mit Schatten und Vergrößerung ausstatten

Um dem PC-User (auf dem Smartphone und Tablet zu bedingt einsetzbar) zu verdeutlichen, dass er dieses Icon anklicken kann, soll ein Hover-Effekt zum Einstz kommen, der sowohl das Icon vergrößert, als auch einen Schlagschatten hinzufügt. Damit der Effekt smooth abläuft, habe ich noch eine transition-duration von 0.2 Sekunden hinzugefügt. So sieht der Code aus:

.cc_icon:hover{
transition: 0.20s;
scale:1.2;
text-shadow: 2px 2px 5px rgba(100,100,100,0.6);
}

.cc_icon{
font-size: 50px;
transition: 0.2s;
}

Kurze Anmerkung zum Text-Shadow - hier habe ich mit RGBA gearbeitet, da ich finde der Schatten sieht aufgrund des Alpha-Kanals und damit der Transparenz deutlich schöner aus; logischer Weise kann hierbei aber auch ein RGB- oder HEX-Code verwendet werden.

Die zweite Transition sorgt dafür, dass die Größe des Icons beim Entfernen des Mauszeigers nicht automatisch auf den Anfangswert zurückschnallt, sondern einen leichten fade hat - das ist deutlich angenehmer!

Zurück

Etwas nicht klar - Frag mich!

In diesem Beitrag erkläre ich dir, was der Contao Manager ist, wie du ihn einsetzt und installierst.

So gut wie jede aktuelle Website basiert auf einem CMS - aber was ist das eigentlich?

Passwort vergessen? Ich zeige dir, wie du es zurücksetzen kannst!