10 CSS-Snippets zum Erstellen atemberaubender animierter Textunterstreichungseffekte

Die standardmäßige CSS-Unterstreichung funktioniert hervorragend. Wer könnte es hassen?

Aber es gibt immer Raum, Dinge zu verbessern. Sie denken vielleicht, dass Sie mit Unterstreichungen nicht viel anfangen können, aber wenn Sie sich mit CSS-Animationen befassen, werden Sie feststellen, wie viel Sie wirklich tun können!

Ich habe unzählige CSS-Unterstreichungsstile durchgesehen und meine beste Wahl für die besten benutzerdefinierten Unterstreichungen im Internet getroffen. Wenn Ihnen eines davon ins Auge fällt, können Sie gerne einsteigen und versuchen, mit dem Quellcode herumzuspielen.

1. Abwechselndes Unterstreichen

Wenn Sie Ihren Cursor zwischen diesen Links bewegen, werden Sie etwas komisches bemerken. Der Unterstreichungseffekt im Navigationsmenü ändert tatsächlich den Stil zwischen Links.

Nicht nur das, es bewegt sich auch dynamisch über das Navi, um die Illusion zu erwecken, dass es sich um einen einzelnen Block handelt. Ziemlich cool oder?

All dies können Sie mit etwas CSS selbst erledigen, indem Sie den unterstrichenen Block in ein HTML-Element einfügen. Überraschend einfach, wenn man bedenkt, wie wenig Code Sie benötigen (etwa 60 Zeilen CSS).

2. Mehrere Zeilen überspannen

CSS-Zeilenumbruchstile sind knifflig und nicht einfach zu umgehen. Aber mit etwas Einfallsreichtum hat Entwickler Will King diesen Stift gebaut, der einen dynamischen Unterstreichungseffekt erzeugt, der sich ohne Fehler über mehrere Zeilen erstrecken kann.

Beachten Sie, dass dies auf ein wenig JavaScript angewiesen ist, um die Linie intakt zu halten. Aber es ist auch dynamisch genug, um mit jedem Link auf der Seite zu arbeiten, also spielt es keine Rolle, wie Sie den Text formatieren.

Außerdem verwendet diese ganze Sache einen benutzerdefinierten CSS3-Farbverlauf für den Hintergrund, der verdammt cool ist.

3. Gleitende Unterstreichung

Der Entwickler Ryan Morse hat diesen sehr einfachen Unterstreichungseffekt erstellt, der ausschließlich auf CSS basiert. Es ist eine ziemlich elegante Lösung, wenn man bedenkt, dass nicht einmal ein zusätzliches HTML-Element erforderlich ist.

Sie können Ihre Navigationsmenüs wie jede andere Website gestalten und diesen CSS-Effekt verwenden, um dynamische Gleitanimationen zu erstellen. Außerdem können alle Ergebnisse im CSS-Code geändert werden, einschließlich Erleichterungen und Gesamtdauer.

4. Bessere Textunterstreichung

Auf den ersten Blick fällt Ihnen bei dieser Unterstreichung vielleicht nichts anderes auf. Aber wenn Sie es mit der „Standard“-Demo weiter unten auf der Seite vergleichen, werden Sie sehen, dass das wirklich viel besser aussieht.

In Lukas Horaks besserer Textunterstreichung werden Sie feststellen, dass der Balken unter dem Text besser in absteigende Elemente passt. Dies berücksichtigt Buchstabenformen wie 'g' und 'p', bei denen die Zeilen unter die übliche Zeilenhöhe fallen.

Auch die Unterstreichung selbst wird etwas tiefer unter den Text geschoben, sodass sie im Vergleich zur Standardeinstellung des Browsers ein neues Aussehen erhält.

5. Animationsstile

Dieser einzigartige Stift verfügt über einige benutzerdefinierte Unterstreichungseffekte, die vom Entwickler Matthew Scott mit reinem CSS erstellt wurden.

Es verfügt über vier sehr spezifische Unterstreichungsstile, die auf einigen gängigen CSS-Übergängen basieren:

• Rechts nach links
• Links nach rechts
• Nach außen animieren
• Nach innen animieren

Sie werden feststellen, dass dies bei den üblichen CSS3-Übergängen funktioniert, die sowohl beim Bewegen des Mauszeigers über den Link als auch beim Bewegen des Cursors vom Link funktionieren.

Definitiv einige coole Effekte und sie lassen sich alle ziemlich einfach in Ihre eigenen Projekte portieren.

