آموزش سایه دادن به عناصر در css

cssیکی از افکت هایی که در طراحی صفحات وب به طراح کمک می کند تا طرحی زیبا، جالب و خاص داشته باشد، سایه زدن به عناصر و اشیا در صفحه است. در پست آموزش سایه دادن به عناصر در css  به این موضوع می پردازیم که چگونه می توان توسط کدهای سی اس اس (CSS) به اشیا و المان ها سایه داد.

برای مشاهده متن کامل  آموزش سایه دادن به عناصر در css به ادامه مطلب مراجعه نمایید.

 آموزش سایه دادن به عناصر در css

یکی از افکت های جذاب در طراحی ها، سایه است. معمولاً طراحان برای پیاده شازی این افکت، از تصاویر کمک می گیرند، به گونه ای که برای سایه ها از تصاویر استفاده می کنند. که این کار طرج را جذاب کرده اما حجم صفحه را بالا برده و کاربر را به خاطر کاهش سزعت در بارگذاری ناراضی می کند.

حال می خواهیم به  آموزش سایه دادن به عناصر در css بپردازیم و نشان دهیم که این کار چطور امکان پذیر است.

به کد ها نگاه کنید. خط اول و دوم مانند هم است فقط دو موتور گرافیکی مختلف را نشان می دهد. و به این خاط نوشته شده است که در مرورگرهایی که از این موتورها استفاده می کنند قابل پردازش باشد. (سعی میشود در بخش های بعد درباره ی این موتور های گرافیکی و چند نوع دیگر از آن ها صحبت کنیم.)

سایه زدن بخش خارجی عنصر در css:

-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;

پارامتر اول در سه خط، محل سایه در محور افقی را مشخص میکند .

پارامتر دوم در سه خط، محل سایه در محور عمدی را مشخص میکند.

پارامتر سوم در سه خط، میزان تار بودن سایه را مشخص میکند.

سایه زدن بخش داخلی عنصر در css:

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

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

برای کسب اطلاعات بیشتر درباره css میتوانید بهw3, w3school و wikipedia مراجعه نمایید.