27 mahahalagang epekto sa teksto ng CSS para sa palalimbagan ng iyong website

Mga Creative sa Online

La mahalaga ang typography ng aming website naaangkop iyon sa nilalamang ina-project namin sa pamamagitan ng isang eCommerce, blog o landing page. Iyon ang dahilan kung bakit kinakailangang malaman kung paano maayos na pumili kung aling mapagkukunan ang maaaring magmula sa takot upang ang mambabasa o mamimili ay hinihimok na basahin ang bawat isa sa mga talata na kumpletuhin ang nilalaman ng pareho.

Ngunit bukod sa palalimbagan, matalino maaaring maglapat ng mga CSS text effects upang maibigay ang espesyal na ugnayan at "mahuli" ang customer na naghahanap ng isang produkto na mayroon kami sa aming katalogo sa eCommerce. Kaya't magbabahagi kami ng 25 mahahalagang epekto sa teksto ng CSS upang ang typeface na ito ay higit na nakatayo sa mga mata ng gumagamit na bumibisita sa aming site.

3D Text

3d na epekto

Isang epekto sa teksto ng CSS na nagpe-play sa iba't ibang mga elemento upang magdala ng 3D sa typeface may kakayahang makuha ang interes ng bisita sa aming website. Nakakaakit nang walang alinlangan. Huwag palalampasin sa mga kasalukuyang font para sa mga tagadisenyo.

Typography ng 3D CSS

3D CSS

Ang epektong ito Dadalhin kami ng 3D sa iba't ibang mga landas ang dating isa para sa isang typeface na kukuha ng gitnang yugto saan man namin ilagay ito.

Animasyon ng Masking Path

Masking path

Ito ang epekto ng teksto ay animated at bagaman tila napaka-simpleMayroon itong pagiging epektibo pati na rin ito ay napaka-kumplikado. Parang nagsusulat ng kamay. Tiyak na makakahanap ka ng perpektong lugar para sa iyong lokasyon, dahil ito ang pinakamahusay sa listahang ito.

Epekto ng mga titik

Efecto

Ito ay ginawa isang lumalawak na epekto at bounce sa teksto na gumagawa ng pakiramdam ng mahusay na kagandahan at propesyonalismo.

frozen

frozen

Meron isang epekto ng repleksyon sa teksto na maaaring maging perpekto para sa isang tukoy na typeface. Ang isang bagay na gagawin sa taglamig, mga bahay sa bansa o skiing ay magiging perpekto.

Hello

Hello

Ang epektong ito subukang gumuhit ng isang serye ng mga maliliit na hugis upang sa wakas ay mabuo nila ang teksto. Kamakailang ginawa na CSS code na nagpapakita ng pagiging kumplikado na naaabot ng disenyo ng web.

Animasyon ng linya ng teksto

angkan

Tulad ng nauna, a kapansin-pansin na epekto ng teksto ng CSS na may isang serye ng mga linya na gumuhit ng teksto kung saan inilapat ang code.

Mangu

Mangu

Isa pang epekto ng mataas na hit na animated na teksto na may kakayahang pangitin ang bawat isa sa mga letra upang makabuo ng isang animasyon ng malaking kalidad.

Text ng pag-highlight ng animasyon ng CSS

CSS

Isa pang animasyon para sa isang napaka-matikas na epekto ng teksto at may kakayahang makabuo ng pakiramdam ng propesyonalismo sa bisitang iyon na dumarating sa aming website.

SVG video mask upang mag-text

SVG

Isa pa sa mga pinakamahusay na epekto sa buong listahan at iyon ipinapakita ang maskara ng video na mayroon kami bilang background upang ang teksto ay ang bida. Mataas na kalidad sa lahat ng mga antas.

Animated na CSS input ng teksto

Pasukan

Kung nagawa mong ipakilala nang maayos ang epektong ito kapag nagpapasok ng teksto sa iyong website, exponentially ay magdagdag ng mga integer hanggang sa pagkamalikhain ay nababahala.

