În articolul de astăzi, vom vorbi despre cum să faci o umbră într-un text sau bloc folosind CSS3.
Să începem cu un mic marcaj html.
Lorem ipsum dolor sta amet.
Și acum să setăm stilurile pentru el:
fundal al corpului: #ccc;
>
p font-size: 18px;
text-shadow: 0 1px 0 #eee;
>
Umbra pentru text este specificată utilizând proprietatea text-shadow. unde prima valoare este o liniuță în orizontală, a doua în verticale, a treia în neclaritate, iar al patrulea este culoarea umbrei. Dacă executați acest exemplu, veți vedea un efect destul de interesant al unei umbre albe de un pixel, care este acum adesea folosit.
De asemenea, puteți specifica mai multe umbre cu o virgulă:
p text-shadow: 0 1px 0 #eee, 3px 3px 3px # 000;
>
Acum hai să vorbim despre cum să setăm umbra pentru bloc.
În primul rând, ne schimbăm marcajul
Și să stabilim câteva stiluri inițiale
fundal bloc: # 333;
lățime: 200px;
înălțime: 200px;
margine: 20 pixeli;
>
Acum, hai să-i dăm blocului o umbră cu umbra în cutie
fundal bloc: # 333;
lățime: 200px;
înălțime: 200px;
margine: 20 pixeli;
box-shadow: 7px 1px 7px 5px # 555, -7px 1px 7px 5px # c1ff05;
>
Absolut tot ce am spus despre umbrele textului. Este valabil și pentru umbrele blocurilor. În acest exemplu, am setat prima umbră cu decalajul x la 7px, axa y la 1px, estomparea de 7px și culoarea neagră. Cu a doua umbră totul este același, numai deplasarea de-a lungul axei x nu va fi la dreapta, ci la stânga, deoarece am stabilit un număr negativ. După cum puteți vedea, există al patrulea parametru, care indică raza de răspândire a umbrei, dar este folosită rar.
Acestea erau umbre externe. dar există și interne
bloc box-umbra: inset 9px 9px 3px # 112233;
>
După cum puteți vedea, pentru a face umbra să devină internă, trebuie doar să adăugați cuvântul inserat la început.
Acesta este totul pentru articolul de astăzi. Mult noroc!
Articole similare
Trimiteți-le prietenilor: