خطوط حاشیه در CSS 3 - خاصیت box-shadow
خاصیت 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 به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد
. در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :
|
توضیح
|
این پارامتر میزان فاصله سایه از لبه بالایی عنصر را بر حسب مقداری مثل px یا pt تعیین
می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی عنصر
( به سمت پایین ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد
. چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی عنصر
قرار می گیرد .
|
این پارامتر میزان فاصله سایه از لبه سمت چپ عنصر را بر حسب مقداری مثل px یا pt تعیین
می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ عنصر
( به سمت چپ ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد
. چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه در سمت چپ لبه چپ عنصر قرار
می گیرد .
|
این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت
مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل 10px
. هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد .
تعیین این پارامتر اختیاری است .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .
|
این پارامتر اندازه سایه را بر حسب واحد پیکسل px تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه تعیین نشود ، اندازه سایه دقیقا برابر
با اندازه عنصر خواهد بود .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .
|
این پارامتر رنگ سایه را تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد
بود .
|
پارامتر inset تعیین می کند که آیا سایه با فاصله از عنصر قرار گیرد ، یا در پشت عنصر
و بدون فاصله عمودی و افقی از آن باشد . مقدار پیش فرض این پارامتر خالی ( Null ) است
.
تعیین این پارامتر اختیاری است . چنانچه مقدار آن خالی باشد ، سایه با فاصله عمودی
و افقی از عنصر قرار می گیرد . ولی اگر مقدار آن بر روی inset باشد ، سایه در پشت عنصر
و ظاهرا درون خود آن قرار می گیرد .
|
پشتیانی در مرورگر های مختلف :
این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه 9 به بعد ،
مرورگر فایرفاکس از نسخه 4 به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی
می کنند .
مثال های عملی :
در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم
.
مثال 1 : در مثال اول یک تگ < div > داریم که برای آن
یک سایه ایجاد کرده ایم . برای سایه این عنصر ، فقط سه پارامتر های v-shadow , h-shadow
و color که تعیین کننده فاصله سایه از عنصر و رنگ آن است را تعیین کرده ایم . در حالت
اول مقادیر فاصله مثبت و در حالت دوم منفی دز نظر گرفته شده است . به تفاوت ها و پشتیانی
مرورگر خود دقت کنید .
|
حالت 1
|
حالت 2
|
< html >
< head >
< style >
div
{
width: 200px ;
background-color: blue
;
box-shadow: 10px 10px
yellow ;
}
< /style >
</head>
<body>
< div > box-shadow 1 example
< /div >
</body>
</html>
|
< html >
< head >
< style >
div
{
width: 200px ;
background-color: blue
;
box-shadow: -10px -10px
yellow ;
}
< /style >
</head>
<body>
< div > box-shadow 2 example
< /div >
</body>
</html>
|
box-shadow 1 example
|
box-shadow 2 example
|
مثال 2: در مثال دوم ، مثال اول را بازنویسی کرده ایم با این
تفاوت که در حالت 2 برای پارامتر blur و spread نیز مقدار تعیین کرده ایم . مقدار دهی
پارامتر blur باعث مه آلوده شدن سایه و نیز مقدار دهی پارامتر speard باعث تغییر اندازه
سایه شده است .
|
حالت 1
|
حالت 2
|
< html >
< head >
< style >
div
{
width: 200px ;
background-color: blue
;
box-shadow: 10px 10px
brown ;
}
< /style >
</head>
<body>
< div > box-shadow 1 example
< /div >
</body>
</html>
|
< html >
< head >
< style >
div
{
width: 200px ;
background-color: blue
;
box-shadow: 10px 10px
10px 5px brown ;
}
< /style >
</head>
<body>
< div > box-shadow 2 example
< /div >
</body>
</html>
|
box-shadow 1 example
|
box-shadow 2 example
|
مثال 3: در مثال سوم ، باز هم مثال اول را بازنویسی کرده ایم
با این تفاوت که پارامتر inset را مقدار دهی کرده و به نشان دادن تفاوت دو مقدار متفاوت
این پارامتر پردخته ایم :
|
حالت 1
|
حالت 2
|
< html >
< head >
< style >
div
{
width: 200px ;
background-color: blue
;
10px 10px 10px 5px
brown ;
}
< /style >
</head>
<body>
< div > box-shadow 1 example
< /div >
</body>
</html>
|
< html >
< head >
< style >
div
{
width: 200px ;
background-color: blue
;
10px 10px 10px 5px
brown inset ;
}
< /style >
</head>
<body>
< div > box-shadow 2 example
< /div >
</body>
</html>
|
box-shadow 1 example
|
box-shadow 2 example
|