27 pagrindiniai CSS teksto efektai jūsų svetainės tipografijai

Skelbimai internete

La mūsų svetainės spausdinimas yra būtinas tai atitinka turinį, kurį projektuojame per el. prekybą, tinklaraštį ar nukreipimo puslapį. Štai kodėl būtina žinoti, kaip tinkamai pasirinkti, kuris šaltinis gali ateiti pas mus iš baimės, kad skaitytojas ar pirkėjas būtų skatinami perskaityti visas pastraipas, kurios papildo to paties turinį.

Bet be tipografijos, išmintingai gali pritaikyti CSS teksto efektus norėdami suteikti tą ypatingą potraukį ir „pagauti“ klientą, kuris ieško mūsų elektroninės prekybos kataloge esančio produkto. Taigi mes pasidalinsime 25 būtinais CSS teksto efektais, kad šis šriftas netgi labiau išsiskirtų mūsų svetainėje apsilankiusio vartotojo akyse.

3D tekstas

3d efektas

CSS teksto efektas, kuris žaidžia su skirtingais elementais atneškite 3D į šriftus kad gali pritraukti lankytojo susidomėjimą mūsų svetaine. Įspūdingas be jokių abejonių. Nepraleisk dizaineriams skirtuose šriftuose.

3D CSS tipografija

3D CSS

Šis efektas 3D veda mus skirtingais keliais ankstesnis - šriftui, kuris užims pagrindinį vaidmenį visur, kur jį įdėsime.

„Maskuojančio kelio“ animacija

Maskavimo kelias

tai teksto efektas yra animacinis ir nors atrodo labai paprastasJis turi savo efektyvumą ir yra labai sudėtingas. Tarsi rašytų ranka. Jūs tikrai galėsite rasti geriausią vietą savo vietovei, nes ji yra viena geriausių šiame sąraše.

Raidžių efektas

Efecto

Jis gaminamas plečiantis poveikis ir atšokti tekste, kuris sukelia didžiulės elegancijos ir profesionalumo jausmą.

užšalęs

užšalęs

Čia yra refleksijos poveikis tekstui kuris gali būti tobulas konkrečiam šriftui. Puikiai tiktų kažkas, kas susiję su žiema, kaimo namais ar slidinėjimu.

Sveiki

Sveiki

Šis efektas pabandykite nupiešti mažų figūrų seriją kad jie pagaliau suformuotų tekstą. Neseniai pagamintas CSS kodas, rodantis, kokį sudėtingumą pasiekia interneto dizainas.

Teksto eilutės animacija

kilmė

Kaip ir ankstesnis, a ryškus CSS teksto efektas eilutėmis, kurios nubrėžia tekstą, kuriam pritaikytas kodas.

Mangu

Mangu

Kitas poveikis aukšto lygio animacinis tekstas kuris sugeba iškraipyti kiekvieną raidę, kad būtų sukurta nemažos kokybės animacija.

CSS animacijos tekstas

CSS

Kita animacija labai elegantiškas teksto efektas ir kad tai gali sukelti profesionalumo jausmą to lankytojo, kuris ateina į mūsų svetainę.

SVG vaizdo kaukė į tekstą

SVG

Kitas geriausias poveikis visam sąrašui ir tas rodo vaizdo įrašo kaukę, kurią turime kaip foną kad tekstas būtų pagrindinis veikėjas. Aukšta kokybė visais lygiais.

Animuotas CSS teksto įvestis

Įėjimas

Jei įvesdami tekstą į savo svetainę sugebėsite tinkamai įdiegti šį efektą, eksponentiškai pridės sveikus skaičius kiek tai susiję su kūryba.

„Kietas“ teksto efektas

COOL efektas

Dar viena teksto efekto kaukė naudoja GIF vaizdą sukurti dar vieną puikų rezultatą, pavyzdžiui, vaizdo kaukę. Geriau tai pamatysite iš kodo pavyzdžio, esančio Codepen.io.

Paprasta teksto triktis

Gedimo

Šis teksto efektas puikiai tinka portfeliui bet kokio ar net muzikos grupės, kurioje siekiame dinamikos, atlikėjo. Visiškai traukia akį.

Psicho sutrikimas

Psycho

Kaip ir ankstesnis, kitas - bomba ir visiškai atsitiktinis tekstas toms svetainėms, kurios siekia išsiskirti iš kitų. Tinkamai integruotas gali padėti tortą.

VHS tekstas

VHS tekstas

Tas formatas 80–90-aisiais taip gerai žinomas vaizdo įrašas kad mes galime atkurti per šią CSS.

Užveskite pelės žymeklį ant teksto

Užveskite pelę

Tiesiog palikite pelės žymeklis virš kiekvienos raidės rasti pelės žymeklio efektą, kurį sukuria šis HTML, CSS ir JS kodas. Labai įdomu bendru lygiu.

Užveskite „Hover Spring“ teksto efektą

Pavasario tekstas

Dėl kažko technologinio tai užveskite teksto efektą kuris labai tinka visų tipų svetainėms, susijusioms su naujomis technologijomis. Pritaikius mygtuką, jis taip pat turi puikų rezultatą.

„Sass Loops“ paprasta CSS

SASS

Kitas teksto efektas Aukštos kokybės ir elegantiška CSS kuris gali sukelti įvairius pojūčius lankytojui. Labai rekomenduojama.

Apėmė kelias eilutes

trukmė

Labai paprastas CSS teksto efektas, bet turintis didelį streikavimo potencialą Kas tai.

Animuotas pabraukimas

Pabraukta

Jei norite paryškinti teksto pastraipą, kurioje lankytojas padėtį pelės žymeklį, šis CSS efektas sukuria pabraukimą. Labai įdomu, nes tai kūrybinga ir smalsu.

„Keistų daiktų“ efektas

Stranger dalykai

Kaip ir populiarusis „ochontera“ serialas „Svetimi daiktai“, šis pelės žymeklis padės sukurti serijos tipografiją su puikiu rezultatu.

Besisukantis tekstas

Sukasi

Tai tikrai yra krioklio efektas kuris pakeičia ekrane esančio teksto raktinį žodį. Labai gudrus.

CSS Groovy efektas

Grovas

Efekto de kietas teksto šešėlis žiniatinklio turiniui konkrečia tema.

Gradiento efektas

Gradiento šešėlis

Labai ryškus vaizdo efektas šešėlinis šriftas. Puiku be jokios abejonės visur, kur turime daug spalvų.

Šešėlių paralaksas

Paralaksas

A paralaksinio šešėlio efektas judindami žymeklį virš teksto.

Spustelėkite efektą

paspaudimo efektas

Paprasta ir akį traukiantis teksto rinkimo efektas kuris labai gerai atkurtas.

Teksto rašymas

Rašau tekstą

Kitas spausdinimo efektas, kurio negalite praleisti CSS, HTML ir JS.


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

Būkite pirmas, kuris pakomentuos

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.