انعكاس صورة CSS3 [نصائح CSS3]

حتى الآن ، ناقشنا الكثير من العقارات الجديدة في CSS3. علاوة على ذلك ، هناك بالفعل بعض الخصائص الأخرى التي لا يتم تضمينها حاليًا في المواصفات الرسمية لـ CSS3 والتي تستحق التجربة ، أحدها هو مربع تعكس الممتلكات التي بدأها بكت. يمكن أن تنعكس هذه الخاصية على الكائنات المحددة.

الانعكاس الأساسي

التنفيذ الأساسي بديهي للغاية ؛ دعنا نقول ، نحن نريد انعكاس أسفل الكائن الحقيقي. يمكننا الكتابة:

 img -webkit-box-reflect: أدناه ؛  

يوضح هذا المثال كيف نعكس صورة أدناه (الموضع) الكائن. ولكن ، في هذه الحالة ، يمكننا أيضا عقد انعكاس ل حق, اليسار, و في الاعلى.

انعكاس الأوفست

الأوفست يستخدم لتحديد الفجوة بين الانعكاس والكائن الحقيقي المنعكس. دعونا نرى مقتطف الشفرة أدناه ؛

 img -webkit-box-reflect: أدناه 10 بكسل ؛  

في الكود أعلاه ، قمنا بفصل الانعكاس عن الكائن الحقيقي بواسطة 10px.

• عرض تجريبي

اخفاء مع التدرجات

تأثير الانعكاس الذي نراه عادة هو التلاشي في الأسفل وعرض نصف الكائن الحقيقي أو أقل فقط. لتكرار هذا النوع من التأثير ، يمكننا تطبيق التدرجات CSS3 لإخفاء الكائن ، مثل ذلك ؛

 -webkit-box-reflect: أدناه 0px - تدرج الويب - الويب (خطي ، أعلى اليسار ، أسفل اليسار ، من (شفاف) ، إلى (rgba (250 ، 250 ، 250 ، 0.1))) ؛ 

سيؤدي هذا الرمز إلى العرض التقديمي التالي ؛

يمكننا أيضا استخدام اللون وقفة للتحكم في التحولات وجعل الانعكاس يبدو أجمل:

 img -webkit-box-reflect: أدناه 0px - التدرج اللوني على الويب (الخطي ، أعلى اليسار ، أسفل اليسار ، من (شفاف) ، توقف اللون (70٪ ، شفاف) ، إلى (rgba (250 ، 250 ، 250 ، 0.1 )))؛  

• عرض تجريبي

بدائل لفايرفوكس

ومع ذلك ، تعمل هذه الخاصية في متصفحات Webkit فقط (أي Safari و Chrome) في الوقت الحالي. لتقديم نفس التأثير في Firefox ، فأنت بحاجة إلى مسار آخر: استخدام -MOZ عنصر () وظيفة. هذه الوظيفة ستنشئ أو تنسخ المحتوى من عناصر HTML محددة. دعنا نلقي نظرة على المثال التالي ؛

لدينا صورة ملفوفة في

مع MOZ-تعكس هوية شخصية؛

و ، لعقد انعكاس ، سوف نستخدم :بعد شبه عنصر, على النحو التالي؛

 # moz-reflect: بعد content: ""؛ العرض محجوب؛ الخلفية: عنصر -moz (# moz-reflect) عدم التكرار. العرض: السيارات ؛ الارتفاع: 375 بكسل ؛ الهامش السفلي: 100 بكسل ؛ -moz-convert: scaleY (-1) ؛  

ال -MOZ-تحويل مع مقياس سلبي يستخدم لقلب الكائن الذي تم إنشاؤه رأسا على عقب. أيضا ، تأكد من ارتفاع دقيقة بما يكفي للكائن الحقيقي ارتفاع لتجنب خطوط اضافية لا لزوم لها لتحديد المواقع انعكاس.

لسوء الحظ ، لا توجد طريقة سهلة لإنشاء لطيف تأثير انعكاس في فايرفوكس باستخدام هذه الممارسة. الكود أعلاه سيخلق ببساطة الانعكاس ، دون تأثير التلاشي.

• عرض تجريبي
• تحميل المصدر

مزيد من المراجع

• سفاري المغلق دليل الآثار البصرية
• موزيلا عنصر () الوثائق