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ż

Nagłówki i podział tekstu w plikach stron WWW Podczas umieszczania tekstu na stronie internetowej bardzo istotne jest by tekst był odpowiednio sformatowany. Zadajcie sobie pytanie jakie teksty czy...
Przykładowe generatory gradientów CSS Samodzielne tworzenie gradientów w CSS jest dość trudnym i mozolnym zajęciem. W większości przypadków uzyskane w ten sposób efekty nie do końca spełni...
Akordeon – rozwijaki i zwijaki na stronie Z akordeonem możemy spotkać się na różnych stronach internetowych. Najczęściej w dziale FAQ - gdzie z jego pomocą możemy rozwinąć odpowiedz na nasze p...
Przerywane obramowanie – box-decoration-brea... Bardzo ciekawym selektorem CSS jest box-decoration-break, z jego pomocą możemy stworzyć tzw. przerywane obramowanie. Obramowanie to możemy umieścić np...