116 Fajnych Przykładów Efektów Tekstowych CSS, Które Możesz Pobrać

Przyszedłeś tutaj po naprawdę fajne efekty tekstowe CSS, które pomogą ci zrobić niesamowitą typografię na twoich stronach internetowych.

Aby z powodzeniem nadać witrynie wygląd, który jest bardziej imponujący wizualnie, projektanci zawsze koncentrują się na kładzeniu większego nacisku na typografię, która jest zarówno stylowa jak i schludna w naturze.

Tacy sami projektanci byli zależni od programów takich jak Photoshop, aby to osiągnąć; jednakże, odkąd CSS3 został wdrożony i wspierany przez większość przeglądarek, rzeczy bardzo się zmieniły.

Powinieneś już widzieć zaawansowane efekty czcionek CSS na różnych nowoczesnych stronach internetowych.

Te rodzaje efektów stają się bardzo popularne bardzo szybko stając się wielkim trendem w projektowaniu stron internetowych.

Można je również osiągnąć za pomocą czystego CSS, co jest być może największą rzeczą w tego rodzaju efektach typografii internetowej.

CSS3 jest uważany za prawdziwą rewolucję jeśli chodzi o rozwój stron internetowych. Nowe właściwości zawarte w CSS3 pozwalają programistom na wizualne wzbogacenie swoich projektów w taki sposób, który jest nie tylko imponujący w sensie wizualnym, ale także szybki i łatwy.

Web typography is one major thing that has dramatically changed with CSS3. Możesz sprawić, że twój projekt będzie wyglądał atrakcyjnie dzięki kilku prostym sztuczkom CSS.

Jeśli chodzi o projektowanie stron internetowych, CSS pomoże ci uzyskać wiele różnych efektów czcionek, włączając w to użycie takich efektów jak animacja i przycinanie, aby trochę urozmaicić rzeczy.

Aby pomóc to zilustrować, zebraliśmy razem listę efektów, które są wizualnie oszałamiające i piękne, wszystkie z nich są możliwe dzięki CSS, a niektóre z nich również dzięki odrobinie Javascript.

Spis treści

• Animowane efekty tekstowe CSS
• Efekty tekstowe CSS Shadow
• Efekty tekstowe CSS 3D
• Tło tekstowe CSS
• Efekty tekstowe CSS hover
• Efekty tekstowe CSS glitch

.

• Cool CSS text effects

CSS animated text effects

Text animation

Drugi z tych efektów tekstowych CSS jest od Yoann Helin. Stworzył on w CSS ten efekt, który być może widziałeś na wielu stronach z portfolio i prezentacjami.

Linia tekstu.

Animowany tekst za pomocą HTML, CSS i JavaScript.

COSMOS

Choć ten efekt tekstowy CSS nie jest najbardziej użyteczny, wciąż robi wrażenie.

Tutaj jest to, czego użył autor:

• vw, vh, vmin units for responsiveness
• flexbox to center everything
• multiple box-shadows for the stars
• keyframes animation for the planet
• transform to rotate the planet

Animated „text-shadow” pattern

Uses -webkit-background-clip: text & linear-gradient do symulacji pasiastego cienia tekstu.

Reklama

Animowane podpisywanie podpisu (ścieżki SVG)

Użyj tego pióra do animacji pisania podpisu z SVG stroke-dashoffset/stroke-dasharray i przejściami CSS.

SVG Path animated Text

Animacja tekstu „Design” oparta na jednej ścieżce SVG. Click toggle animation.

Animowane wypełnienie tekstu svg text practice

Animowane wypełnienie tekstu za pomocą HTML(Pug), CSS(SCSS) i SVG.

Animowany tekst z Snapsvg

Praca z tym czuje się jak stary dobry Flash 🙂

Pionowo obracający się tekst css w/ prefiksy przeglądarki

Pionowo obracający się tekst z HTML i CSS.

Obracający się tekst

Obracający się tekst w HTML, CSS i JavaScript.

#Codevember 3D Quote Rotator

