Niezwykłe efekty tekstowe z użyciem CSS3

Kategoria wpisu Efekty i skrypty CSS, Frontend, Inspiracje, Kursy Tagi: , , , , on przez .



Pojawienie się CSS3 było przełomowe w wielu aspektach budowy stron internetowych. Nie tylko ze względu na częściowe a niekiedy nawet całkowite zastąpienie dotychczas stosowanych skryptów JavaScript.

Jedną z takich funkcji jest manipulacja tekstem (animacja). Poniżej przedstawię kilka linków do dość niezwykłych efektów jakie można wykonać na tekście z CSS3. Efekty te pochodzą z platformy CodePen w bardzo łatwy sposób będzie można więc podejrzeć w jaki sposób zostały one wykonane.

Uwaga: część z poniżej zaprezentowanych kodów nie koniecznie będzie działała w waszej przeglądarce. Wywołane jest to różnym sposobem interpretacji kodu oraz / lub tym że starsze przeglądarki nie obsługują nowszych reguł CSS3.

 

Drgający tekst – Squiggly Text

Autor: Lucas Bebber

Ciekawy efekt drgającego / falującego tekstu. Wygląda to jak by napis trząs się na wietrze.

See the Pen Squiggly Text by Lucas Bebber (@lbebber) on CodePen.

 

Elastyczne kreski – Elastic stroke

autor: yoksel

Tekst składa się z kilku kolorowych kresek. Nie jest cały czas widoczny – jedynie co pewien czas wyłania się obrys litery.

 

Otwierający się tekst – Opening type

autor: Diego Pardo

W tym wypadku każda litera przypomina wycinankę. Po najechaniu kursorem otwiera się ona podobnie jak książeczka dziecięca ukazując co ma pod spodem.

See the Pen Opening type by Diego Pardo (@diegopardo) on CodePen.

 

Tekst 3D z cieniem – 3D Text Lighting & Shadows

autor: GoaglegUI

Dzięki odpowiedniemu użyciu CSS uzyskaliśmy ciekawy efekt trój wymiarowego napisu.

See the Pen 3D Text Lighting & Shadows by GoaglegUI (@GoaglegUI) on CodePen.

 

Znikający tekst z gradientem – animated SVG gradient for a fading text effect

autor: vavik

Mrugający gradientowy tekst – to chyba najlepsze określenie dla tego przykładu.

See the Pen animated SVG gradient for a fading text effect by vavik (@vavik96) on CodePen.

 

Magnetype

autor: Bennett Feely

See the Pen Magnetype by Bennett Feely (@bennettfeely) on CodePen.

 

Przerywany cień pod tekstem – CSS Dashed Shadow

autor: Lucas Bebber

See the Pen CSS Dashed Shadow by Lucas Bebber (@lbebber) on CodePen.

 

Przecięty tekst – Slashed CSS Effect

autor: Robert Messerle

See the Pen Slashed CSS Effect by Robert Messerle (@robertmesserle) on CodePen.

 

Poruszające się obramowanie tekstu – Text Effect

autor: Noor AL-Hassan

See the Pen Text Effect by Noor AL-Hassan (@N00R_alhassan1) on CodePen.

 

Efekt starego neonu – Flickery Argon Encouragement

autor: Jase

See the Pen Flickery Argon Encouragement by Jase (@jasesmith) on CodePen.


 

Przezroczysty tekst – SVG text mask

autor: Marco Barría

See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.

 

Tekst prześwitujący z tłem -webkit-background-clip:text CSS effect

autor: Jintos

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.

 

Obracający się tekst 3D + 3D CSS Typography

autor: Noah Blon

See the Pen 3D CSS Typography ? by Noah Blon (@noahblon) on CodePen.

Dodatkowe tagi:
ciekawe, niezwykłe efekty na foncie, czcionce
upiększanie, urozmaicanie tekstu
ciekawe rozwiązania
fonts effects
text effect
animacja tekstu html
animacje z wykorzystaniem, użyciem tekstu
efekty tekstowe CSS3
trój wymiarowy napis

Przeczytaj również

Odstępy pomiędzy literami w słowie CSS letter-spac... Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy w...
Ciekawe efekty na tekście z użyciem cienia –... Jedną z ciekawszych właściwości CSS jest Text-Shadow - czyli cień umieszczony pod tekstem. Jeszcze do niedawna (kilka lat temu) tego typu efekt uzyski...
Podział tekstu na kolumny – Multiple Columns... Tym razem pokażę wam w jaki sposób dokonać podziału tekstu na kilka kolumn jak z dowolnej gazety. Ważną zaletą tej metody jest to, że podział dokona s...
Skrócenie zbyt długiego tekstu z użyciem CSS text-... Tym razem chcę pokazać jak skrócić tekst nie mieszczący się bloku np. tytuł wpisu na blogu do jednej linii co może być przydatne na responsywnej stron...