Veb-saytingizning tipografiyasi uchun 27 ta muhim CSS matn effekti

Onlayn ijod

La veb-saytimiz tipografiyasi juda zarur bu biz elektron tijorat, blog yoki ochilish sahifasi orqali rejalashtirayotgan tarkibga mos keladi. Shuning uchun o'quvchi yoki xaridor bir xil tarkibni to'ldirgan har bir xatboshini o'qishga da'vat etilishi uchun qo'rquvdan qaysi manbaning bizga kelishi mumkinligini qanday qilib to'g'ri tanlashni bilish kerak.

Ammo tipografiyadan tashqari, oqilona CSS matn effektlarini qo'llashi mumkin elektron tijorat katalogimizda mavjud bo'lgan mahsulotni izlayotgan xaridorga ushbu o'ziga xos teginish va "tutish" uchun. Shunday qilib, biz ushbu shriftni saytimizga tashrif buyurgan foydalanuvchi oldida yanada yorqinroq qilish uchun 25 ta muhim CSS matn effektlarini baham ko'ramiz.

3D matn

3D effekt

Ga turli xil elementlar bilan o'ynaydigan CSS matn effekti 3D-ni shriftga keltiring bu bizning veb-saytimizga tashrif buyuruvchilarning qiziqishini jalb qilishga qodir. Shubhasiz zarba berish. O'tkazib yuborma dizaynerlar uchun ushbu shriftlarga.

3D CSS tipografiyasi

3D CSS

Bu ta'sir 3D bizni turli yo'llarga olib boradi oldingisiga, biz qaerda joylashtirmasak ham markaziy o'rinni egallaydigan shrift uchun.

Masking Path animatsiyasi

Maskalash yo'li

este matn effekti jonlantirilgan va garchi bu juda sodda bo'lsa hamBu juda murakkab bo'lgani kabi, uning samaradorligiga ham ega. Go'yo qo'l bilan yozish kabi. Siz o'zingizning joylashuvingiz uchun eng zo'r joyni topa olasiz, chunki bu ushbu ro'yxatdagi eng yaxshilaridan biri.

Maktublar ta'siri

Effekt

U ishlab chiqarilgan kengayish effekti va ajoyib nafislik va professionallik hissini tug'diradigan matnda sakrash

muzlagan

muzlagan

Bor matnga aks ettirish ta'siri bu ma'lum bir shrift uchun mukammal bo'lishi mumkin. Qish, qishloq uylari yoki tosh bilan bog'liq bo'lgan narsa juda yaxshi bo'lar edi.

Salom

Salom

Bu ta'sir kichik o'lchamdagi bir qator shakllarni chizishga harakat qiling ular nihoyat matnni shakllantirishlari uchun. Yaqinda ishlab chiqarilgan CSS kodi, bu veb-dizaynning murakkabligini ko'rsatadi.

Matn qatori animatsiyasi

Lineage

Oldingi singari, a ajoyib CSS matn effekti kod qo'llanilgan matnni chizadigan qatorlar qatori bilan.

Mangu

Mangu

Ning yana bir ta'siri animatsion yuqori natijali matn juda sifatli animatsiya yaratish uchun har bir harfni buzib ko'rsatishga qodir.

Matnni ajratib ko'rsatuvchi CSS animatsiyasi

CSS

Uchun yana bir animatsiya juda oqlangan matn effekti va bu bizning veb-saytimizga tashrif buyurgan mehmonda professionallik hissi paydo bo'lishiga qodir.

Matnga SVG video maskasi

SVG

Butun ro'yxatdagi eng yaxshi effektlardan biri va bu bizda mavjud bo'lgan videoning niqobini ko'rsatadi shuning uchun matn qahramon bo'ladi. Barcha darajalarda yuqori sifat.

Animatsiyalangan CSS matn kiritish

Entrada

Agar veb-saytingizga matn kiritishda ushbu effektni to'g'ri joriy qila olsangiz, eksponent ravishda butun sonlarni qo'shadi ijod haqida gap ketganda.

"Sovuq" matn effekti

COOL effekti

Matn effektidagi yana bir niqob GIF tasviridan foydalanadi video niqob kabi yana bir ajoyib natijani yaratish. Buni Codepen.io-dagi kod misolidan yaxshiroq ko'rishingiz mumkin.

Oddiy matn nosozligi

Favqulodda askar

Ushbu matn effekti portfelga juda mos keladi har qanday yo'nalishdagi rassomning yoki hattoki biz dinamizm izlayotgan musiqiy guruhning. Umuman ko'zga tashlanadigan narsa.

Psixo glitch

Psixologik

Oldingi singari, ning yana bir ta'siri bomba va umuman tasodifiy matn boshqalardan ajralib turishga intiladigan veb-saytlar uchun. To'g'ri birlashtirilsa, u tortni muzga solishi mumkin.

VHS matni

VHS matni

Ushbu format 80-90-yillarda juda yaxshi tanilgan video biz ushbu CSS orqali ko'paytira olamiz.

Matnga effektni olib keling

hover

Faqat qoldiring har bir harf ustiga sichqoncha ko'rsatkichi ushbu HTML, CSS va JS kodlari yaratadigan effektni topish. Umumiy darajada juda qiziq.

"Spring Spring" effekti ustiga bosing

Bahor matni

Buning uchun texnologik narsa matn effekti ustiga bosing bu yangi texnologiyalar bilan bog'liq barcha turdagi veb-saytlar uchun juda yaxshi ishlaydi. Tugmachada qo'llanilsa, u ham ajoyib natijaga ega.

Sass Loops oddiy CSS

SASS

Boshqa matn effekti Yuqori sifatli va oqlangan CSS mehmonda har qanday hissiyotlarni keltirib chiqarishi mumkin. Juda tavsiya etiladi.

Bir nechta qatorlarni qamrab oling

span

Juda oddiy CSS matn effekti, ammo ajoyib imkoniyatlarga ega Nima u.

Animatsiya ostidagi chiziqcha

Chizilgan

Agar xohlasangiz tashrif buyuradigan matnning xatboshisini ajratib ko'rsatish sichqoncha ko'rsatgichini joylashtiring, ushbu CSS effekti pastki chiziqni hosil qiladi. Bu qanchalik ijodiy va qiziquvchan bo'lgani uchun juda qiziq.

"Begona narsalar" effekti

Stranger narsalar

Ommabop kabi ochontera "Begona narsalar" seriali, bu hover effekti seriyalar tipografiyasini ajoyib natija bilan amalga oshirishi mumkin.

Matnni aylantirish

Qaytgan

Bu haqiqatan ham palapartishlik ta'siri bu biz ekrandagi matnning kalit so'zini almashtiradi. Juda hiyla-nayrang.

CSS Groovy effekti

Groovy

Ta'siri salqin matn soyasi ma'lum bir mavzu bo'yicha veb-tarkib uchun.

Gradient effekti

Gradient soyasi

Uchun juda ajoyib vizual effekt shriftni soya qilish. Bizda rang juda ko'p bo'lgan joyda shubhasiz ajoyib.

Soya parallaks

parallaks

A paralaks soya effekti ko'rsatgichni matn ustiga siljitganda.

Klik effekti

klik effekti

Oddiy va matn uchun ko'zni qamashtiradigan terish effekti bu juda yaxshi qayta yaratilgan.

Matn terish

Men matn teraman

Boshqa yozish effektini o'tkazib yubormaysiz CSS, HTML va JS da.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

Birinchi bo'lib izohlang

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi.

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

bool (to'g'ri)