Introducere în Web Development

Ajută foarte mult atunci când grafica replică natura. Are sens, pentru că natura a avut miliarde de ani să se perfecționeze.

În natură, diferite elemente au umbre. Putem și din CSS să dăm umbre elementelor de pe o pagină web, fie elementului în sine, prin box-shadow, fie doar textului prin text-shaddow.

Pentru a da umbre elementelor din CSS, se folosește proprietatea box-shadow, cu următoarele proprietăți separate prin spațiu:

                    box-shadow: 
  var(--offset-x) 
  var(--offset-y) 
  var(--blur) 
  var(--grow) 
  var(--color)
  inset;
                

                    text-shadow: 
  var(--offset-x) 
  var(--offset-y) 
  var(--blur) 
  var(--color);


                

--offset-x Cât de mult se deplasează umbra pe orizontală. Valorile pozitive o vor face să se deplaseze spre dreapta. Cele negative spre stânga.

--offset-y Cât de mult se deplasează umbra pe verticală. Valorile pozitive o vor face să se deplaseze în jos. Cele negative în sus.

--blur Cât de mare este umbra. Dacă nu este dată sau la valoarea 0, umbra este solidă. La valori mai mari, se face gradual trecerea de la culoarea umbrei la transparent.

--grow Cât crește umbra față de dimensiunea elementului. Dacă nu este dată sau este 0,

--color Culoarea umbrei. Poți folosi umbre gri sau cu semitransparență pentru a simula umbre naturale, dar și culori pentru diferite efecte.

inset dacă este dat, face ca umbra să apară în interior.

                    box-shadow: 2px 2px #ed1d90;
                

                    box-shadow: 0.1rem 0.1rem 0.5rem #0fb7ff;
                

                    box-shadow: inset 0 0 0.5rem #b40fe7;
                

                    text-shadow: 0 0 1rem #8efaf4;
                

                    box-shadow: 
  inset 0 0 0 0.3rem #b40fe7, 
  0 0 0 0.3rem #0fb7ff, 
  0 0 0 1rem #ed1d90;