PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : قرار دادن Box-Shadow به سبکی جدید .



Arianismmm
2012/07/09, 03:40 PM
درود .
اگر Apple Fans باشید میدونید که اپل در وبسایت خودش در زیر بعضی قسمت های سایت از یک Box-Shadow جذاب استفاده میکنه ٬ که حیلی هم طرفدار داره ...

در این تاپیک آموزش قرار دادن اون Box-Shadow رو خواهید آموخت ...

فرض کنید یک باکس دارید به این صورت :

http://up.vbiran.ir/images/8dy84omhesmnn1n1nuke.png (http://up.vbiran.ir/)

که کد هاش به این صورت هست :




<head>
<style>body { background:#fff;}.wrap { position:absolute; background:#C03; color:#FFF; text-align:center; font-size:30px; font-weight:bold; text-shadow: 0px 1px 1px #000; width:500px; height:100px;border-radius:5px;-webkit-box-shadow:#000 0 12px 10px -9px; -moz-box-shadow:#000 0 12px 10px -9px; box-shadow:#000 0 12px 10px -9px; }</style></head><body><div class="wrap">Hi Test !</div></body></html>}

با اضافه کردن این کد به آخر قسمت کد های css همچین box-shadow'ای خواهید داشت ....



-webkit-box-shadow:#000 0 12px 10px -9px;
-moz-box-shadow:#000 0 12px 10px -9px;
box-shadow:#000 0 12px 10px -9px;


http://up.vbiran.ir/images/ovyoeq2e5bkxy7o0d11c.png (http://up.vbiran.ir/)

منبع : وی بی ایران