در ادامه مطلب همراه ما باشید
استفاده از افکت هایی نظیر سایه انداختن برای عناصر HTML و یا گرد کردن گوشه باکس ها در اکثر موارد زیبایی سایت را دوچندان خواهد کرد. در گذشته های نه چندان دور، هنگامی که این نوع جلوه های زیبا در مرورگرها پشتیانی نمی شد، با وجود اینکه سرعت اینترنت قابل مقایسه با امروز نبود، طراحان وب سایت تلاش می کردند با استفاده از تصویر اینگونه افکت ها را به پروژه خود بیافزایند .اما اکنون تنها با چند خط کد بدون کاهش سرعت و یا افزایش حجم سایت، می توانید وب سایتی زیبا طراحی کنید. به یاد داشته باشید پرداختن به جزئیات یکی از نکات مهم در طراحی حرفه ای وب سایت است.
سایه انداختن بیرون عنصر html
برای سایه انداختن در حاشیه و لبه بیرونی کادری که با عنصری مثل div ساخته شده است، از مجموعه دستورات زیر استفاده کنید:
.shadow { |
محل سایه در محور افقی: پارامتر اول در هر سه خط دستور مربوط به محل قرار گرفتن سایه در محور افقی است. بنابراین چنانچه مقداری مثبت داشته باشد به همان میزان سایه به سمت راست و چنانچه مقدار منفی داشته باشد به سمت چپ خواهد رفت. در این مثال سایه ۵ پیکسل به سمت راست رفته است.
محل سایه در محور عمودی: پارامتر دوم مربوط به قرارگیری سایه در محور عمودی است و چنانچه این مقدار منفی وارد شود، سایه کادر در بالای آن ظاهر خواهد شد و چنانچه مثبت باشد سایه در زیر عنصور مورد نظر نشان داده میشود. در این مثال سایه ۵ پیکسل زیر کادر انداخته شده است.
میزان تار بودن سایه : پارامتر سوم میزان تاری و محو شدن سایه را نشان میدهد. اگر این مقدار ۰ باشد، لبه های سایه کاملا مشخص و بُرنده خواهد بود و هرچه این عدد بزرگتر شود سایه تاری بیشتر خواهد داشت.
>رنگ سایه : در پارامتر آخر رنگ سایه را مشخص می کنیم.
نتیجه دستورات مثال فوق به صورت زیر است:
سایه انداختن داخل عنصر html
مجموعه دستورات زیر موجب پدیدار شدن سایه در داخل کادر خواهند شد. شما میتوانید این دستورات را برای هر عنصری که خاصیت block داشته باشد بکار ببرید.
.shadow { |
پارامترهای این دستور نیز مانند دستور درج سایه در خارج از div می باشد. نتیجه اجرای دستورات فوق در وبسایت به صورت زیر خواهد بود:
نمایش سایه در اینترنت اکسپلور
سایه های ایجاد شده توسط دستورات فوق در تمامی مرورگرهای مدرن نظیر کروم، فایرفاکس، اپرا و … به درستی نشان داده خواهند شد. اما برای اینکه در اینترنت اکسپلورر نیز سایه ها نشان داده شوند نیاز به دستورات زیر دارید:
کد HTML
<div class=”shadow1″> |
کد CSS
.shadow1 { |