كيفية استخدام Box Shadows كخلفيات تمرير على التمرير
نشرت: 2019-01-30كل أسبوع ، نقدم لك حزم تخطيط Divi جديدة ومجانية يمكنك استخدامها لمشروعك التالي. بالنسبة لإحدى حزم التخطيط ، نشارك أيضًا حالة استخدام ستساعدك في نقل موقع الويب الخاص بك إلى المستوى التالي.
هذا الأسبوع ، كجزء من مبادرة تصميم Divi المستمرة ، سوف نوضح لك كيفية استخدام ظلال الصندوق كخلفيات انتقاد عند التمرير. سنتعامل مع ثلاثة أمثلة مختلفة تبدو مذهلة على الصفحة الرئيسية لـ Personal Stylist Layout Pack ولكن الاحتمالات التي لديك لا حصر لها حقًا. سنقوم بإعادة إنشاء كل واحدة من الخلفيات السريعة خطوة بخطوة باستخدام خيارات Divi المدمجة فقط.
دعنا نذهب اليها!
معاينة
قبل أن نتعمق في البرنامج التعليمي وأمثلة مختلفة ، دعنا نلقي نظرة على النتيجة.
مثال 1
المثال رقم 2
المثال رقم 3
قم بتحميل الصفحة الرئيسية لحزمة تخطيط المصمم الشخصي إلى صفحة جديدة
ابدأ بإضافة صفحة جديدة إلى موقع الويب الخاص بك وتحميل تخطيط الصفحة الرئيسية لـ Personal Stylist. على الرغم من أننا سنستخدم هذا التصميم لإنجاز جميع الأمثلة الثلاثة الموضحة أعلاه ، إلا أنه يمكنك استخدام هذا الأسلوب لأي نوع من التخطيط أو موقع الويب الذي تعمل عليه.
أعد إنشاء المثال رقم 1
لون ظل مربع الزر
لنبدأ في إعادة إنشاء المثال الأول! هذا المثال يساعدك على إبراز قسم الأبطال. أول شيء عليك القيام به هو فتح وحدة الأزرار التي يمكنك العثور عليها في العمود الأول وتغيير لون ظل الصندوق. نحن نقوم بذلك للتأكد من أن اللون يسير بشكل جيد مع ظل الصندوق الوردي الذي سنضيفه عند التمرير.
إعدادات القسم
لون الخلفية الافتراضي
تابع عن طريق فتح إعدادات القسم. تأكد من بقاء لون الخلفية الافتراضي كما هو.
- لون الخلفية: # 2a2a2a
لون الخلفية تحوم
تغيير تحوم الخلفية.
- لون الخلفية: #ffffff
ظل المربع الافتراضي
تابع عن طريق إضافة Box Shadow افتراضي إلى القسم.
- مربع الظل الوضع الأفقي: 0 بكسل
- مربع الظل الوضع الرأسي: 0 بكسل
- لون الظل: rgba (255،137،159،0.82)
- موضع ظل المربع: الظل الداخلي
تحوم مربع الظل
تغيير الوضع الأفقي لمربع الظل. أضف أي قيمة للاختيار.
- مربع الظل الأفقي: 800 بكسل
إذا كنت تريد أن يظهر تأثير السحب من أعلى إلى أسفل ، يمكنك تغيير الوضع الرأسي لظل الصندوق بدلاً من ذلك.
- مربع الظل الرأسي: 650 بكسل
الانتقالات
أخيرًا وليس آخرًا ، قم بتقليل مدة الانتقال في علامة التبويب خيارات متقدمة لإنشاء انتقال سريع بين لون الخلفية وخلفية التمرير في ظل الصندوق.
- مدة الانتقال: 200 مللي ثانية
- منحنى سرعة الانتقال: سهولة
أعد إنشاء المثال رقم 2
تعديل الوحدة النمطية الأولى للنص
تحوم إعدادات النص
إلى المثال التالي! افتح وحدة النص التي يمكنك العثور عليها في العمود الأول وقم بتغيير لون النص عند التمرير.
- لون النص: فاتح
تحوم الحدود
تابع عن طريق تغيير لون الحد عند التمرير في علامة تبويب التصميم.
- لون الحدود: rgba (255،137،159،0.82)
ظل المربع الافتراضي
بعد ذلك ، انتقل إلى إعدادات ظل الصندوق وأضف ظل الصندوق الافتراضي.
- مربع الظل الوضع الأفقي: 0 بكسل
- مربع الظل الوضع الرأسي: 0 بكسل
- لون الظل: rgba (255،137،159،0.82)
- موضع ظل المربع: الظل الداخلي
تحوم مربع الظل
قم بتغيير الوضع الأفقي عند التمرير.
- مربع الظل الأفقي: 520 بكسل
الانتقالات
أخيرًا وليس آخرًا ، قم بزيادة مدة الانتقال في علامة التبويب "خيارات متقدمة" لإنشاء انتقال سلس.
- مدة الانتقال: 700 مللي ثانية
- منحنى سرعة الانتقال: سهولة
نسخ ولصق أنماط الوحدة النمطية إلى وحدة النص الثالثة
نحن نستخدم نفس أنماط الوحدة للوحدة النصية الثالثة أيضًا. لتوفير الوقت ، سنقوم ببساطة بنسخ أنماط الوحدة النمطية لأول وحدة نصية ولصقها في وحدة النص الثالثة.
تعديل وحدة النص الثانية
إعدادات النص
ومع ذلك ، فإن الوحدة النمطية الثانية للنص مختلفة قليلاً. افتح الوحدة وانتقل إلى إعدادات النص. الشيء الوحيد الذي عليك القيام به هناك هو تغيير لون النص عند التمرير.
- لون النص: فاتح
تحوم الحدود
تابع بالانتقال إلى إعدادات الحدود وتغيير لون الحدود عند المرور فوقها.
- لون الحدود: rgba (255،137،159،0.82)
ظل المربع الافتراضي
حان الوقت لإضافة خلفية انتقاد! ابدأ بإضافة ظل صندوق افتراضي باستخدام الإعدادات التالية:
- مربع الظل الوضع الأفقي: 0 بكسل
- مربع الظل الوضع الرأسي: 0 بكسل
- لون الظل: rgba (255،137،159،0.82)
- موضع ظل المربع: الظل الداخلي
تحوم مربع الظل
قم بتغيير الوضع الرأسي لمربع الظل عند التحويم.
- مربع الظل الرأسي: 500 بكسل
الانتقالات
أخيرًا وليس آخرًا ، قم بزيادة مدة الانتقال لوحدة النص هذه أيضًا.
- مدة الانتقال: 700 مللي ثانية
- منحنى سرعة الانتقال: سهولة
أعد إنشاء المثال رقم 3
تغيير إعدادات الصف
تحجيم
إلى المثال التالي والأخير! ابدأ بفتح إعدادات الصف وإجراء بعض التغييرات على إعدادات التحجيم.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض المزراب: 2
تباعد
تابع بإضافة بعض المساحة المتروكة المخصصة للصف أيضًا.
- الحشوة اليسرى: 10vw
- الحشوة اليمنى: 10vw
- العمود 2 ، الحشوة اليسرى: 15vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)
ظل المربع الافتراضي
بعد ذلك ، أضف ظل مربع افتراضي إلى الصف.
- مربع الظل الوضع الأفقي: 0 بكسل
- مربع الظل الوضع الرأسي: 0 بكسل
- لون الظل: # ff899f
- موضع ظل المربع: الظل الداخلي
تحوم مربع الظل
قم بتغيير الوضع الأفقي عند التمرير.
- مربع الظل الأفقي: 50 بكسل
الانتقالات
نقوم أيضًا بتغيير مدة النقل وتأخير النقل في علامة التبويب "خيارات متقدمة".
- مدة الانتقال: 1000 مللي ثانية
- تأخير الانتقال: 700 مللي ثانية
- منحنى سرعة الانتقال: سهولة
تغيير إعدادات القسم
إزالة التحجيم
بمجرد الانتهاء من تعديل إعدادات الصف ، امض قدمًا وافتح إعدادات القسم. انتقل إلى علامة تبويب التصميم وأعد ضبط العرض بالنقر بزر الماوس الأيمن والنقر فوق إعادة التعيين.
إزالة الحدود
افعل نفس الشيء لعرض الحد أيضًا.
ظل المربع الافتراضي
تابع بإضافة ظل صندوق افتراضي.
- مربع الظل الوضع الأفقي: 0 بكسل
- مربع الظل الوضع الرأسي: 0 بكسل
- لون الظل: # 2a2a2a
- موضع ظل المربع: الظل الداخلي
تحوم مربع الظل
قم بتغيير الوضع الأفقي لمربع الظل عند المرور فوق المؤشر.
- مربع الظل الأفقي: 60 بكسل
الانتقالات
ولإنهاء التصميم ، قم بزيادة مدة الانتقال في علامة التبويب "خيارات متقدمة".
- مدة الانتقال: 1000 مللي ثانية
معاينة
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على الأمثلة الثلاثة المختلفة التي أعدنا إنشائها خطوة بخطوة.
مثال 1
المثال رقم 2
المثال رقم 3
افكار اخيرة
في هذا المنشور ، أوضحنا لك كيفية استخدام ظلال الصندوق كخلفيات انتقاد مع خيارات Divi المدمجة فقط. هذا البرنامج التعليمي هو جزء من مبادرة تصميم Divi المستمرة حيث نحاول وضع شيء إضافي في صندوق الأدوات الخاص بك كل أسبوع. نأمل أن يلهمك هذا البرنامج التعليمي لاستخدام ظلال الصندوق بطريقة فريدة ومبتكرة. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!