Użycie GreenSock i wtyczki SplitText do stworzenia efektu tekstu 3D.

Impossibly Tipsy

Interesujący efekt dla tekstu.

Efekt mglistego tekstu

Efekt kinowego intro (tylko Webkit – maska tekstu). Jest to efekt eksperymentalny, ale i tak musiałem go zamieścić wśród tych efektów CSS.

webdev series – Colorful text animation #updated

Płynny i konfigurowalny moduł animacji kolorowego tekstu wykonany za pomocą SCSS.

CSS Text filling with water

Kolejnym z tych efektów tekstowych CSS jest text filling with water animation, dla preloaderów i takich tam.

GSAP Text Animation

Efekt tekstowy wykorzystujący Greensock.

Wave text effect (with SVG/blend mode)

Wave text effect with HTML and CSS.

Animacja roztrzaskującego się tekstu

Animacja tekstu wGSAP. Rozbijanie ścieżki SVG. Slow motion on hover.

Squiggly Text

Squiggly text eksperyment z filtrami SVG.

Animowane nagłówki

Zbiór animowanych nagłówków, z wymiennymi słowami, które zastępują się nawzajem poprzez przejścia CSS.

Animacja tekstu: Montserrat

Animacja tekstu w HTML i CSS.

Shaded Text

Shaded text, eksperyment SVG + CSS3 o animowanych cieniach. Nie jest zoptymalizowany dla urządzeń mobilnych… jeszcze.

Animating SVG text

HTML, CSS i SVG animating text.

rysowanie koloru tekstu

rysowanie ścieżki tekstu przy użyciu wtyczki greensock’s drawSVG.

Pure CSS Text Animation

Animacja tekstu w HTML i CSS.

Animowane wypełnianie tekstu

Wypełnij swój tekst animowanymi obrazami tła – nie wymaga JavaScriptu.

Efekt bulgoczącego tekstu

Przykład zasilany jQuery, jak można utworzyć efekt bąbelków na nagłówku HTML. Pęcherzyki wyglądają, jakby pochodziły zza tekstu, a następnie zanikają i są usuwane.

Smoky Text

Połączenie text-shadow i transformacji CSS (zwłaszcza skew) dla uzyskania efektu dymu (lub smokey?).

jquery break/animate warping text paragraph example

HTML, CSS i JavaScript break/animate warping text paragraph example.

Animated wave clipped by text

Animated wave inside text with svg. Obraz w tle i gradient wypełniający falę.

(cool) text effect

Animowany tekst z obrazem GIF.

Untitled

Animowany tekst z HTML, CSS i JS.

Ujawnienie podzielonego tekstu

Ujawnienie podzielonego tekstu w HTML, CSS i JavaScript.

Onion Skininning Text Morphing

Onion skinning text morphing in HTML/CSS/JS.

Text-Shadow Animate

Text-Shadow animate with HTML and CSS.

SVG video mask on text

SVG video mask on text.

GSAP text reveal animation

GSAP text reveal animation.

Animacja tekstu SVG

Ładna animacja tekstu SVG.

CSS Only Random Text Transform (Animated)

Generate random text transformation using CSS only.

Silent Movie Text Effect

Efekt tekstu filmowego z canvas.

CSS TEXT REVEALING ANIMATION

Czysta animacja CSS ujawniająca tekst.

Letter Animation

Animacja liter za pomocą CSS.

Animacja linii tekstu

Ładna animacja linii tekstu z TweenMax.js.

Helo!

Kliknij, aby przerysować! Mapowanie sprite’ów na tekst jest zawsze zabawne.

CSS only Frozen text

CSS only frozen text effect with background-clip, blend modes and gradient text.

letters effect

Efekt liter przy przewijaniu.

Masking Path Animation

Czasami proste jest tak samo skuteczne jak złożone.

Animacja pisma ręcznego (SVG + CSS)