6. Weitere Animationsstile

Hier ist ein weiteres Paket benutzerdefinierter Unterstreichungsanimationen, die von Entwickler Kseso erstellt wurden.

Diese werden etwas extremer mit den Unterstreichungsstilen, die CSS3-Schatten für leuchtende Effekte drücken. Sie können dies wahrscheinlich als Vorlage verwenden, um ein radikales Star Wars-Lichtschwertdesign zu erstellen, wenn Sie die Zeit haben (oder Star Wars einfach lieben).

7. Einfach vorbeikommen

Ich habe diesen Effekt auf einigen Websites gesehen und er ist wahrscheinlich einer meiner Favoriten. Die Dropdown-Unterstreichung verwendet reines CSS und animiert die Linie mit einem Übergangseffekt sichtbar.

Bei dieser Animation haben Sie immer noch das Gefühl, dass jede unterstrichene „Grenze“ mit jedem Link verbunden ist. Ich mag es mehr als die Linien, die zwischen Links gleiten, weil sich dieser Effekt schneller und direkter anfühlt.

Wenn Sie einen wirklich minimalistischen Ansatz zum Unterstreichen von Effekten wünschen, sollten Sie unbedingt versuchen, mit diesem Code zu arbeiten.

8. Erweiternde Animation

Den expandierenden Unterstreichungsstil finden Sie in dem zuvor erwähnten Unterstreichungspaket. Aber diese spezielle Unterstreichung ist ein bisschen anders, weil sie ein benutzerdefiniertes Animationstiming verwendet.

Beachten Sie, dass die Funktioncubic -bezier() verwendet wird, um eine einzigartige Animation beim Hover zu erstellen.

Dies läuft etwas schneller als der standardmäßige „lineare“ Übergang, sodass ein ganz anderer Effekt erzielt wird. Und Sie können sogar versuchen, die Bezier-Animation selbst anzupassen, um einen einzigartigen Unterstreichungsstil zu erstellen.

9. Benutzerdefinierte CSS-Unterstreichungen

Hier ist ein weiterer Stil, der wirklich auf jeder Website funktionieren kann. Entwickler Tristan Wilson hat diese einfachen Unterstreichungen erstellt, die die Linie ein paar Pixel tiefer unter dem Text umranden.

Es ist nur subtil genug, um es zu bemerken, wird aber sicherlich keinen großen Unterschied in der Benutzerfreundlichkeit machen. Bei diesem Effekt geht es mehr um Ästhetik als um zusätzliche Benutzerfreundlichkeit.

Wenn Sie möchten, dass sich Ihre Unterstriche wirklich von der ganzen Herde abheben, ist dieses Set ein großartiger Ausgangspunkt.

10. Anpassung zwischen Abseilern

Weiter oben habe ich das Anpassen von Unterstreichungsstilen erwähnt, damit sie zu Unterlängen im Typ passen. Nun, dieser Stift von Jonathan Neal tut genau das und verwendet nichts weiter als HTML5 und CSS3.

Der gesamte Effekt hängt von einigen CSS3-Eigenschaften ab: box-shadow und text-shadow , um genau zu sein.

Dies erzeugt die Illusion, dass seitlich von Unterlängenelementen Platz ist, und verleiht der Unterstreichung ein edleres Gefühl.

Definitiv eine saubere Wahl für jede Website und es ist eine nette Möglichkeit, auch Ihre Unterstreichungsfarbe zu ändern.

11. Benutzerdefinierte Farbverläufe

Wenn Sie wirklich versuchen, Grenzen zu überschreiten, dann versuchen Sie, diesen Stift mit seinem benutzerdefinierten Verlaufsstil für Unterstreichungen zu überarbeiten.

Der Farbverlauf läuft durch CSS3, sodass Sie die Farben beliebig ändern können. Und wenn Sie es glauben können, benötigt dieses Ding kein zusätzliches HTML , um zu funktionieren. Zielen Sie einfach auf die gewünschten Ankerlinks und kopieren Sie die CSS-Codes und fügen Sie sie ein, um Ihre eigenen Verlaufsunterstreichungen zu erhalten.

Von all diesen Designs hoffe ich sicherlich, dass es einen schönen Effekt gibt, den Sie aus dieser Kollektion mitnehmen können.

Designer denken nicht immer über Unterstreichungseffekte nach, aber mit Typografie kann man viel machen, und wenn Sie sich mit CSS auskennen, sind Ihnen wirklich keine Grenzen gesetzt.