سورس برنامه نویسی ، آموزش ، قالب وردپرس ، اسکریپت ، گرافیک ، آموزش کاربردی، دانلود رایگان ، قالب

تبليغات شما در داده باران
تبلیغات در داده باران

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

سایه انداختن برای کادرها و جعبه ها در سایت توسط CSSReviewed by داده باران on Nov 7Rating:

در ادامه مطلب همراه ما باشید

استفاده از افکت هایی نظیر سایه انداختن برای عناصر 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 که نباید مرتکب شوید

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

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

سایه انداختن داخل عنصر 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;
}

لينك كوتاه اين مطلب : http://www.dadebaran.ir/?p=1013

رمز فايل : DADEBARAN.IR




تبلیغات در داده باران
ارسال دیدگاه

قبل از نوشتن دیدگاه به نکات زیر توجه کنید:
    » نظراتی که با تایپ فارسی نباشند تایید نخواهند شد
    » نظرات تبلیغاتی اسپم محسوب میشوند و IP شخص مسدود خواهد شد.

پاسخ دهید

نکته: نظر شما در انتظار بررسی است و پس از تایید مدیریت در سایت نمایش داده میشود..