Elérkezett az ideje a cikksorozat 2. témájának boncolgatására, ami pedig a box-shadow. A text shadow-al egy szövegnek az árnyékát/árnyékait mozgattuk, növelgettük, színezgettük, most ugyanezt fogjuk megnézni dobozoknál. :) Egyik leghasznosabb funkció, amit nem használnak eléggé! 

Tehát a box shadow egy olyan tulajdonság, amit akár képnek, akár doboznak, akár menünek adhatsz. Így néznek ki az értékei: 

-moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc;

4db értékünk van és egy színünk, nézzük meg mit jelentenek ezek. 

< vízszintes elhelyezkedés > < függőleges elhelyezkedés > < elhomályosítás (blur) > < kiterjedés (spread) >

1. példa

-webkit-box-shadow: 0 10px 6px -6px #777;

-moz-box-shadow: 0 10px 6px -6px #777;

box-shadow: 0 10px 6px -6px #777;

2.példa

 box-shadow:  -6px -6px 8px -4px #E6D463,

 -6px 6px 8px -4px #E6D463,

  6px -6px 8px -4px #E35209,

  6px 6px 8px -4px #E6D463,

  6px 6px 8px -4px #E35209,

  8px -8px 6px -6px #E35209,

  6px 10px 10px -6px #E6D463,

  6px 10px 10px -6px #E35209;

3.példa

-webkit-box-shadow: 10px 10px 0px 3px rgba(0,0,0,0.75);

-moz-box-shadow: 10px 10px 0px 3px rgba(0,0,0,0.75);

box-shadow: 10px 10px 0px 3px rgba(0,0,0,0.75);

4.példa

-webkit-box-shadow: inset 0px 0px 20px -5px rgba(0,0,0,0.75), 0px 0px 20px 1px rgba(0,0,0,0.75);

-moz-box-shadow: inset 0px 0px 20px -5px rgba(0,0,0,0.75), 0px 0px 20px 1px rgba(0,0,0,0.75);

box-shadow: inset 0px 0px 20px -5px rgba(0,0,0,0.75), 0px 0px 20px 1px rgba(0,0,0,0.75);

5.példa

-webkit-box-shadow: inset -72px -34px 71px -68px rgba(0,0,0,0.75);

-moz-box-shadow: inset -72px -34px 71px -68px rgba(0,0,0,0.75);

box-shadow: inset -72px -34px 71px -68px rgba(0,0,0,0.75);