خب دوست عزیز
بعد از اینکه دوبار متن رو نوشتم و پاک شد، این برای بار سوم هستش.
خب در فایل CSS ما تا قبل از خط 66، یا قبل از کامنت
/* Menu Shodow Effect */
ظاهر رنگی منو رو مشخص کردیم که فکر نکنم، برای شما این سوال بوده. بلکه اون زیر سایه برای شما مهم بوده. برای اون از خط 66 به بعد کد زده شده. خب اول بریم سراغ نحوه ی قرار گیری المنت هامون:
<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">blog</a></li>
</ul>
<div class="clear"></div>
</div>
ما استایل رو به تگ ul دادیم و اون زیر سایه رو به div والد که کلاسش menu هست. خب کد مربوط به زیر سایه این هستش:
/* Menu Shodow Effect */
div.menu {
position: relative;
float: left;
}
div.menu:after {
content:"";
position: absolute;
z-index: -2;
bottom: 20px;
right: 10px;
left: auto;
width: 50%;
height: 20%;
-webkit-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
اول اومدیم خود منو رو انتخاب کردیم و بهش مقادیر زیر رو اختصاص دادیم:
position: relative;
float: left;
این مقدایر برای جایگیری مناسب زیر سایه هست. برای مشاهده اینکه هرکدوم برای چی هست، می تونید یکی یکی پاک کنید، و نتیجه رو ببینید.
بعد یه سلکتور داریم به اینصورت:
div.menu:after
سلکتور
:after
:before
برای اضافه کردن یک متن به بعد یا قبل یه المنت بکار می ره که اون متن رو ما در مقدار content قرار می دیم. همونطور که می بینید، ما چون هیچ متنی نمی خواییم اضافه کنیم، مقدار اون رو خالی گذاشتیم. content:"";
سپس با استفاده از position: absolute;
این عنصر رو بگونه ای جایگزاری کردیم، که نسبت به اولین المنتی که قبل از اون هست، یعنی همون div والد ما، حالت absolute بگیره، و با دادن مقادیر، top، left، right و bottom جایگیریش رو مشخص کنیم. در نظر داشته باشید که وقتی به position یک المنت مقدار absolute می دیم، اون المنت نسبت به اولین المنتی که مقدار positionای غیر از Static که پیشفرض تمامی المنت ها هست، داشته باشه، موقعیت خودش رو مشخص می کنه. حالا چون ما div والد رو position: relative دادیم، پس نسبت به این موقعیت خودش رو مشخص می کنه.
سپس مقدار زیر رو دادیم: z-index: -2;
این مقدار برای این هست، که المنت ما در زیر دیگر المنت ها قرار بگیره. چون مقدار z-index پیشفرض تمامی المنت ها در صورت ندادن مقدار، از والدشون گرفته می شه که تگ والد ما body هست و اون هم در جلوی صفحه قرار داره. پس با دادن یک مقدار منفی اون رو به زیر می فرستیم. حالا مقدار زیر رو داریم:
bottom: 20px;
این مقدار فاصله از پایین رو مشخص می کنه که با دومین مقدار box-shadow ما برابر هست. این برای نمایش بهتر هستش. یه نکته ای که بگم این هست که در فایلی که آپلود کردم این مقدار مشکل داره. یعنی اینجوریه:
-webkit-box-shadow: 0 20px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 20px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
که باید اون 15px ها ی دو مقدار اولی رو به 20px تغییر بدیم. البته چون نسخه های آخر مرورگر های Chrome، Firefox و Safari از همون مقدار box-shadow بدون پیشوند پشتیبانی می کنن، و این مقدار بعد از اون دوتا اومده مشکلی ایجاد نمی کنه. ولی در نسخه ها قدیمی اونها مثل Firefox نسخه 3.6 این دستور مشکل ایجاد می کنه. بهتره شما اونها رو با این مقدار جایگزین کنید:
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
سپس دستور right: 10px;
رو داریم که برای این هست که زیر سایه ما از سمت راست 10px فاصله داشته باشه.
مقدار left: auto هم برای این هست که فاصله ما از سمت چپ، بصورت اتوماتیک انتخاب بشه. این برای سازگاری با برخی مرورگر ها مثل ie هستش.
مقادیر
width: 50%;
height: 20%;
هم برای مشخص کردن طول و عرض زیر سایه ما هست. با افزایش یا کاهش width می تونی شروع سایه رو از وسط منو به هرکجا که خواستید تغییر بدید. مقدار height زیاد مهم نیست. فقط برای این هست که زیر سایه با داشتم ارتفاع، در صفحه نمایش داده بشه.
حالا از box-shadow می گذریم (در آخر توضیح می دم) و می ریم سراغ دستور های آخر یعنی:
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
این دستور برای چرخاندن زیر سایه به اندازه 3 درجه در جهت چرخش عقربه های ساعت هست. برای این هست که حالت ای رو برای ما بوجود بیاره که از وسط که به سمت راست می ریم، شکل ما بیرون زدگیش بیشتر بشه.
حالا می ریم سراغ box-shadow عزیز که همه چیز زیر سره اینه. نگاه کنید، یک دستور box-shadow به این صورت نوشته می شه:
box-shadow: h-shadow v-shadow blur spread color inset;
که مقادیر اون به ترتیب به این صورت هستن:
h-shadow: که محل قرار گیری افقی سایه مارو مشخص می کنه.
v-shadow: که محل قرار گیری عمودی سایه مارو مشخص می کنه.
blur: حالت بلورین که سایه داره، یعنی تعداد پیکسل هایی که سایه ما از رنگ مشخص شده، به بی رنگ تغییر کنه با این مشخص می شه.
spread: اندازه سایه
color: رنگ سایه
inset: برای تغییر اینکه سایه ما بجای اینکه به خارج اعمال بشه، به داخل المنت اعمال بشه.
کد box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
دارای مقادیر h-shadow v-shadow blur color هستش. البته با این box-shadow باید یکم ور برید تا قلقش دستتون بیاد. بهتره با این بیشتر کار کنید.
فکر کنم توضیحات کافی بود. اگر سوالی بود، در خدمتم.