10 fragmentów CSS do tworzenia oszałamiających animowanych efektów podkreślenia tekstu

Domyślne podkreślenie CSS działa świetnie. Kto mógłby tego nienawidzić?

Ale zawsze można coś poprawić. Być może nie myślisz, że podkreślenia są zbyt duże, ale jeśli zagłębisz się w animację CSS, zdasz sobie sprawę, jak wiele naprawdę możesz!

Posortowałem niezliczone style podkreślenia CSS i wybrałem moje najlepsze opcje, aby uzyskać najlepsze niestandardowe podkreślenia w Internecie. Jeśli któryś z nich przyciągnie twoją uwagę, możesz wskoczyć i spróbować poeksperymentować z kodem źródłowym.

1. Naprzemienne podkreślenie

Jeśli przesuniesz kursor między tymi linkami, zauważysz coś zabawnego. Efekt podkreślenia w menu nawigacyjnym faktycznie zmienia style między linkami.

Nie tylko to, ale porusza się dynamicznie po nawigacji, dając złudzenie, że jest to pojedynczy blok. Całkiem fajnie, prawda?

Możesz to wszystko zrobić samodzielnie, używając odrobiny CSS, dodając podkreślony blok do elementu HTML. Zaskakująco proste, biorąc pod uwagę, jak mało kodu potrzebujesz (około 60 linijek CSS).

2. Łączenie wielu linii

Style podziału wiersza CSS są trudne i niełatwe do obejścia. Ale dzięki pomysłowemu programiście Will King zbudował to pióro, tworząc dynamiczny efekt podkreślenia, który może obejmować wiele linii bez żadnych błędów.

Zauważ, że polega to na odrobinie kodu JavaScript, aby utrzymać linię w nienaruszonym stanie. Ale jest również wystarczająco dynamiczny, aby działać z dowolnym linkiem na stronie, więc nie ma znaczenia, jak sformatujesz tekst.

Plus to wszystko używa niestandardowego gradientu CSS3 dla tła, co jest cholernie fajne.

3. Przesuwane podkreślenie

Deweloper Ryan Morse stworzył ten bardzo prosty efekt przesuwanego podkreślenia, oparty wyłącznie na CSS. To całkiem eleganckie rozwiązanie, biorąc pod uwagę, że nie wymaga nawet dodatkowego elementu HTML.

Możesz zaprojektować swoje menu nawigacyjne tak jak każdą inną witrynę i użyć tego efektu CSS do tworzenia dynamicznych animacji przesuwnych. Dodatkowo wszystkie wyniki można zmienić w kodzie CSS, który obejmuje luzy i całkowity czas trwania.

4. Lepsze podkreślenie tekstu

Na pierwszy rzut oka możesz nie zauważyć niczego innego z tym podkreśleniem. Ale jeśli porównasz to z „domyślną” wersją demonstracyjną na dole strony, zobaczysz, że naprawdę wygląda to o wiele lepiej.

W lepszym podkreśleniu tekstu Lukasa Horaka zauważysz, że pasek pod tekstem lepiej pasuje do elementów opadających. Uwzględnia to formy literowe, takie jak „g” i „p”, gdzie wiersze spadają poniżej zwykłej wysokości wiersza.

Również samo podkreślenie jest przesunięte nieco niżej pod tekstem, dzięki czemu nabiera nowego wyglądu w porównaniu do domyślnej przeglądarki.

5. Style animacji

To wyjątkowe pióro zawiera kilka niestandardowych efektów podkreślenia stworzonych za pomocą czystego CSS przez programistę Matthew Scotta.

Zawiera cztery bardzo specyficzne style podkreślenia oparte na niektórych typowych przejściach CSS:

• Od prawej do lewej
• Od lewej do prawej
• Animacja na zewnątrz
• Animacja do wewnątrz

Zauważysz, że działa to na typowych przejściach CSS3, które działają zarówno podczas najeżdżania na link, jak i podczas przesuwania kursora poza link.

Zdecydowanie kilka fajnych efektów i wszystkie są dość łatwe do przeniesienia do własnych projektów.

