/ در آموزش طراحی وب, آموزش ها, اشتراک رایگان / توسط
آخرین زمان ویرایش:

سایه انداختن برای کادرها و جعبه ها در سایت توسط 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;
}

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

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

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

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

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

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

کد 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;
}

نوشته های مشابه

سورس نرم افزار ارسال پیام کوتاه

دانلود سورس در ادامه مطلب (بیشتر…)

آموزش PHP (پی اچ پی) – قسمت ششم

در ادامه مطلب همراه ما باشید (بیشتر…)

 کانال تلگرام داده باران شارژ آنلاین

نظری بدهید

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