Вебсайтыңыздын типографиясы үчүн 27 маанилүү CSS тексттик эффекттер

Креативдер онлайн

La биздин веб-сайттын типографиясы маанилүү Бул электрондук соода, блог же ачылуучу барак аркылуу пландаштырып жаткан мазмунга ылайыктуу. Ошондуктан окурманга же сатып алуучуга анын мазмунун аяктаган абзацтардын ар бирин окуп чыгууга түрткү берүү үчүн, коркуу сезими менен бизге кайсыл булак келип калышы мүмкүн экендигин кантип туура тандоону билүү керек.

Бирок типографиядан тышкары, акылдуулук менен CSS текст эффекттерин колдоно алат Бул өзгөчө сезимди берүү жана электрондук соода каталогубузда бар өнүмдү издеп жаткан кардарды "кармоо" үчүн. Ошентип, биз 25 маанилүү CSS тексттик эффектерди бөлүшөбүз, ошондо бул шрифт биздин сайтка кирген колдонуучунун көз алдында дагы да көрүнүп турат.

3D Text

3d эффект

Чейин ар кандай элементтер менен ойногон CSS текст эффектиси арипке 3D алып келүү бул биздин вебсайтка келгендердин кызыгуусун туудурушу мүмкүн. Эч кандай шек жок. Өткөрүп жибербеңиз дизайнерлер үчүн ушул ариптерге.

3D CSS типографиясы

3D CSS

Бул таасир 3D бизди ар кандай жолдорго алып барат мурункусун, биз кайсы жерге койбосун борбордук орунду ээлей турган тамга үчүн.

Masking Path анимациясы

Маска жолу

Эсте тексттик эффект анимацияланган жана ал абдан жөнөкөй көрүнгөнү мененАл өзүнүн эффективдүүлүгүнө ээ, ошондой эле өтө татаал. Кол менен жазгандай. Албетте, сиз жайгашкан жериңиз үчүн мыкты жерди таба аласыз, анткени ал бул тизмеде эң мыкты.

Тамгалардын таасири

Effect

Ал өндүрүлөт кеңейтүүчү эффект жана текстте чоң жарашык жана кесипкөйлүк сезимин жараткан секирик

тоңуп калган

тоңуп калган

Бар текстке чагылдыруу таасири белгилүү бир тамга үчүн кемчиликсиз болушу мүмкүн. Кышка, айылдык үйлөргө же лыжа тебүүгө байланыштуу бир нерсе туура болмок.

Салам

Салам

Бул таасир бир катар кичинекей фигураларды тартууга аракет кылыңыз Ошентип, алар текстти түзүшөт. Жакында веб-дизайндагы татаалдыкты көрсөткөн CSS коду чыгарылды.

Тексттик анимация

Lineage

Мурунку сыяктуу эле, а CSS текстинин эффектиси код колдонулган текстти тарткан бир катар саптар менен.

уш

уш

Дагы бир таасири анимацияланган чоң натыйжа тексти ал каттардын ар бирин бурмалоого жөндөмдүү, анимацияны олуттуу сапатта жаратат.

CSS анимациясы текстти бөлүп көрсөтүү

CSS

Үчүн дагы бир анимация абдан жарашыктуу тексттик эффект жана ал биздин веб-сайтка кирген коноктордун кесипкөйлүк сезимин өрчүтө алат.

Текстке SVG видео маскасы

SVG

Бүткүл тизмедеги эң мыкты эффекттердин дагы бири биз фон болгон видеонун маскасын көрсөтөт ошондуктан текст каарман болот. Бардык деңгээлдеги жогорку сапат.

Анимацияланган CSS текст киргизүү

Entrada

Эгер сиз веб-сайтыңызга текст киргизүүдө ушул эффектти туура киргизе алган болсоңуз, экспоненциалдуу түрдө бүтүн сандарды кошот чыгармачылыкка келгенде.

"Салкын" тексттик эффект

COOL эффектиси

Тексттеги дагы бир маска GIF сүрөтүн колдонот видео маска сыяктуу дагы бир сонун натыйжага жетишүү. Аны Codepen.io кодундагы мисалдан көрө аласыз.

Жөнөкөй тексттик мүчүлүштүк

Glitch

Бул тексттин таасири портфолиого толугу менен туура келет Биз динамизмге умтулган музыкалык топтун каалаган жагындагы артисттин. Жалпысынан көз жоосун алат.

Psycho Glitch

психо

Мурунку сыяктуу эле, дагы бир таасири бомбастикалык жана таптакыр туш келди текст башкалардан өзгөчөлөнүп турууну көздөгөн веб-сайттар үчүн. Туура интеграцияланган болсо, ал тортко музду салат.

VHS тексти

VHS тексти

Ошол формат 80-90-жылдары белгилүү болгон видео биз ушул CSS аркылуу көбөйтө алабыз.

Текстке курсорду алып барыңыз

Hover

Жөн гана ар бир тамганын үстүндө чычкан көрсөткүчү ушул HTML, CSS жана JS коддору чыгарган учкуч эффектти табуу. Жалпы деңгээлде абдан кызыктуу.

Жазгы тексттин эффектин алып барыңыз

Жаз текст

Бул технологиялык нерсе үчүн тексттин эффектин алып барыңыз жаңы технологияларга байланыштуу веб-сайттын бардык түрлөрү үчүн абдан жакшы иштейт. Баскычка сүйкөлсөңүз, анын натыйжасы чоң.

Sass Loops жөнөкөй CSS

SASS

Башка тексттик эффект Жогорку сапаттагы жана жарашыктуу CSS конокто ар кандай сезимдерди жаратышы мүмкүн. Абдан сунушталат.

Бир нече сапты камтыйт

карыш

Өтө жөнөкөй CSS тексттик эффект, бирок таң калыштуу мүмкүнчүлүктөрү чоң Бул не.

Анимацияланган сызык

Асты сызылган

Эгер сиз каалаган тексттин абзацын бөлүп көрсөтүңүз, анда келген адам чычкан көрсөткүчүн жайгаштырсаңыз, бул CSS эффектиси астын сызат. Канчалык чыгармачыл жана кызыктуу болгондуктан, абдан кызыктуу.

"Чоочун нерселер" эффектиси

ким билет

Популярдуу сыяктуу ochontera Сериал Бейтааныш нерселер, бул hover эффекти сериянын типографиясын мыкты натыйжа менен жасай алат.

Айланган текст

айлануучу

Бул чындыгында шаркыратма таасири ал экранда бар тексттин ачкыч сөзүн алмаштырат. Абдан элес.

CSS Groovy эффектиси

Толкундатуучу

Effect of салкын тексттин көлөкөсү белгилүү бир темадагы веб-контент үчүн.

Градиент эффектиси

Градиент көлөкөсү

Үчүн абдан укмуштуудай визуалдык эффект басмаканага көлөкө түшүрүү. Бизде кандай гана түстөр болбосун, албетте, сонун.

Shadow parallax

параллакс

A параллакс көлөкө таасири көрсөткүчтү тексттин үстүнө жылдырганда.

Чык эффект

чыкылдатуу таасири

Жөнөкөй жана текст үчүн көз жоосун алган терүү таасири бул абдан жакшы кайра жаратылган.

Текст терүү

Мен текст терем

башка сиз тере албай турган терүү таасири CSS, HTML жана JSде.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий биринчи болуп

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.