15 Piękne efekty tekstowe Utworzone za pomocą CSS
Piękny tekst lub typografia sprawi, że Twój projekt będzie wyglądał atrakcyjnie. W projektowaniu stron internetowych CSS pomaga nadać styl projektowi, w tym różne efekty w tekście lub typografii. Dzięki CSS możesz użyć wycinania i dodać animację do tekstu, aby trochę urozmaicić.
Aby to zilustrować, zebraliśmy 15 oszałamiających i fajnych efektów tekstowych, które są możliwe dzięki CSS (niektóre z niewielką pomocą kodów Javascript).
Aby uzyskać więcej informacji o CSS, sprawdź:
- 18 fajnych rzeczy, w które nie uwierzysz, zostało zbudowanych przy użyciu CSS
- 30 bibliotek efektów tekstowych jQuery, które musisz znać
- Jak tworzyć kształt serca za pomocą CSS
- Animate.css - biblioteka CSS3 do łatwego tworzenia animacji
Animacja skoku elastycznego
Yoksel animuje obrys tekstu za pomocą fajnego schematu kolorów. Ten efekt jest wykonywany za pomocą CSS i SVG. Wynik jest niesamowity!
SVG Glitch
Chcesz uzyskać efekty przypominające zepsuty telewizor analogowy? Dirk Weber wykonał ten oszałamiający efekt usterki przy użyciu filtra CSS i SVG.
Logo Shop Talk
Logo Shop Talk jest odtwarzane przez Hugo przy użyciu tylko CSS. Logo wygląda podobnie do oryginału, wraz z odpowiednią teksturą.
Rozcięty efekt
Pomysł Robet Messerle daje efekt noża w plasterkach, wykonany przy użyciu mniej niż 70 linii CSS.
Elegancki efekt cienia
Efekt długiego cienia pojawia się w tekście, wykonanym przy użyciu CSS. Twórca, Juan Brujo, wykonał 4 inne efekty, ale ten jest najbardziej imponujący.
Efekt mglistego tekstu
Andreas tworzy niesamowity efekt mglistego kina. Dotyczy tylko przeglądarek Webkit.
Maska tekstowa SVG
Projekt Marco Barrii pokazuje elegancki efekt maskowania tekstu na dużym obrazie tła.
Animacja tekstu
Yoann stworzył niesamowity efekt ticker dzięki tej animacji tekstu. Obserwuj, jak drugie słowo zmienia się między trzema słowami.
Uderzył o podłogę
Ten efekt 3D ThatGuySam to prosta gra na cieniach tekstu, ale z niesamowitym wynikiem.
Tekst klipu w tle
Jintos bawił się klipem w tle Webkita, aby dodać obraz tła do tekstu. Zrobił 16 fajnych kreacji używając tej metody.
CSS Text-FX
Moklik dodał przyciemniony efekt świetlny do tekstu, dając ci przerywane błyski ostrzegające przed niebezpieczeństwem z daleka.
Animowane podpisywanie podpisu
Gary Hepting stworzył animację podpisywania w czasie rzeczywistym. Działa to poprzez zastosowanie Javascript do ścieżki SVG, aby animować podpisywanie.
Kolorowe Glitchy 404
Czy słyszysz dźwięk tej usterki i czujesz wibrację w swojej głowie? Tak dobry jest ten efekt usterki. mistic100 wykonany z CSS plus trochę Javascript.
Kosmos
Teraz jest to eleganckie i inspirujące logo. Nadaje się również do użytku “Kosmos”, ponieważ orbituje, weź to?
Ładuję
Fajny efekt ładowania, czyli po prostu ukrywanie i wyświetlanie liter.
