در این بخش یاد میگیرید که چگونه یک تصویر را با استفاده از 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));
}با استفاده از این تکنیکها، میتوانید به تصاویر خود بازتابهایی اضافه کنید که جذابیت بصری بیشتری به طراحی شما ببخشند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام