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.
Co znajdziesz w tym wpisie
- 1 Drgający tekst – Squiggly Text
- 2 Elastyczne kreski – Elastic stroke
- 3 Otwierający się tekst – Opening type
- 4 Tekst 3D z cieniem – 3D Text Lighting & Shadows
- 5 Znikający tekst z gradientem – animated SVG gradient for a fading text effect
- 6 Magnetype
- 7 Przerywany cień pod tekstem – CSS Dashed Shadow
- 8 Przecięty tekst – Slashed CSS Effect
- 9 Poruszające się obramowanie tekstu – Text Effect
- 10 Efekt starego neonu – Flickery Argon Encouragement
- 11 Przezroczysty tekst – SVG text mask
- 12 Tekst prześwitujący z tłem -webkit-background-clip:text CSS effect
- 13 Obracający się tekst 3D + 3D CSS Typography
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.