CSSCSS متقدم Advancedالموسوعة

59- عكس صورة باستخدام CSS

في هذا الفصل، ستتعلم كيفية عكس صورة باستخدام خاصية CSS.

عكس صورة باستخدام CSS

خاصية box-reflect تستخدم لإنشاء انعكاس للصورة.

يمكن أن تأخذ قيمة خاصية box-reflect إحدى القيم التالية: أسفل (below)، أعلى (above)، يسار (left)، أو يمين (right).

دعم المتصفحات

يوضح الجدول إصدار المتصفح الأول الذي يدعم الخاصية بشكل كامل.

تشير الأرقام التي تلي -webkit- إلى إصدار المتصفح الأول الذي عمل مع البادئة -webkit-.

خاصيةدعم أصليدعم Webkit
box-reflect4.0-webkit-79.0

ملحوظة: لا يدعم Internet Explorer و Edge الخاصية box-reflect.tunesharemore_vert


أمثلة على عكس الصور باستخدام CSS

مثال 1: عكس الصورة أسفلها

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

مثال 2: عكس الصورة على يمينها

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

إزاحة انعكاس CSS

لتحديد المسافة بين الصورة والانعكاس، أضف قيمة المسافة إلى خاصية box-reflect.

مثال 3: عكس الصورة أسفلها مع فجوة 20px

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

انعكاس مع تدرج لوني CSS

يمكننا أيضًا إنشاء تأثير تلاشي على الانعكاس.

مثال 4: إنشاء تأثير تلاشي على الانعكاس

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

ملحوظة: لا يُعد استخدام خاصية -webkit-box-reflect حاليًا أفضل الممارسات لأنها خاصية خاصة بمتصفح WebKit وليست معيار CSS رسمي. من الأفضل استخدام خاصية backdrop-filter لتحقيق تأثيرات انعكاس حديثة ومدعومة على نطاق أوسع من المتصفحات.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى