سرخط خبرها

آموزش box-shadow در css3

آموزش box-shadow در css3

در این آموزش قصد دارم به ایجاد سایه های زیبایی که تا قبل از آمدن CSS3 فقط می توانستید آنهارا در فتوشاپ ببینید، بپردازم.حتما شده بود بخواهید به یک المنت ، یک سایه ی زیبا بدید ولی نمیتونستید اونو با کد بنویسید و میرفتید سراغ فتوشاپ و سایه رو ایجاد میکردید بعد به صورت یه تصویر ذخیره میکردید و بعد … که باعث میشد حجم صفحه ی وبتون بره بالا و این اصلا خوب نیست؛ هم از نظر سئو و هم از نظر کاربر پسند بودن.

در CSS3 از ویژگی box-shadow برای اضافه کردن سایه استفاده می شود. توسط box-shadow میتونید برای باکس یا عنصرتون سایه ایجاد کنید . در واقع شما یک باکسی رو به شکل سایه با box-shadow ایجاد می کنید به همون ابعاد باکسی که دارید ، توسط مقادیری که وارد می کنید ، این باکس رو جابجا می کنید و با جابجا شدن باکس سایه اینطور به نظر میرسه که یه سایه برای باکس بوجود اومده . لازم به گفتنه که این باکس سایه پشت باکس اصلی قرار میگیره . حالا با مثال هایی که میزنیم متوجه میشید .

از خاصیت box-shadow در CSS 3 ، برای ایجاد سایه برای عناصر HTML استفاده می شود . این امکان یک ابزار جدید و فوق العاده است که به کاربر اجازه می دهد ، بدون استفاده از هیچ ابزار جانبی و فقط با نوشتن یک کد ساده ، برای عناصر مورد نظر خود سایه ایجاد کند .
برای سایه مورد نظر خود می توانید فاصله عمودی و افقی از عنص تعیین کرده و نیز رنگ و اندازه آن را نیز تنظیم کنید .

 

شکل کلی استفاده از این خاصیت به صورت زیر است :

box-shadow : h-shadow   v-shadow   blur   spread   color   inset ;

مثال : box-shadow : 10px 10px 5px 5px blue inset ;

خاصیت box-shadow به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد . در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :

h-shadow :

باکس رو بصورت افقی در عنصر جابجا می کنید .این پارامتر میزان فاصله سایه از لبه بالایی عنصر را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی عنصر ( به سمت پایین ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی عنصر قرار می گیرد .

v-shadow :

باکس رو بصورت عمودی در عنصر جابجا می کنید .این پارامتر میزان فاصله سایه از لبه سمت چپ عنصر را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ عنصر ( به سمت چپ ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه در سمت چپ لبه چپ عنصر قرار می گیرد .

blur :

سایه رو بصورت blur و مات درمیاره .این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل ۱۰px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد .
تعیین این پارامتر اختیاری است .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .

spread :

متونید سایز باکس سایه رو بزرگ تر کنید ( یعنی بزرگ تر از سایز باکس اصلی ) ، اگر برابر با صفر باشه باکس سایه دقیقا هم سایز باکس اصلی خواهد بود .این پارامتر اندازه سایه را بر حسب واحد پیکسل px تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه تعیین نشود ، اندازه سایه دقیقا برابر با اندازه عنصر خواهد بود .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .

color :

این پارامتر رنگ سایه را تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد بود .

inset :

اگر مقدار inset رو انتهای کد قرار بدید ، سایه رو در داخل باکس ایجاد میکنه .پارامتر inset تعیین می کند که آیا سایه با فاصله از عنصر قرار گیرد ، یا در پشت عنصر و بدون فاصله عمودی و افقی از آن باشد . مقدار پیش فرض این پارامتر خالی ( Null ) است .
تعیین این پارامتر اختیاری است . چنانچه مقدار آن خالی باشد ، سایه با فاصله عمودی و افقی از عنصر قرار می گیرد . ولی اگر مقدار آن بر روی inset باشد ، سایه در پشت عنصر و ظاهرا درون خود آن قرار می گیرد .

پشتیبانی در مرورگر های مختلف :

این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه ۹ به بعد ، مرورگر فایرفاکس از نسخه ۴ به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند .

مثال :

اضافه کردن سایه به المنت Div

 

div {
box-shadow: -10px 10px 7px #A5A5A5;
}

div {
box-shadow: 10px 10px 5px #888888;
}

در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم .

مثال ۱ : در مثال اول یک تگ < div > داریم که برای آن یک سایه ایجاد کرده ایم . برای سایه این عنصر ، فقط سه پارامتر های v-shadow , h-shadow و color که تعیین کننده فاصله سایه از عنصر و رنگ آن است را تعیین کرده ایم . در حالت اول مقادیر فاصله مثبت و در حالت دوم منفی دز نظر گرفته شده است . به تفاوت ها و پشتیانی مرورگر خود دقت کنید .

< 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>

مثال ۲: در مثال دوم ، مثال اول را بازنویسی کرده ایم با این تفاوت که در حالت ۲ برای پارامتر blur و spread نیز مقدار تعیین کرده ایم . مقدار دهی پارامتر blur باعث مه آلوده شدن سایه و نیز مقدار دهی پارامتر speard باعث تغییر اندازه سایه شده است .

< 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>

مثال ۳: در مثال سوم ، باز هم مثال اول را بازنویسی کرده ایم با این تفاوت که پارامتر inset را مقدار دهی کرده و به نشان دادن تفاوت دو مقدار متفاوت این پارامتر پردخته ایم :

< html >
  < head >
    < style >
div
{
width: 200px ;
background-color: blue ;
box-shadow: 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 ;
box-shadow: 10px 10px 10px 5px brown inset ;
}
< /style >

  </head>
<body>
    < div >   box-shadow 2 example   < /div >
</body>
</html>

QR Code For: آموزش box-shadow در css3

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.