VARIÁCIÓK EGY TÉMÁRA SOROZAT
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 |
2. példa |
3. példa |
4. példa |
5. példa |
6. példa |
|
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);
6.példa
-webkit-box-shadow: inset 0px 0px 33px 3px rgba(0,0,0,1);
-moz-box-shadow: inset 0px 0px 33px 3px rgba(0,0,0,1);
box-shadow: inset 0px 0px 33px 3px rgba(0,0,0,1);
|