انعكاس صورة CSS
في هذا الفصل سوف تتعلم كيفية عكس الصورة.
انعكاسات صور CSS
يتم box-reflect
استخدام الخاصية لإنشاء انعكاس للصورة.
يمكن أن تكون قيمة box-reflect
الخاصية: below
، above
أو
left
، أو right
.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
الأرقام متبوعة بـ -webkit- تحدد الإصدار الأول الذي يعمل بالبادئة.
Property | |||||
---|---|---|---|---|---|
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;
}
إزاحة انعكاس 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));
}