در این فصل شما یاد می گیرید که چگونه یک تصویر را منعکس کنید.
بازتاب تصویر 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));
}
