العنصر: كيفية إنشاء تأثير انعكاس زجاجي

هل سبق لك أن أردت إنشاء تأثير انعكاس زجاجي لصورك في WordPress؟ في هذا البرنامج التعليمي الجديد، سنوضح لك كيفية القيام بذلك باستخدام أداة إنشاء الصفحات القوية Elementor.

يجب أن تعلم بالفعل أنه في هذا البرنامج التعليمي ستحتاج إلى الإصدار الاحترافي من Elementor، لأننا سنستخدم كودًا مخصصًا.

إذا كنت لا تفهم ما نريد تحقيقه في هذا البرنامج التعليمي ، شاهد الفيديو التالي:

ثم عد إلى سبب وجودنا هنا.

انظر أيضا: كيفية إنشاء عنوان متدرج باستخدام Elementor

دعنا ننشئ قسمًا جديدًا من ثلاثة أعمدة ، ثم نعدل ملف الإستكبار في ارتفاع الحد الأدنى و أدنى ارتفاع دعنا نضغط VH، ثم اضبط شريط التمرير على 100

في علامة التبويب الطراز، حدد لون أسود ل الخلفية

اقرأ أيضا: كيفية إنشاء قائمة منسدلة جميلة باستخدام Elementor

دعنا ننزلق القطعة الصورة في العمود الأوسط ، ثم ابحث في مكتبتك عن الصورة التي تريد عكسها وإدراجها هناك.

في علامة التبويب متقدم، هيا ندخل CSS مخصصة والصق الكود التالي:

/*effet de réflexion */
selector{
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, rgba(0,0,0,.5));
}

في هذا الوقت سترى الانعكاس يظهر تحت الصورة.

بعد ذلك، انسخ والصق الكود التالي بعد الكود السابق، والذي سيقوم بتدوير الصورة عند تحريك مؤشر الماوس فوقها.

/*Effet de Rotation */
selector{
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: perspective(800px) rotateY(20deg);
            transform: perspective(800px) rotateY(20deg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
selector:hover{
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

ستكون النتيجة كالتالي:

وهكذا يمكنك الآن إنشاء تأثير انعكاس الزجاج لصورك على WordPress باستخدام Elementor Page Builder

احصل على Elementor Pro الآن!

خاتمة

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

ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...