VARICIK EGY TMRA SOROZAT
Elrkezett az ideje a cikksorozat 2. tmjnak boncolgatsra, ami pedig a box-shadow. A text shadow-al egy szvegnek az rnykt/rnykait mozgattuk, nvelgettk, sznezgettk, most ugyanezt fogjuk megnzni dobozoknl. :) Egyik leghasznosabb funkci, amit nem hasznlnak elgg!
Teht a box shadow egy olyan tulajdonsg, amit akr kpnek, akr doboznak, akr mennek adhatsz. gy nznek ki az rtkei:
-moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc;
4db rtknk van s egy sznnk, nzzk meg mit jelentenek ezek.
< vzszintes elhelyezkeds > < fggleges elhelyezkeds > < elhomlyosts (blur) > < kiterjeds (spread) >
|
1. plda |
|
2. plda |
|
3. plda |
|
4. plda |
|
5. plda |
|
6. plda |
|
1. plda
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
2.plda
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.plda
-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.plda
-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.plda
-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.plda
-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);
|
AJÁNLOM AZ OLDALT
"So bring your passport girl, I'm trying to show you the world"
