Putem adăuga o umbră la orice element HTML folosind proprietatea CSS box-shadow. Iată cum.

Adăugarea unei umbre de bază

Mai întâi să configurăm câteva elemente HTML de bază pentru a adăuga umbrele noastre la:

<div id="box1" class="box">Box1</div>
<div id="box2" class="box">Box2</div>
<div id="box3" class="box">Box3</div>

Apoi adăugați câteva CSS de bază:

p {
    padding: 10px;
}
.box {
    padding: 20px;
    width: 50%;
    margin: 30px auto;
    background: #000;
    color: #fff;
}

Rezultatul este doar trei căsuțe negre care ne vor fi ușor să le adăugăm umbre prin apelarea ID-urilor unice:

Configurarea elementelor HTML
Configurarea elementelor HTML

Pentru a adăuga o umbră de bază, să folosim box-shadow proprietate pe caseta 1:

/* offset-x | offset-y | color */
#box1 {
    box-shadow: 6px 12px yellow;
}

Adăugarea unei umbre de bază în caseta 1
Adăugarea unei umbre de bază în caseta 1

Aici avem 3 parametri. Primele 2 sunt, respectiv, decalajul x și decalajul y. Ei stabilesc locația umbrei.

Decalajul este relativ la origine, care în HTML este întotdeauna colțul din stânga sus al unui element. Un decalaj pozitiv x va deplasa umbra spre dreapta, iar un decalaj pozitiv va deplasa umbra în jos.

Al treilea parametru este culoarea umbrei tale.

Rețineți că, deși am folosit <div> elemente aici, box-shadow proprietatea poate fi aplicată și oricărui alt element HTML.

Adăugarea unei raze de estompare

Dacă vrem ca umbra să arate puțin mai realistă, vom dori să experimentăm cu blur-radius parametru.

Acest parametru controlează cât de mult poate estompa umbra astfel încât să devină mai mare și mai ușoară. Să-l aplicăm în caseta 2:

/* offset-x | offset-y | blur-radius | color */
#box2 {
	box-shadow: 6px 12px 4px red;
}

Adăugarea unei raze de estompare în caseta 2
Adăugarea unei raze de estompare în caseta 2

Valoarea 4px setează raza neclarității pentru a se aplica umbrelor noastre.

Adăugarea unei raze de răspândire

Dacă dorim să controlăm dimensiunea umbrei, putem folosi spread-radius parametru care controlează cât crește sau se micșorează o umbră.

Să adăugăm o rază de răspândire de 8 px în caseta 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */
#box2 {
    box-shadow: 6px 12px 4px 8px red;
}

Adăugarea unei raze de răspândire în plus față de o estompare în caseta 2
Adăugarea unei raze de răspândire în plus față de o estompare în caseta 2

Amintiți-vă ordinea acestor parametri!

Combinarea mai multor umbre într-o singură proprietate

Dacă vrem să devenim fantezi, putem adăuga mai multe umbre de cădere unui element folosind o singură box-shadow proprietate.

Să facem asta cu caseta 3 adăugând simultan o umbră albastră și verde:

/* Any number of shadows, separated by commas */
#box3 {
    box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green;
}

combinați mai multe umbre
Adăugarea mai multor umbre în caseta 3

Bonus: creați o umbră inserată

Deși nu va crea o umbră, fișierul inset parametrul poate fi, de asemenea, utilizat cu box-shadow proprietate.

După cum sugerează și numele, acest parametru creează o umbră inserată (adică umbră în interiorul unei cutii).

inset parametrul poate fi plasat fie la începutul, fie la sfârșitul lui
box-shadow proprietate. Aici demonstrăm utilizarea acestuia cu un blockquote element.

HTML:

<blockquote>
  <q>The key to success is to start before you're ready.</q>
  <p>&mdash; Marie Forleo</p>
</blockquote>

CSS:

blockquote {
  width: 50%;
  margin: 50px auto;
  padding: 20px;
  font-size: 24px;
  box-shadow: inset 10px 5px black;
}

Creați o umbră inserată
Creați o umbră inserată

Bineînțeles că puteți adăuga o anumită neclaritate și răspândire pentru a îmbunătăți umbra sau chiar mai multe umbre:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;

Inserați umbra combinată cu umbra
Inserați umbra combinată cu umbra

Cu box-shadow proprietate, putem face cu ușurință elemente de pe o pagină web să iasă în evidență pentru a crea un efect de iluminare 3D frumos.

Dacă doriți să experimentați singur, iată un stilou cod Am creat cu exemplele utilizate în acest tutorial.

Joacă-te și vezi cu ce poți veni!

Doriți să vedeți mai multe sfaturi și cunoștințe de dezvoltare web?