18 Efect de text CSS3 și tutoriale de tipografie web

CSS3 s-a distrat deja de minune în dezvoltarea web până acum. Este adoptat pe scară largă. Motivul din spatele adoptării sale este capacitățile de dezvoltare pe care le aduce la masă. CSS3 este acum practic capabil să deseneze orice pe tablă; singura cerință este să fii un designer calificat pentru a-și folosi funcționalitatea la maximum.

Astăzi, am șansa de a parcurge câteva tutoriale cu efect de text CSS3 și tipografie web.

Cauți aceleași lucruri? Apoi, ați ajuns la locul potrivit, deoarece vom parcurge unele dintre cele mai bune tutoriale CSS3 Text Effect de pe web.

Să începem.

Crearea textului 3D

Îmi place textul 3D. Oferă o mare profunzime pentru cititori și oferă un sentiment de realizare pentru creatori. Cu CSS3, realizarea de text 3D este o simplă simplă.

Folosind codul de pe site, puteți crea text 3D. Puteți personaliza parametrii și puteți experimenta pentru a înțelege cum funcționează și chiar să-l modificați pentru a corespunde cerințelor dvs.

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Efect de tipografie cu text CSS-umbră

Tipografia este un efect de text popular care este utilizat în metoda de imprimare industrială. Nu este nevoie să utilizați Photoshop sau oricare dintre diferitele sale instrumente pentru a crea efectul.

Creați o tipografie CSS3 frumoasă

Tipografia este unul dintre factorii cheie pentru experiența utilizatorului. Cu acest tutorial, puteți crea o tipografie CSS3 frumoasă. Tutorialul este împărțit în pași și este ușor de utilizat.

Tipografie web cu Lettering.js și CSS3

CSS3 este un susținător puternic. Devine mai util dacă este folosit cu biblioteci JS. În acest tutorial, utilizați puterea CSS3 și a Lettering.js (un plugin bazat pe jQuery pentru a crea o tipografie web interesantă) pentru a crea o tipografie web puternică.

Tipografie Inset cu CSS3

Tipografia Inset este destul de cool. În acest tutorial, autorul Andrew Roberts explică cum să creați o tipografie de inserție cu ajutorul tutorialului CSS3. Tutorial util pentru oricine caută să-și îmbunătățească abilitățile de tipografie folosind CSS3.

Contur text folosind CSS3 Text Stroke Property

În acest tutorial, veți înțelege cum să creați o contur de text în jurul textului dvs. Tutorialul folosește proprietatea text-stroke CSS3 și facilitează crearea de text cu un contur. De asemenea, puteți alege transparența textului utilizând caracteristicile transparente ale conturului.

Crearea unui efect de text anaglific folosind CSS

Cu acest tutorial, puteți învăța cum să creați efecte de text anaglifice folosind CSS. Anaglifele sunt o modalitate uimitoare de a crea imagini 3D prin modificarea canalelor roșu, verde și albastru. Textul poate fi văzut folosind o sticlă 3D și, prin urmare, oferă o valoare excelentă după utilizare.

3D CSS Shadow Text Tutorial

Text Shadow este unul dintre aspectele importante ale textului. Cu acest tutorial, puteți crea text CSS 3D cu „ZOOM” și puteți face mai multe trucuri așa cum se arată în tutorial.

Tutorialul oferă detalii excelente pentru crearea unui text umbră 3D CSS.

Modificarea culorii implicite de selecție a textului

Selectarea textului este afișată prin schimbarea culorii textului. Dacă nu știai că culoarea este personalizabilă, acum știi. Cu ajutorul tutorialului, poți schimba cu ușurință culoarea de selecție a textului pentru blogul tău.

Culoarea este importantă pentru orice marcă. Folosind culoarea principală ca culoare de selecție a textului, îi programați clienților fideli să se gândească la tine dacă văd acea culoare. Este o modalitate puternică de marketing și vreau să o folosești pentru afacerea ta și cea a clientului tău.

Efecte de text cool folosind CSS3 Text-Shadow

CSS Text-Shadow este un pachet surpriză. În acest tutorial, veți explora utilizarea pachetului CSS3 Text-Shadow, utilizându-l pentru a crea efecte de text interesante. Alfonse Surigao scrie tutorialul.

Rotirea textului cu CSS

Un text care se rotește este distractiv de urmărit și o poți face și tu urmând acest tutorial simplu scris de un dezvoltator web Jonathan Snook.

Carte de bucate CSS3

În calitate de dezvoltator și designer, este întotdeauna util să aveți o carte de bucate în preajmă. Cartea de bucate CSS3: 7 rețete CSS super ușoare de copiat și lipit, vă oferă rețete interesante de copiat și folosit. O pagină grozavă de marcat pentru utilizare ulterioară.

Adăugarea unei linii la textul web

Cu acest tutorial, puteți mângâia cu ușurință textul așa cum este menit să fie. Tutorialul este simplu și merge în profunzime pe subiect. De asemenea, merge înainte și explică limita mângâierii textului web.

Aplicarea degradelor de text CSS

În scurtul videoclip de 4 minute, veți învăța cum să aplicați degrade de text. Videoclipul este scurt, dar este super util. Deci, nu ratați asta.

Iubesc Blur

Nimic de lux aici, dar un mic truc pentru a prezenta un efect de estompare asupra textului I Love Blur. Îl poți folosi pentru a trimite un mesaj diferit în context diferit și, prin urmare, merită să înveți trucul.

Poster CSS fără imagini

O postare experimentală în care autorul încearcă să creeze un poster fără imagini. El reușește acest lucru folosind biți minunati, cum ar fi raza de margine, umbra casetă, transformare, @font-face, text-shadow, box-sizing și RGBa. Pentru a crede acest lucru, trebuie să parcurgeți codul, care este disponibil pe site.

Dimensiunea fontului cu Rem

Un alt articol simplu de la Jonathan Snook ne duce la dimensiunea fontului cu ajutorul REM. Articolul este extrem de detaliat și vă va plăcea câtă dragoste a pus autorul în articol. Un alt tutorial grozav care merită marcat pentru referințe viitoare.

Învelire

Învățarea este o cale continuă. Nu se termină niciodată și de aceea v-am adus lista uimitoare de tutoriale cu efect de text CSS3 și tipografie web. Multe dintre tutoriale sunt extrem de aprofundate și merită timpul tău. Alții trec prin unele efecte de lumină și sunt grozavi de învățat pentru utilizare pe termen lung.

Sper sa va placa articolul. Dacă ai făcut-o, nu uita să-l distribui prietenilor tăi. De asemenea, comentează mai jos cel mai bun tutorial care ți-a plăcut de pe internet. Suntem dornici să învățăm de la tine.

*ultima actualizare 03/02/2019