6. Więcej stylów animacji

Oto kolejna paczka niestandardowych animacji z podkreśleniem, tych stworzonych przez programistę Kseso.

Są one nieco bardziej ekstremalne dzięki stylom podkreślenia, które przesuwają cienie CSS3 w celu uzyskania efektu świecenia. Prawdopodobnie możesz użyć tego jako szablonu do stworzenia wspaniałego projektu miecza świetlnego z Gwiezdnych Wojen, jeśli masz czas (lub po prostu kochasz Gwiezdne Wojny).

7. Po prostu wpadam

Widziałem ten efekt na kilku stronach internetowych i prawdopodobnie jest to jeden z moich ulubionych. Podkreślenie rozwijane używa czystego CSS i animuje linię w widoku z efektem przejścia.

Dzięki tej animacji nadal masz wrażenie, że każda podkreślona „ramka” łączy się z każdym linkiem. Podoba mi się to bardziej niż linie, które przesuwają się między linkami, ponieważ ten efekt jest szybszy i bardziej bezpośredni.

Jeśli chcesz naprawdę minimalistycznego podejścia do podkreślania efektów, zdecydowanie powinieneś spróbować pracy z tym kodem.

8. Rozszerzanie animacji

Rozwijający się styl podkreślenia można znaleźć w pakiecie podkreśleń, o którym wspomniałem wcześniej. Ale to konkretne podkreślenie jest nieco inne, ponieważ używa niestandardowego czasu animacji.

Zauważ, że używa funkcji cubic-bezier() do tworzenia unikalnej animacji po najechaniu myszą.

Działa to trochę szybciej niż domyślne przejście „liniowe”, więc daje zupełnie inny efekt. Możesz nawet spróbować samodzielnie dostosować animację Beziera, aby stworzyć własny, niepowtarzalny styl podkreślenia.

9. Niestandardowe podkreślenia CSS

Oto kolejny styl, który naprawdę może działać na każdej stronie internetowej. Deweloper Tristan Wilson stworzył te proste podkreślenia, które obramowują linię kilka pikseli niżej pod tekstem.

Jest po prostu wystarczająco subtelny, aby to zauważyć, ale z pewnością nie wpłynie to na dużą różnicę w użyteczności. W tym efekcie bardziej chodzi o estetykę niż o dodatkową użyteczność.

Jeśli chcesz, aby Twoje podkreślenia naprawdę wyróżniały się z całego stada, ten zestaw jest doskonałym miejscem na rozpoczęcie.

10. Dopasowanie między zstępnymi

Wspomniałem wcześniej o dostosowywaniu stylów podkreślenia, aby pasowały do ​​typu malejącego. Cóż, ten długopis Jonathana Neala właśnie to robi i nie używa niczego więcej niż HTML5 i CSS3.

Cały efekt opiera się na kilku właściwościach CSS3: box-shadow i text-shadow , aby być precyzyjnym.

Stwarza to iluzję, że z boku elementów opadających jest miejsce i nadaje podkreśleniu bardziej klasyczny wygląd.

Zdecydowanie czysty wybór dla każdej strony internetowej i jest to dobry sposób na zmianę koloru podkreślenia.

11. Gradienty niestandardowe

Jeśli naprawdę próbujesz przekraczać granice, spróbuj przerobić to pióro z jego niestandardowym stylem podkreślenia gradientu.

Gradient przechodzi przez CSS3, dzięki czemu możesz zmieniać kolory na dowolne. A jeśli możesz w to uwierzyć, ta rzecz nie wymaga do działania żadnego dodatkowego kodu HTML . Po prostu wyceluj w dowolne linki kotwiczne i skopiuj/wklej kody CSS, aby uzyskać własne podkreślenia gradientowe.

Ze wszystkich tych projektów mam nadzieję, że z tej kolekcji można wydobyć jeden fajny efekt.

Projektanci nie zawsze myślą o efektach podkreślenia, ale z typografią można wiele zrobić, a jeśli znasz się na CSS, to naprawdę, niebo jest limitem.