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ż

Właściwość CSS empty-cells Właściwość CSS empty-cells w dużym skrócie służy do ukrywanie niewypełnionych pól. Innymi słowy empty-cells informuje przeglądarkę o tym, że jeśli dan...
Figury geometryczne z użyciem CSS Pojawienie się CSS3 dało bardzo duże możliwości twórcą stron internetowych (ale nie tylko) a w połączenia z HTML5 zmieniło kodowanie stron w prawdziwe...
Sześciokąty rozmieszczone obok siebie CSS Jakiś czas temu odwiedziłam stronę, której autor umieściła swoje portfolio w postaci sześciokątów (hexagonu) czyli kilku sześciokątów. Zrobiło to na m...
Zanikające, przenikające obrazy – animacje z... Tym razem pokażę jak w prosty sposób wykonać ciekawą animacje na zdjęciach z użyciem CSS i JavaScript (jQuery) lub z samym CSS. Zamiana obrazków po...