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.
Niezwykłe efekty tekstowe z użyciem 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.
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.
Tekst 3D z cieniem – 3D Text Lighting & Shadows
autor: GoaglegUI
Dzięki odpowiedniemu użyciu CSS uzyskaliśmy ciekawy efekt trój wymiarowego napisu.
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.
Magnetype
autor: Bennett Feely
Przerywany cień pod tekstem – CSS Dashed Shadow
autor: Lucas Bebber
Przecięty tekst – Slashed CSS Effect
autor: Robert Messerle
Poruszające się obramowanie tekstu – Text Effect
autor: Noor AL-Hassan
Efekt starego neonu – Flickery Argon Encouragement
autor: Jase
Przezroczysty tekst – SVG text mask
autor: Marco Barría
Tekst prześwitujący z tłem -webkit-background-clip:text CSS effect
autor: Jintos
Obracający się tekst 3D + 3D CSS Typography
autor: Noah Blon
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