+98 21 888 10 819
شبکه دی

ورود اعضاء

شناسه کاربری:
رمز عبور:

مشتری خود را
تنها نگذارید

نرم افزار جامع
پشتیبانی هما

اطلاعات بیشتر

کد: 1506 تاریخ انتشار: 1392/12/23
ترفند CSS - آموزش ساخت حالت کاغذی در طراحی وب سایت

ترفند CSS - آموزش ساخت حالت کاغذی با Box-Shadow در طراحی وب سایت


در این مقاله قصد داریم تا شما را با ساخت حالت کاغذی با استفاده از Box-shadow به صورت زیر آشنا کنیم
شبکه دی , منتخب بزرگان

برای ساخت این افکت ساده و خلاق به صورت زیر عمل کنید :

ابتدا یک Div با width , height بسازید و به آن Background-color دلخواه بدهید .

سپس box-show را اضافه کنید و نکته اینجاست که شما باید در چند خط به Box-shadow سایه اضافه کنید به این صورت که در خط اول :

0px 1px 1px rgba(0, 0, 0,15)

0 اول برای سایه افقی بوده 1 بعدی برای سایه عمودی و 1 سوم نیز برای میزان تاری یا Blur می باشد

به همین صورت چند لایه سایه بوجود می آید که افکت کاغذی به Div شما می دهد .

دستور کلی :

box-shadow: 0px 1px 1px rgba(0, 0, 0,15),
0px 10px 0 -5px #666,
0px 10px 1px -4px rgba(0, 0, 0,15),
0px 20px 0 -10px #666,
0px 20px 1px -9px rgba(0, 0, 0,15);
-o-box-shadow:
0px 1px 1px rgba(0, 0, 0,15),
0px 10px 0 -5px #666,
0px 10px 1px -4px rgba(0, 0, 0,15),
0px 20px 0 -10px #666,
0px 20px 1px -9px rgba(0, 0, 0,15);
-ms-box-shadow:
0px 1px 1px rgba(0, 0, 0,15),
0px 10px 0 -5px #666,
0px 10px 1px -4px rgba(0, 0, 0,15),
0px 20px 0 -10px #666,
0px 20px 1px -9px rgba(0, 0, 0,15);
-moz-box-shadow:
0px 1px 1px rgba(0, 0, 0,15),
0px 10px 0 -5px #666,
0px 10px 1px -4px rgba(0, 0, 0,15),
0px 20px 0 -10px #666,
0px 20px 1px -9px rgba(0, 0, 0,15);
-webkit-box-shadow:
0px 1px 1px rgba(0, 0, 0,15),
0px 10px 0 -5px #666,
0px 10px 1px -4px rgba(0, 0, 0,15),
0px 20px 0 -10px #666,
0px 20px 1px -9px rgba(0, 0, 0,15);

-o- , -moz- , -webkit- , -ms- برای نشان دادن این افکت در مرورگر های مختلف است ( اکسپلورر , فایرفاکس , اپرا , کروم ) می باشد.
  • نویسنده: آرش یزدانی
منبع: دی تلکام
آدرس منبع: http://day.ir/articles/webdesign

تمامي كالاها و خدمات اين فروشگاه، حسب مورد داراي مجوزهاي لازم از مراجع مربوطه مي‌باشند و فعاليت‌هاي اين سايت تابع قوانين و مقررات جمهوري اسلامي ايران است.
© کلیه حقوق مادی و معنوی این سایت به دی تلکام تعلق دارد .