Animacja pisma ręcznego SVG i CSS. W celu zoptymalizowania SVG do animacji, grafika została pocięta na mniejsze kawałki. Zostało to zrobione głównie po to, aby zapobiec nakładaniu się elementów ścieżek z niepowiązanymi elementami clipPath, ale również umożliwiło dokładniejszą kontrolę nad animacją. Wszystkie animowane elementy ścieżek zostały wyeksportowane z Adobe Illustrator i dostrojone za pomocą kodu.

Animowany gradient tekstu

Niezły animowany tekst z gradientem.

CSS Shadow text effects

CSS Dashed Shadow

Pure css hipster-ish typographic dashed shadow.

Hit The Floor Text Effect

CSS3 text-shadow effects

HTML i CSS3 text-shadow effects.

Long Shadow Gradient Mixin

Mieszanka Sass (Scss) do szybkiego generowania gradientów z długim cieniem. Odpowiedni zarówno dla 'text-shadow’ jak i 'box-shadow’.

CSS Text Shadow

Przykłady z samouczka Lynda.com. CSS: Advanced Typographic Techniques using lettering.js

Text-Shadow

HTML i CSS text-shadow.

Awesome Text-Shadow

Awesome text-shadow with CSS3.

Shadow Parallax – Reactjs

Move your Mouse and Play words. Written by React, ES6, Babel transpiler.

Neon text-shadow effect

9 neon CSStext-shadow effects.

Styling Text with SVG (Second Shadow)

Styling text with SVG.

Pretty shadow

Pretty shadow with HTML and CSS.

Cień tekstowy

Czysty CSS cień tekstowy.

Fantazyjny cień tekstowy

Fantazyjny cień tekstowy.

Groovy CSS Effect

Efekt czcionki z lat 60-tych używający właściwości CSS text-shadow wraz z funkcją SASS i mixinami aby utrzymać kod w czystości.

3D CSS text effects

3d Text effect – mousemove

Nice 3D Text effect with jQuery mousemove.

Efekt tekstu 3D extrude – tylko CSS

Efekt tekstu 3D extrude w HTML i CSS.

CSS Text Stroke | CSS Text Border – Nieskończony efekt tylko z #CSS #html5

Zmień tekst, aby zobaczyć animację ponownie.

3D CSS Typografia

Pojedynczy element, wielokolorowy efekt tekstu 3d

Pojedynczy element z wielokolorowym tekstem i efektami cienia tekstu 3D. Tylko zabawa z różnymi właściwościami CSS do tworzenia zabawnych efektów tekstowych.

Tylko SS: Text Wave

Tylko CSS text wave.

Skewed and Rotated Text

Text with CSS skew() and rotate().

3d text marquee effects

3D text marquee effects.

CSS text background

-webkit-background-clip:text CSS effect

Użyj -webkit-background-clip: text i -webkit-fill-text-color : transparent aby zastosować tło do tekstu w przeglądarce webkit.

Ustaw fallback koloru dla innych przeglądarek.

Przycinanie tła

Przycinanie tła tekstu.

SVG Knockout Text with Video Background

To demo bada tworzenie knockout text/paths w SVG i zapętlanie wideo z YouTube jako wypełnienie.

Maska tekstowa SVG

Gooey text background with SVG filters

Przykład użycia gooey SVG filter do stworzenia gładkich krawędzi wokół tekstu inline z tłem.

Przesuwanie tekstu w chmurze | HTML + CSS

Przesuwanie tekstu w chmurze za pomocą HTML i CSS.

CSS Próby tekstu z inline przekrzywionym tłem

Użycie skew jest renderowane tylko wtedy, gdy element jest display: block lub inline-block. Niektóre z nich wyglądają tak samo na szerokiej rzutni, ale zawodzą inaczej, gdy szerokość rzutni jest zmniejszana.

Efekty tekstowe CSS hover

Typ otwarcia

Efek Typography Text Neon part 1

Text design (typografia) with neon effect.

Text-mask background moving on MouseMove – v2

Próbka nowej funkcji „background-clip: text”, z poruszającym się tłem.

Peeled Text Transforms

