خطوط حاشیه در 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 به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد . در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر میزان فاصله سایه از لبه بالایی عنصر را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی عنصر ( به سمت پایین ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی عنصر قرار می گیرد .
h-shadow
این پارامتر میزان فاصله سایه از لبه سمت چپ عنصر را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ عنصر ( به سمت چپ ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه در سمت چپ لبه چپ عنصر قرار می گیرد .
h-shadow
این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل 10px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد .
تعیین این پارامتر اختیاری است .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .
blur
این پارامتر اندازه سایه را بر حسب واحد پیکسل px تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه تعیین نشود ، اندازه سایه دقیقا برابر با اندازه عنصر خواهد بود .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .
spread
این پارامتر رنگ سایه را تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد بود .
color
پارامتر inset تعیین می کند که آیا سایه با فاصله از عنصر قرار گیرد ، یا در پشت عنصر و بدون فاصله عمودی و افقی از آن باشد . مقدار پیش فرض این پارامتر خالی ( Null ) است .
تعیین این پارامتر اختیاری است . چنانچه مقدار آن خالی باشد ، سایه با فاصله عمودی و افقی از عنصر قرار می گیرد . ولی اگر مقدار آن بر روی inset باشد ، سایه در پشت عنصر و ظاهرا درون خود آن قرار می گیرد .
inset


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

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



مثال های عملی :

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

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

Example
حالت 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 باعث تغییر اندازه سایه شده است .

Example
حالت 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 را مقدار دهی کرده و به نشان دادن تفاوت دو مقدار متفاوت این پارامتر پردخته ایم :

Example
حالت 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


خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