imagine-fundal

Blog / 📈 Culori gradient pe text folosind CSS
facebook instagram whatsapp tiktok twitter

     În tutorialul de astăzi vă voi arată cum puteți adăuga culori gradient pe conținutul unui text. Procesul din acest articol este strict CSS, pentru a fi eficient din punct de vedere al consumului de memorie. Înainte de a începe, gradient reprezintă trecerea prin tot câmpul de culori aflat între o origine și o extremitate, adică, putem genera un gradient de la albastru la roșu și va afișa următorul rezultat.

Imagine

     Bun, acum trebuie să înțelegem cum funcționează codul prezentat. Primul pas este să declarăm culorile din gradient folosind proprietatea background-image asupra selectorului textului. Următorul pas este să modificăm dimensiunea fundalului folosind atributa background-clip (respectiv -webkit-background-clip: text; pentru a fi compatibil cu toate browser-ele). Vom micșora mărimea fundalului strict la dimensiunea textului. La final, pentru a vedea culoarea din spate vom modifica culoarea textului (variabila color) la constanta transparent, pentru a fi vizibil prin acesta. Un lucru care poate părea ciudat este de ce trebuie să setăm culoarea textului la transparent. Răspunsul este deoarece poziția pe axa Z a fundalului este mai mică decât cea a culorii textului, mai exact, fără ultima comandă, gradient-ul există, doar că nu îl putem vedea într-un spațiu bidimensional (2D). După ce am făcut toți pașii din sursa de mai jos vom avea următoarea afișare (exceptând formatările de font și dimensiune ale textului).

Imagine
p {
	background-image: linear-gradient(red, blue);
	background-clip: text;
 	-webkit-background-clip: text; 
	color: transparent;
}

imagine

pbinfo / 233

imagine

pbinfo / 1754

imagine

pbinfo / 1282