Plastischer Text dank CSS

Ich wollte meine Homepage marcoka.de optisch etwas aufwerten und habe daher mit CSS-Transitions gespielt. Dabei stieß ich in diesem sogenanntem "Internet" auf eine Möglichkeit um Text per Hover-Effekt plastisch wirken zu lassen. Den Link zu dem Tutorial habe ich leider in irgendeinem geschlossenen Tab verloren, wollte aber nichtsdestotrotz meine verwendete Version einmal dokumentieren, schliesslich ist dieses "Internet" ja groß und vielleicht hilft es ja dem ein oder anderem.

Ich nutze es um Links per Hover zu visualisieren.

Der Aufbau ist eigentlich ganz einfach, man gibt dem :hover-State mehrere text-shadow, die kann man einfach per Komma voneinander trennen. So wird manuell Stufe für Stufe ein anderer Schatten definiert. Durch die sich überlagernden Transparenzen ergibt sich dann auch ein kleiner Verlauf und gibt dem ganzen dadurch mehr Tiefe.

Gesteigert wird das noch durch ein top: -0.5rem;, wodurch der eigentliche Text sozusagen abhebt und der unterste text-shadow auf der gleichen Postion liegt wie der Text im normalen Modus. Dadurch scheint der Link sich aus dem Boden zu heben. Wichtig dabei ist das position: relative;, da sonst der Text an seiner Position stehen bleiben würde und der text-shadow nach unten ausfährt.

Das Ganze wird durch eine Transition (transition: all 0.2s ease-in;) nun noch ganz smooth nach oben geschoben.

(10 Bilder in einer 0.2 Sekunden Animation, sind entsprechend flüssig für das menschliche Auge)

Hier der Codepen dazu:

See the Pen Smooth sculptural animation (small) by Marco (@AlphonsPho) on CodePen.

Alles in allen eine kleine smoothe Sache, die flüssig läuft, aber nicht aufdringlich wirkt.

Wahrscheinlich wäre das genau ein Anwendungszweck für die ganzen CSS-Preprocessors wie LESS und SASS, aber dafür hatte ich bei dieser kleinen Aufgabe noch nicht genug Anreiz.

This article is my 4th oldest. It is 274 words long.