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

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));
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.