Ten pióro pokazuje tekst, który wygląda jakby był obrany ze strony. Po najechaniu ma płynną animację.

Happy Text

HTML i CSS efekt szczęśliwego tekstu.

Animated highlighted text

Pomysł jest prosty, wykorzystuje liniowy gradient i przejście.

3d hover text effect

HTML, CSS and JavaScript 3d hover text effect.

CSS Perspective Text Hover

Eksperyment z użyciem webfontów w połączeniu z narzędziami transformacji CSS 3D.

Focus Text Hover Effect | HTML+ CSS + jQuery

Efekt CSS Hover dla tekstu.

Animowane podkreślenia

Demo animowanego efektu podkreślenia. Czysta animacja CSS.

Jak uzyskać niestandardowe kolorowe podkreślenie, które będzie obejmować wiele linii?

Piękny efekt najechania na linię.

Simple CSS Hover Effect using Sass Loops

Simple little hover animation. Pętle Sass sprawiają, że oszałamiające opóźnienia animacji są naprawdę łatwe do zrobienia… można z nich zrobić wiele kilometrów.

Spring Text Hover Effect

Bawiłem się efektami dla przycisków i pomyślałem, że to jest całkiem fajne.

Blended text layers

Content wygenerowany za pomocą JS.

CSS glitch text

Colorful Glitchy 404

CSS glitched text by skew

HTML i CSS glitched text by skew.

CSS-Only Glitch Effect

Efekt typu glitch z animacją CSS.

Glitch

Glitch text with HTML and CSS.

Glitchy Text

Glitchy text with HTML and CSS(SCSS).

Glitch Text

Glitchy text z HTML(Pug) i CSS(SCSS).

Glitched Text (studium The Verge)

HTML, CSS i JavaScript glitched text.

SVG Glitch

VHS text

VHS text with HTML, CSS and JavaScript.

Psycho Glitch (CSS variables & @keyframes)

Efekt „glitch”, odtworzony z animowanymi właściwościami CSS. Pure CSS.

Simple text glitch

Pure CSS simple text glitch.

Cool CSS text effects

Slashed CSS Effect

Elastic stroke CSS + SVG

Pierwszy z tych fajnych efektów tekstowych CSS pochodzi od Yoksel. Wybrała ona niesamowity schemat kolorów dla tej pięknej animacji tekstu CSS.

SVG Text: Animated Typing

HTML, CSS i SVG animated typing.

Text typing thingamy

HTML, CSS i JavaScript text typing thingamy.

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Futurystyczny efekt rozwiązywania/ wpisywania tekstu zwykle spotykany w grach lub filmach w scenach cięcia, aby ujawnić tekst na ekranie.

Transmisja: Glowing Text Animation

Mała animacja świecącego tekstu. Najpierw trochę JS, aby zawinąć każdą literę w span. Następnie animacja klatki kluczowej, z animation-delay mixin, podświetla każdą literę po kolei.

Text Scramble Effect

Mały efekt dekodowania/scramble tekstu.

Kinetic Type with Greensock

Kinetic Type with HTML, CSS and JavaScript (Greensock).

LOVE Text Effect

Efekt zakodowanego tekstu zainspirowany nagradzanym filmem Science Fiction „LOVE”.

Auto Typing Text (function)

Auto typing text with HTML, CSS and JavaScript.

Typing Text

Tekst wpisywany za pomocą HTML, CSS i JavaScript.

Typing Effect

Efekt wpisywania tekstu wykonany za pomocą prostej funkcji JQuery. Po prostu wywołaj funkcję podając element, który chcesz animować jako pierwszy argument oraz prędkość animacji jako drugi argument.

Jeśli podobał Ci się ten artykuł z efektami tekstowymi CSS, powinieneś również sprawdzić te artykuły:

• Biblioteki animacji CSS i Javascript do tworzenia niesamowitych efektów
• Przykłady pokazów slajdów CSS, które możesz wykorzystać na swoich stronach
• Some Of The Most Popular CSS Libraries That Are On Github

.