میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Reflection در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش Image Reflection در CSS با من همراه باشید.

منظور از Image Reflection یعنی بازتاب تصویر می باشد یعنی یک تصویر را در کنار خودش بازتاب داده و نمایش دهیم

Capture 15

با استفاده از box-reflect  برای بازتاب تصویر استفاده می کنیم

که مقدار ویژگیbox-reflect می تواند یکی از مقادیر زیر باشد

below

above

 left

right

 

مثال ۱ :

 

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

با استفاده از مثال بالا تصویر بازتاب شده در زیر همان تصویر نمایان خواهد شد

 

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

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

در مثال بالا تصویر بازتابی در سمت راست تصویر اصلی نمایان خواهد شد

 

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

 

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

 

همچنین می توانیم برای تصویر بازتابی مقدار شفافیت نیز اعمال کنیم

 

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

Capture 16

 

 


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

مرورگرchromeedgefriefoxsafariopera
box-reflect۴٫۰ -webkit-۷۹٫۰ -webkit-Not supported۴٫۰ -webkit-۱۵٫۰ -webkit-

 

 


امیدواریم آموزش Image Reflection در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssreflection cssreflection css imageReflection در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