3 Trucul pentru a adăuga textură în text cu css și svg

Ne pregătim un specialist în domeniul IS - Instruim un specialist în domeniul securității informațiilor de la zero la nivelul inițial. După antrenament, veți putea oferi servicii pentru efectuarea testelor de penetrare (hacking legal)







Probabil, sunteți familiarizat cu utilizarea unei astfel de tehnici Photoshop, atunci când imaginea este text; Acesta este cel mai cunoscut mod de a adăuga texturi sau chiar imagini de fundal în text. Apoi, puteți utiliza acest text ca o imagine pe site-ul dvs. web; dar ar fi minunat dacă am putea aplica același efect folosind HTML și CSS? Vești bune - putem!

CSS a introdus proprietăți precum clipul de fundal și imaginea de mască. pe care le puteți utiliza pentru a crea efecte similare pentru care a fost folosit Photoshop înainte. În plus, puteți utiliza, de asemenea, SVG pentru aceasta.







Astăzi vom examina aceste opțiuni și chiar vom face niște animații simple. Dacă doriți să continuați pe cont propriu, unu-la-unu cu codul, puteți descărca fișierele sursă aici.

Suport pentru browser

După cum era de așteptat, unele dintre aceste proprietăți pe care le vom folosi nu sunt acceptate universal. Aceasta înseamnă că nu vor funcționa în browsere precum IE și Firefox.

Creați o imagine de text în mișcare de fundal folosind BACKGROUND-CLIP

Prima opțiune pe care o vom analiza este proprietatea clipului de fundal. Această proprietate determină dacă fundalul va fi extins dincolo de granițe sau nu. Acesta permite textului unui anumit element să decupeze imaginea.

Modelul nostru este doar h1 cu clasa bgClip:







Articole similare

Trimiteți-le prietenilor: