La tipografia del nostre lloc web és essencial que sigui adequada a el contingut que estem projectant a través d'un eCommerce, blog o landing page. És per això que cal saber triar adequadament que font ens pot venir de por perquè el lector o el comprador s'animi a llegir cada un dels paràgrafs que completen el contingut de la mateixa.
Però a part de la tipografia, sàviament es pot aplicar efectes de text CSS per així donar-li aquest toc especial buscat i «atrapemos» a el client que busca un producte que tenim al catàleg del nostre eCommerce. Així que anem a compartir 25 efectes de text CSS essencials perquè aquesta tipografia fins i tot ressalt mes a la vista l'usuari que visiti el nostre lloc.
Text 3D
Un efecte de text CSS que juga amb diferents elements per portar el 3D a una tipografia que sigui capaç de captar l'interès de l'visitant del nostre lloc web. Cridanera sense cap dubte. no faltis a aquestes fonts actuals per a dissenyadors.
3D CSS tipografia
aquest efecte 3D ens porta per altres camins diferents a l'anterior per a una tipografia que prendrà tot el protagonisme allà on la tinguem col·locada.
Masking Path animation
Aquest efecte de text és animat i encara que sembli ben simple, Té la seva efectivitat a l'igual que és ben complex. Com si s'estigués escrivint a mà. Segur que podràs trobar el lloc perfecte per la seva ubicació, ja que és del millor de tota aquesta llista.
Efecte de lletres
es produeix un efecte d'eixamplament i de rebot en el text que produeix la sensació de gran elegància i professionalitat.
Congelat
Es produeix un efecte de reflex sobre el text que pot ser perfecte per a una tipografia en concret. Una cosa que tingui a veure amb l'hivern, cases rurals o esquí seria perfecte.
Hola
aquest efecte tracta de dibuixar una sèrie de formes de grandària diminuta perquè conformin finalment el text. Codi CSS de recent manufactura que mostra la complexitat a la que està arribant el disseny web.
Animació de línia de text
A l'igual que l'anterior, una efecte de text en CSS bé cridaner amb una sèrie de línies que van dibuixant el text a què s'ha aplicat el codi.
Mangu
Un altre efecte de text animat de gran resultat que és capaç de distorsionar cadascuna de les lletres per produir una animació de considerable qualitat.
CSS animació rellevant text
Una altra animació per un efecte de text de gran elegància i que és capaç de produir la sensació de professionalitat en aquell visitant que arribi al nostre lloc web.
Màscara de vídeo SVG en text
Un altre dels millors efectes de tota la llista i que mostra la màscara de el vídeo que tinguem de background perquè el text sigui el protagonista. De gran qualitat a tots els nivells.
Entrada de text animada CSS
Si ets capaç d'introduir adequadament aquest efecte en l'entrada de text a la teva web, exponencialment sumarà sencers pel que fa a la creativitat.
Efecte de text «cool»
Una altra màscara en un efecte de text que se serveix d'una imatge GIF per a produir un altre gran resultat com el de màscara de vídeo. Millor que ho vegis des de l'exemple de el codi en Codepen.io.
Simple text glitch
Aquest efecte de text val perfectament per al portfoli d'un artista de qualsevol faceta o justament la d'un grup de música al que busquem dinamisme. Totalment cridaner.
Psycho Glitch
A l'igual que l'anterior, un altre efecte de text grandiloqüent i totalment aleatori per a aquestes webs que busquen destacar de la resta. Apropiadament integrat pot posar la cirereta sobre el pastís.
text VHS
Aquest format de vídeo tan conegut en els 80 i 90 que podem reproduir a través d'aquest CSS.
Efecte hover en text
Només deixa el punter de l'ratolí sobre cadascuna de les lletres per trobar l'efecte hover que produeix aquest codi HTML, CSS i JS. Molt interessant a nivell general.
Efecte de text hover Spring
Per alguna cosa tecnològic aquest efecte de text hover que serveix molt bé per a tot tipus de lloc web relacionat amb les noves tecnologies. Aplicat sobre un botó també té un gran resultat.
Sass Loops simple CSS
Un altre efecte de text CSS de gran qualitat i elegància que pot produir tot tipus de sensacions al visitant. Molt recomanable.
Span múltiple lines
Un efecte de text CSS ben simple, però amb gran potencial pel cridaner que és.
subratllat animat
Si vols destacar el paràgraf de text en el qual el visitant posa el punter de l'ratolí, aquest efecte CSS produeix el subratllat. Molt interessant pel creatiu i curiós que és.
Efecte «Stranger Things»
Com la popular sèrie de TV ochontera Stranger Things, Aquest efecte hover serà capaç de realitzar la tipografia de la sèrie amb un gran resultat.
Text que trencada
Realment és un efecte cascada que substitueix la paraula clau de el text que tinguem en pantalla. Molt efectista.
Efecte CSS Groovy
efecte de ombrejat de text genial per a contingut web d'una temàtica en concret.
Efecte de gradient
Un efecte visual ben cridaner per al ombrejat d'una tipografia. Genial sense cap dubte allà on tinguem molt de color.
ombra parallax
S'aplica un efecte d'ombra parallax segons desplacem el punter sobre el text.
Efecte de tecleig
Un simple i cridaner efecte de tecleig per al text que està molt bé recreat.
teclejant text
Un altre efecte de tecleig que no et pots perdre en CSS, HTML i JS.