چگونه در CSS3 سایه بزنیم؟ ایجاد سایه با استفاده از css3 ، Css3 با توجه به اینکه ابزار جدیدی را در اختیار ما قرار می دهد و نیازی به نوشتن کدهای طولانی برای کارهای کوچک نداریم اما در تمام مرورگرها نیز قابل نمایش نیست در نتیجه اگر از هر ارگانی بازدید کننده برای سایت شما وجود دارد زیاده روی در استفاده از این خاصیت ها موجب کاهش کارایی زحمات شما خواهد شد.
در css برای ایجاد سایه درعناصر یا باید طیفی از رنگ ها ایجاد کنیم و آن را به عنصر مورد نظر نسبت دهیم یا سایه ی مورد نظر را روی عکس خاصی ایجاد کنیم و از آن استفاده کنیم ، اما ابزار جدیدی در css3 به ما این امکان را می دهد تا بدون استفاده از ابزارهای جانبی و با نوشتن یک کد ساده برای عناصر مورد نظر خود سایه ایجاد کنیم. شکل کلی استفاده از این خاصیت:
box-shadow : h-shadow v-shadow blur spread color inset ;
تعریف پارامترهای اول و دوم اجباری است و بقیه ی پارامترها به صورت اختیاری مقداردهی می شوند. برای عناصری که برحسب px هستند امکان مقداردهی منفی نیز وجود دارد.مثال: box-shadow : 10px 10px 5px 5px #000 inset ;
مثال:
box-shadow :0px 1px 30px #000;
خاصیت box-shadow در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه 9 به بعد ، مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند .خاصیت text-shadow (سایه در متن): با استفاده از این خاصیت چند پارامتری می توان متون بسیاری را با جلوه های بصری ایجاد کرد. شکل کلی استفاده از این خاصیت:
Text-shadow : x-offset y-offset blur color
نحوه ی استفاده از پارامترها در این خاصیت:
برای نمونه موارد زیر را در نظر بگیرید:
1. text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
در این نمونه سایه ی اول همرنگ با زمینه و سایه ی دوم همرنگ با متن انتخاب شده است.
2. text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px
#Ff00de, 0 0 70px #Ff00de;
با این کار طیف رنگی ساخته شده که با رنگ سفید شروع و به هاله ی بنفش ختم می شود.
3. text-shadow: 0px 2px 3px #666;
در این مدل سایه برای ایجاد برجستگی رنگ زمینه و رنگ سایه باید مخالف باشند .
4. text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
در این افکت در هر لایه مقدار offset تغییر می یابد و طیفی از رنگ های گرم ساخته شده که از رنگ سفید شروع شده و به سمت رنگ زرد و نارنجی پیش می روند.
5. text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
این نوع افکت با استفاده از لایه های چندگانه ایجاد می شود ، مقدار offset و رنگ در هر لایه تغییر می یابد.
