Niezwykłe efekty tekstowe z użyciem CSS3

Kategoria wpisu Frontend, Inspiracje, Kurs CSS, 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ż

Znaki specjalne HTML Czy zastanawiałeś się kiedyś jak wstawić na stronę znak copyright (©) albo ułamek ¾? Dla wielu osób stanowi to całkiem spory problem, znaki te nie wys...
Cień pod obrazkiem, tekstem z użyciem CSS Czasami w celu uzyskania ciekawego efektu na stronie chcemy dodać naszym zdjęciom cień. Ten mały drobiazg może bardzo poprawić wygląd naszej witryny i...
Zmiana wyglądu pierwszej litery Z pewnością ładnie jest rozpocząć tekst jak w starych księgach z wyróżnioną pierwszą literą. Z pozoru może się to wydawać trudne jednak w cale takie n...
Menu zakończone grotem / strzałką CSS Jak pisałam w poprzednim poście CSS3 daje bardzo duże możliwości twórcą stron. Wspomniałam również o możliwości zastąpienia grafiki odpowiednią formuł...