اگر آموزش های ما را دنبال کرده باشید در مطالب قبلی در مورد زبان برنامه نویسی CSS3 توضیحاتی را به شما ارائه دادیم.در این مطلب قصد داریم به یکی دیگر از خاصیت های این زبان بپردازیم که می تواند استفاده از آن امکانات جالبی را برای شما فراهم کند.
خاصیت box-shadow در خطوط حاشیه :
از خاصیت box-shadow در CSS 3 ، برای ایجاد سایه برای عناصر HTML استفاده می شود . این امکان یک ابزار جدید و فوق العاده است که به کاربر اجازه می دهد ، بدون استفاده از هیچ ابزار جانبی و فقط با نوشتن یک کد ساده ، برای عناصر مورد نظر خود سایه ایجاد کند .
برای سایه مورد نظر خود می توانید فاصله عمودی و افقی از عنص تعیین کرده و نیز رنگ و اندازه آن را نیز تنظیم کنید .
شکل کلی استفاده از این خاصیت به صورت زیر است :
; Syntax :box-shadow : h-shadow v-shadow blur spread color inset
; box-shadow : 10px 10px 5px 5px blue inset:مثال
خاصیت box-shadow به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد . در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :
توضیح هر یک از موارد syntax :
h-shadow:
این پارامتر میزان فاصله سایه از لبه بالایی عنصر را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی عنصر ( به سمت پایین ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی عنصر قرار می گیرد .
blur:
این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل ۱۰px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد .
تعیین این پارامتر اختیاری است .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .
spread:
این پارامتر اندازه سایه را بر حسب واحد پیکسل px تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه تعیین نشود ، اندازه سایه دقیقا برابر با اندازه عنصر خواهد بود .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .
color:
این پارامتر رنگ سایه را تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد بود .
inset:
پارامتر inset تعیین می کند که آیا سایه با فاصله از عنصر قرار گیرد ، یا در پشت عنصر و بدون فاصله عمودی و افقی از آن باشد . مقدار پیش فرض این پارامتر خالی ( Null ) است .
تعیین این پارامتر اختیاری است . چنانچه مقدار آن خالی باشد ، سایه با فاصله عمودی و افقی از عنصر قرار می گیرد . ولی اگر مقدار آن بر روی inset باشد ، سایه در پشت عنصر و ظاهرا درون خود آن قرار می گیرد .
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه ۹ به بعد ، مرورگر فایرفاکس از نسخه ۴ به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند .
