٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش بازتاب تصویر CSS

در این فصل شما یاد می گیرید که چگونه یک تصویر را منعکس کنید.   بازتاب تصویر CSS از این box-reflectویژگی برای ایجاد بازتاب تصویر استفاده می شود. ارزش box-reflectدارایی می تواند: below، above، left، یا right. پشتیبانی مرورگر اعداد موجود در جدول اولین نسخه مرورگر…

محمد یوسفی

13 جولای 2021

در این فصل شما یاد می گیرید که چگونه یک تصویر را منعکس کنید.

 


بازتاب تصویر CSS

از این box-reflectویژگی برای ایجاد بازتاب تصویر استفاده می شود.

ارزش box-reflectدارایی می تواند: below، above، left، یا right.


پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از ویژگی پشتیبانی می کند.

اعداد و به دنبال -webkit- اولین نسخه را مشخص می کنند که با یک پیشوند کار می کند.


مثال ها

مثال

در اینجا می خواهیم انعکاس زیر تصویر را انجام دهیم:

img {
  -webkit-box-reflect: below;
}

مثال

در اینجا می خواهیم انعکاس در سمت راست تصویر را انجام دهیم:

img {
  -webkit-box-reflect: right;
}

جبران بازتاب CSS

برای تعیین فاصله بین تصویر و بازتاب ، اندازه شکاف را به box-reflectخاصیت اضافه کنید.

مثال

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

img {
  -webkit-box-reflect: below 20px;
}

بازتاب CSS با گرادیان

همچنین می توانیم یک اثر محو در انعکاس ایجاد کنیم.

مثال

یک اثر محو شدن در بازتاب ایجاد کنید:

img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها