آموزش ایجاد سایه ( Shadow ) در CSS3 به زبان ساده
چگونه در CSS3 سایه بزنیم؟ ایجاد سایه با استفاده از css3 ، Css3 با توجه به اینکه ابزار جدیدی را در اختیار ما قرار می دهد و نیازی به نوشتن کدهای طولانی برای کارهای کوچک نداریم اما در تمام مرورگرها نیز قابل نمایش نیست در نتیجه اگر از هر ارگانی بازدید کننده برای سایت شما وجود دارد زیاده روی در استفاده از این خاصیت ها موجب کاهش کارایی زحمات شما خواهد شد.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
خاصیت box-shadow (سایه در عناصر)
در css برای ایجاد سایه درعناصر یا باید طیفی از رنگ ها ایجاد کنیم و آن را به عنصر مورد نظر نسبت دهیم یا سایه ی مورد نظر را روی عکس خاصی ایجاد کنیم و از آن استفاده کنیم ، اما ابزار جدیدی در css3 به ما این امکان را می دهد تا بدون استفاده از ابزارهای جانبی و با نوشتن یک کد ساده برای عناصر مورد نظر خود سایه ایجاد کنیم. شکل کلی استفاده از این خاصیت:
box-shadow : h-shadow v-shadow blur spread color inset ;
نحوه ی استفاده از پارامترها در این خاصیت :
- h-shadow: این پارامتر میزان فاصله سایه از لبه بالایی عنصر را بر حسب مقداری مثل px یا pt تعیین می کند.هر چه این مقدار بیشتر باشد ، سایه به سمت پایین کشیده تر میشود.
- v-shadow: این پارامتر میزان فاصله سایه از لبه سمت چپ عنصر را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، سایه به سمت راست کشیده تر می شود.
- blur: این پارامتر باعث می شود که اطراف سایه به صورت مه آلود و تیره دربیاید و مقدار آن برحسب px خواهد داشت.هرچه این مقدار بیشتر باشد تیرگی اطراف سایه بیشتر می شود.
- spread : این پارامتر اندازه سایه را بر حسب واحد px تعیین می کند .
- Color:این پارامتر رنگ سایه را تعیین می کند.برای پیش فرض رنگ مشکی انتخاب شده است.
- Inset:این پارامتر فاصله ی سایه از عنصر را مشخص میکند.مقدار پیش فرض آن null است اما اگر مقدار 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
نحوه ی استفاده از پارامترها در این خاصیت:
- x-offset : این پارامتر برای تعیین موقعیت سایه نسبت به محور افقی است و برحسب px تعیین می شود.
- y-offset : این پارامتر برای تعیین موقعیت سایه نسبت به محور عمودی است و بر حسب px تعیین می شود.
- Blur : این پارامتر برای محو کردن سایه بر حسب px انتخاب می کنیم.
- 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 و رنگ در هر لایه تغییر می یابد.