سایه انداختن برای کادرها و جعبه ها در سایت توسط CSS

استفاده از افکت هایی نظیر سایه انداختن برای عناصر HTML و یا گرد کردن گوشه باکس ها در اکثر موارد زیبایی سایت را دوچندان خواهد کرد. در گذشته های نه چندان دور، هنگامی که این نوع جلوه های زیبا در مرورگرها پشتیانی نمی شد، با وجود اینکه سرعت اینترنت قابل مقایسه با امروز نبود، طراحان وب سایت تلاش می کردند با استفاده از تصویر اینگونه افکت ها را به پروژه خود بیافزایند .اما اکنون تنها با چند خط کد بدون کاهش سرعت و یا افزایش حجم سایت، می توانید وب سایتی زیبا طراحی کنید. به یاد داشته باشید پرداختن به جزئیات یکی از نکات مهم در طراحی حرفه ای وب سایت است.

سایه انداختن بیرون عنصر html

برای سایه انداختن در حاشیه و لبه بیرونی کادری که با عنصری مثل div ساخته شده است، از مجموعه دستورات زیر استفاده کنید:

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}


محل سایه در محور افقی: پارامتر اول در هر سه خط دستور مربوط به محل قرار گرفتن سایه در محور افقی است. بنابراین چنانچه مقداری مثبت داشته باشد به همان میزان سایه به سمت راست و چنانچه مقدار منفی داشته باشد به سمت چپ خواهد رفت. در این مثال سایه 5 پیکسل به سمت راست رفته است.

محل سایه در محور عمودی: پارامتر دوم مربوط به قرارگیری سایه در محور عمودی است و چنانچه این مقدار منفی وارد شود، سایه کادر در بالای آن ظاهر خواهد شد و چنانچه مثبت باشد سایه در زیر عنصور مورد نظر نشان داده میشود. در این مثال سایه 5 پیکسل زیر کادر انداخته شده است.

میزان تار بودن سایه : پارامتر سوم میزان تاری و محو شدن سایه را نشان میدهد. اگر این مقدار 0 باشد، لبه های سایه کاملا مشخص و بُرنده خواهد بود و هرچه این عدد بزرگتر شود سایه تاری بیشتر خواهد داشت.

>رنگ سایه : در پارامتر آخر رنگ سایه را مشخص می کنیم.

نتیجه دستورات مثال فوق به صورت زیر است:

سایه با css

سایه انداختن داخل عنصر html

مجموعه دستورات زیر موجب پدیدار شدن سایه در داخل کادر خواهند شد. شما میتوانید این دستورات را برای هر عنصری که خاصیت block داشته باشد بکار ببرید.

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

پارامترهای این دستور نیز مانند دستور درج سایه در خارج از div می باشد. نتیجه اجرای دستورات فوق در وبسایت به صورت زیر خواهد بود:

سایه انداختن در سایت با css

نمایش سایه در اینترنت اکسپلور

سایه های ایجاد شده توسط دستورات فوق در تمامی مرورگرهای مدرن نظیر کروم، فایرفاکس، اپرا و ... به درستی نشان داده خواهند شد. اما برای اینکه در اینترنت اکسپلورر نیز سایه ها نشان داده شوند نیاز به دستورات زیر دارید:

کد HTML

<div class="shadow1">
        <div class="content">
                Box-shadowed element
        </div>
</div>

 

کد CSS

.shadow1 {
        margin: 40px;
        background-color: rgb(68,68,68); /* Needed for IEs */

        -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
        -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
        box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
        -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
        zoom: 1;
}

.shadow1 .content {
        position: relative; /* This protects the inner element from being blurred */
        padding: 100px;
        background-color: #DDD;
}
  • رمز فایل فشرده: www.websiteha.com
  • حجم فایل: 1.5kb

نظرات (1) -

  • درف

    09/30/1393 09:11:16 ب.ظ | پاسخ به این نظر

    سلام استاد این کد را کجا قرار بدیم ننوشتید تو فایل استیل یا فونکشن پی اچ پی
    پ.ن:من از وردپرس استفاده میکنم
    ممنون میشم لطف کنید جواب بدین

Loading