Cum sa faci un text texturată, nu numai în Photoshop sunt câteva modalități practice
Doar zafotoshopte
La fel ca oriunde altundeva, puteți programa doar fals, uneori, este în valoare de ea. Dezavantajul este că un astfel de test este statică, și să-l schimbe, trebuie să vă re-crea imaginea. Imaginile pot fi, de asemenea, o mulțime de greutate, mai ales dacă încercați să cumpere rezoluții mai mari, etc. Cu toate acestea, această metodă funcționează:
-webkit-background-clip: text;
Această proprietate nu este standardizat, dar a fost inventat pentru un singur scop. Avantajul acestei metode este faptul că această proprietate poate fi folosit în tandem cu -webkit-text-umplere-culoare: transparent;. Tu „ascunde“, textul numai în browsere care acceptă proprietatea superioară. Divya Manian documentat această metodă câțiva ani în urmă.
Este acest text care poate fi editat, acesta este disponibil pentru motoarele de căutare, etc. Mai jos sunt câteva exemple de Jintos:
HTML5 și CSS3 practica de la zero la rezultatul!
umplere SVG
În SVG, puteți crea acest text utilizând elementul
Acest cod poate fi introdus direct în HTML. Mai jos este un exemplu de C.Y. Park:
polifill CSS folosind SVG
Tim Pietrusky creat de proprietate polifill -webkit-background-clip, care foloseste SVG pentru a sprijini browsere mai vechi. Mult mai rapid și mai ușor de a scrie cod CSS in loc de SVG, astfel încât această metodă este foarte bună și are un suport excelent în browser.
mix-amestec-mode: ecran;
Un alt mod. Dar acest lucru nu am văzut! Metoda CSS in sine este destul de nouă suprapunere. un element la altul ca în Photoshop (de exemplu, «ecran», «multiplica», «ușura» etc.) pot fi exprimate în mod direct. Imaginea poate fi suprapusă pe text, prin crearea unui efect de text cu tapet. Pentru prima dată, această metodă am văzut Giana pe CodePen:
Acesta funcționează pe principiul:
Culoarea textului este negru.
Aceasta se aplică tuturor textului și de fundal de proprietate mix-amestec-mode: ecran;
Al doilea exemplar al aceluiași text (numai alb) folosește același fundal, dar cu valoarea mix-amestec-mode: multiplica;
Cu această metodă este ușor de a crea un text texturată. Când indicatorul-evenimente pot fi folosite pentru a lăsa da clic pe text, dar este dificil de a urmări ceea ce faci. Principalul avantaj este că este metoda complet CSS, care funcționează complet în Firefox, dar nu numai în browsere -webkit-.
Revizie: Echipa webformyself.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