"Cool" na epekto ng teksto

COOL na epekto

Isa pang maskara sa isang epekto ng teksto na gumagamit ng isang imahe ng GIF upang makabuo ng isa pang mahusay na resulta tulad ng video mask. Mas mahusay mong makita ito mula sa halimbawa ng code sa Codepen.io.

Simpleng text glitch

Glitch

Epekto ng text na ito akma na akma para sa portfolio ng isang artist ng anumang facet o kahit na ng isang pangkat ng musika kung saan naghahanap kami ng dynamism. Ganap na kapansin-pansin.

Psycho Glitch

Sira ang ulo

Tulad ng naunang isa, isa pang epekto ng bombastic at ganap na random text para sa mga website na naghahangad na makilala mula sa iba pa. Maayos na isinama maaari itong ilagay ang tumpang sa cake.

Teksto ng VHS

Teksto ng VHS

Ang format na iyon ng video na kilalang kilala noong 80s at 90s na maaari nating kopyahin sa pamamagitan ng CSS na ito.

I-hover ang epekto sa teksto

umali-aligid

Iwanan na lang ang mouse pointer sa bawat titik upang hanapin ang hover effect na ginagawa ng HTML, CSS at JS code na ito. Napakainteres sa isang pangkalahatang antas.

Epekto sa teksto ng Hover Spring

Teksto sa tagsibol

Para sa isang bagay na pang-teknolohikal na ito i-hover ang epekto ng teksto na gumagana nang mahusay para sa lahat ng mga uri ng website na nauugnay sa mga bagong teknolohiya. Inilapat sa isang pindutan mayroon din itong mahusay na resulta.

Sass Loops simpleng CSS

SASS

Iba pang epekto sa teksto Mataas na kalidad at matikas na CSS na maaaring makabuo ng lahat ng uri ng sensasyon sa bisita. Lubos na inirerekomenda.

Saklaw ng maraming mga linya

Maikling panahon

Isang napaka-simpleng epekto ng teksto ng CSS, ngunit na may malaking potensyal para sa kapansin-pansin Ano yun

Animated na salungguhit

Nakasalungguhit

Kung nais mong i-highlight ang talata ng teksto kung saan ang bisita iposisyon ang mouse pointer, ang CSS effect na ito ay gumagawa ng salungguhit. Napakainteres dahil sa kung gaano ito malikhain at mausisa.

Epekto ng "Stranger Things"

Stranger Things

Tulad ng tanyag serye sa ochontera TV Mga Bagay na Stranger, ang hover effect na ito ay makakagawa ng palalimbagan ng serye na may mahusay na resulta.

Umiikot na teksto

Pagpapaikot

Ito ay talagang isang epekto ng talon na pumapalit sa keyword ng teksto na mayroon kami sa screen. Napaka gimik.

Epekto ng CSS Groovy

Groovy

Epekto ng cool na shading ng teksto para sa nilalaman ng web sa isang tukoy na paksa.

Gradient na epekto

Gradient shading

Isang kapansin-pansin na visual effects para sa pagtatabing ng isang typeface. Mahusay nang walang pag-aalinlangan saan man tayo magkaroon ng maraming kulay.

Shadow paralax

paralaks

A epekto ng parallax shadow habang inililipat natin ang pointer sa teksto.

Epekto ng pag-click

epekto ng pag-click

Isang simple at nakakaakit na epekto sa pagta-type para sa teksto na napakahusay na muling likha.

Pagta-type ng teksto

Nagta-type ako ng text

Iba epekto sa pagta-type na hindi mo maaaring makaligtaan sa CSS, HTML at JS.


Ang nilalaman ng artikulo ay sumusunod sa aming mga prinsipyo ng etika ng editoryal. Upang mag-ulat ng isang pag-click sa error dito.

Maging una sa komento

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan ng *

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.