Exemple de utilizare umbre de text CSS

Ați apărut anterior senzație de disconfort atunci când semnătura dvs. este rău semăna cu culorile butoanelor, panouri sau text simplu slab în contrast cu fundalul paginii? Cu umbra CSS a acestei probleme este rezolvată ușor prin utilizarea de proprietate de text-umbra. pentru a îmbunătăți lizibilitatea și contrastul textului.

În aceste exemple, folosim umbra textului într-o varietate de situații care vă va oferi baza necesară pentru a continua să le ai putea privi în această chestiune.

1. Configurare de bază

Crearea unui nou fisier HTML și adăugați următorul cod la HTML si CSS:

În secțiunea HTML, adăugați eticheta

text cu clasa:

Pentru acest element se adaugă textul umbra CSS. Am cerut pentru acest element proprietățile inițiale, astfel încât părea frumos pe ecran:

Acum, să ceară pentru atributul de text de text-umbra. Dar înțelegem mai întâi ce valori are acest atribut:

1. 4px - deplasare de-a lungul axei X (orizontală);
2. 3px - deplasare de-a lungul axei Y (vertical);
3. 2px - valoarea estompare;
4. #ccc - culoare.

Acesta este definit după cum urmează:

de culoare pot fi reprezentate în #ccc hexazecimal sau RGBA (0,0,0,0.3);. În CSS, putem aplica textul nostru, CSS umbra interioară, după cum urmează:

Reprezentarea în browser-ul de umbra text va arăta astfel:

Vom continua în moduri diferite de a schimba culoarea de fundal a elementului de corp. Facem acest lucru deoarece pentru unele umbre CSS au nevoie de un anumit fond, în caz contrar acestea nu vor fi vizibile. Pentru a face textul privit frumos, l-am cere în registrul superior.

2. Efectul imprint

Setați culoarea textului nuanta usor mai inchisa decat fundalul. Apoi se aplică un text puțin umbră albă, cu o opacitate redusă:

Folosind codul RGBA, puteți seta opacitatea culorii. Rețineți că culoarea textului are o opacitate de 60% (0,6). o umbră div CSS 10% (0,1).