CSS3: خاصیت box-shadow
با CSS3 مي توانيم براي باكس ها در طراحي وب سایت سايه ايجاد كنيم اين كار با خاصيت box-shadow امكان پذير است ديگر نيازي به گذاشتن تصاويري كه با فوتوشاپ سايه سازي شدند نيست البته این امر سئو سایت را در گذشته کاهش می داد اما حال با چند كد به راحتي مي توانيد سايه هاي خود را بسازيد اين خاصيت جديد CSS3 در تمامي مرورگرهاي جديد به خوبي پشتيباني مي شود.
دستور كلي ايجاد سايه براي باكس ها به اين صورت است
box-shadow: [horizontal offset] [vertical offset]
[blur amount] [spread radius] [color] [inset]
مقدار اول و دوم فاصله سايه را به صورت افقي و عمودي تعيين مي كند اين دو مقدارعدد منفي هم مي پذيرند.
مقدار سوم مقدار محوي سايه را مشخص مي كند.
مقدار چهارم شعاع سايه و ميزان پخش شدن سايه را مشخص مي كند.
مقدار پنجم رنگ سايه را مشخص مي كند.
مقدار آخر اگر تعيين شود سايه به صورت داخلي ايجاد مي شود.
مثال يك box-shadow
box-shadow:10px 10px 0px #252525; -webkit-box-shadow:10px 10px 0px #252525; -moz-box-shadow: 10px 10px 0px #252525;
مثال دوم box-shadow
box-shadow:-10px -10px 0px #252525; -webkit-box-shadow:-10px -10px 0px #252525; -moz-box-shadow: -10px -10px 0px #252525;
box-shadow مثال سوم
box-shadow: 10px 10px 0px 5px/* spread */ #252525; -webkit-box-shadow: 10px 10px 0px 5px/* spread */ #252525; -moz-box-shadow: 10px 10px 0px 5px/* spread */ #252525;
مثال چهارمbox-shadow
box-shadow:0px 0px 8px #252525; -webkit-box-shadow:0px 0px 8px #252525; -moz-box-shadow: 0px 0px 8px #252525;
مثال پنجمbox-shadow
box-shadow: inset 10px 10px 3px #252525; -webkit-box-shadow: inset 10px 10px 3px #252525; -moz-box-shadow: inset 10px 10px 3px #252525;
مثال ششم box-shadow
box-shadow: inset 10px 10px 0px #252525, 8px 8px 8px #ff0000; -webkit-box-shadow: inset 10px 10px 0px #252525, 8px 8px 8px #ff0000; -moz-box-shadow: inset 10px 10px 0px #252525, 8px 8px 8px #ff0000;
مثال هفتمbox-shadow
box-shadow:3px 3px 0px #cccccc, 7px 7px 0px #bbbbbb, 11px 11px 0px #aaaaaa; -moz-box-shadow: 3px 3px 0px #cccccc, 7px 7px 0px #bbbbbb, 11px 11px 0px #aaaaaa; -webkit-box-shadow:3px 3px 0px #cccccc, 7px 7px 0px #bbbbbb, 11px 11px 0px #aaaaaa;
هیچ نظری موجود نیست:
ارسال یک نظر