Główna » Kodowanie » 15 Piękne efekty tekstowe Utworzone za pomocą CSS

    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.