نوشتن نظر کلیک کنید

CSS – بازتاب تصویر (Image Reflection)

آخرین بروزرسانی: ۱۸ مهر ۱۴۰۳

در این بخش یاد می‌گیرید که چگونه یک تصویر را با استفاده از CSS بازتاب دهید.

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

خاصیت box-reflect برای ایجاد بازتاب تصویر استفاده می‌شود.

مقدار خاصیت box-reflect می‌تواند یکی از موارد زیر باشد: below (پایین)، above (بالا)، left (چپ) یا right (راست).

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

خاصیت	Chrome	Firefox	Safari	Edge	Opera
`box-reflect`	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

مثال ۱: بازتاب در زیر تصویر:

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

مثال ۲: بازتاب در سمت راست تصویر:

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

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

مثال: بازتاب در زیر تصویر با فاصله ۲۰ پیکسل:

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

می‌توانیم همچنین اثر محو شدن (fade-out) را روی بازتاب ایجاد کنیم.

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

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

با استفاده از این تکنیک‌ها، می‌توانید به تصاویر خود بازتاب‌هایی اضافه کنید که جذابیت بصری بیشتری به طراحی شما ببخشند.