2.1الخلفيات، التراكبات والتأثيرات
الأساسي في 30 ثانية
- خلفية الحاوية (تبويب النمط): لون صلب، تدرّج، صورة أو فيديو.
- النصّ على صورة يصير غير مقروء: ضَع تراكبًا (overlay شبه شفّاف) للحفاظ على التباين.
- التأثيرات: ظلال (box-shadow)، استدارة (border-radius)، حدود — باعتدال.
الخيط الناظم — نادية تُلبِس الشريط
تريد نادية شريطًا بصورة ورشة جميلة في الخلفية والعنوان فوقها. المشكلة: على الصورة الفاتحة، يختفي العنوان الأبيض. تضع تراكبًا داكنًا شبه شفّاف: يعود النصّ مقروءًا، وتبقى الصورة ظاهرة. ثم تُدوّر زوايا البطاقات لمظهر عصريّ.
تكملة المستوى 1 — نادية تنتقل من البنية إلى التصميم الغنيّ.
1. الخلفيات والمقروئية
يمكن أن تتلقّى الحاوية خلفية (تبويب النمط): لون صلب، تدرّج، صورة خلفية أو حتى فيديو. للصورة، يُضبَط التأطير والتثبيت («ثابت» يخلق تأثير بارالاكس خفيفًا). لكن وضع نصّ على صورة هو الفخّ الكلاسيكيّ: بحسب المنطقة، يصير النصّ غير مقروء.
الحلّ: تراكب (overlay) — طبقة شبه شفّافة (لون أو تدرّج) موضوعة بين الصورة والنص. تضيف نادية تراكبًا داكنًا بـ 40 %: تبقى الصورة ظاهرة، ويعود العنوان واضحًا. إنها عادة مقروئية.
2. تأثيرات باعتدال
تمنح التأثيرات بروزًا: ظلال (box-shadow) لإبراز بطاقة، استدارة (border-radius) لمظهر ناعم، حدود للتحديد. تُطبَّق بدقّة فتُحدِّث؛ وبإفراط تُثقِل وتُقدِّم الموقع.
تُدوّر نادية بطاقات الأعمال قليلًا وتضيف ظلًّا خفيًّا عند التمرير. القاعدة: يجب أن يخدم كل تأثير المقروئية أو التراتُب، لا أن يُزخرِف لأجل الزخرفة.
🔎 مثال ملموس — شريط مقروء (حالة نادية)
حاوية الشريط:
- الخلفية = صورة ورشة (مؤطَّرة، تثبيت عاديّ)
- التراكب = أسود بـ 40 %
- عنوان أبيض فوقها → مقروء
- البطاقات: border-radius 8px + ظلّ خفيف عند التمرير
→ صورة جميلة ونصّ واضح معًا.النتيجة: تصميم غنيّ دون تضحية بالمقروئية.
الدرس: التراكب أولًا، التأثيرات بعده، باعتدال.
مفردات القسم
- الخلفية (background)
- خلفية حاوية: لون، تدرّج، صورة أو فيديو (تبويب النمط).
مثال بسيط: صورة ورشة في خلفية الشريط.
ما ليس كذلك: خلط خلفية الحاوية بصورة مُدرَجة (ودجة الصورة).
رد فعل: الخلفية تُلبِس الصندوق؛ ودجة الصورة تعرض مرئيًا.
- التراكب (overlay)
- طبقة شبه شفّافة موضوعة على صورة خلفية لإبقاء النصّ مقروءًا.
مثال بسيط: تراكب أسود بـ 40 % تحت عنوان الشريط.
ما ليس كذلك: وضع نصّ مباشرة على صورة متباينة.
رد فعل: نصّ على صورة → تراكب منهجيّ.
- التثبيت (بارالاكس)
- ضبط لصورة خلفية: «ثابت» يخلق تأثير عمق خفيفًا عند التمرير.
مثال بسيط: خلفية ثابتة لقسم أجواء.
ما ليس كذلك: الإفراط في البارالاكس في كل مكان (ثقيل، مُتعِب).
رد فعل: بارالاكس عرضيّ، لا على كل الصفحة.
- التأثيرات (ظلال، استدارة)
- ظلال (box-shadow)، استدارة (border-radius)، حدود لمنح بروز.
مثال بسيط: بطاقات مُدوّرة بظلّ خفيّ عند التمرير.
ما ليس كذلك: تكديس ظلال قويّة وحدود صارخة.
رد فعل: يجب أن يخدم التأثير المقروئية أو التراتُب.
- مقروئية النصّ على صورة
- ضمان تباين النصّ الموضوع على خلفية مرئية.
مثال بسيط: تراكب + لون نصّ مناسب.
ما ليس كذلك: الحكم بأنه مقروء على شاشتك دون فحص المناطق الفاتحة.
رد فعل: افحص النصّ على كامل عرض الصورة.
في التطبيق — إلباس قسم بنظافة
- امنح حاوية صورة خلفية (تبويب النمط) وأطّرها.
- أضف تراكبًا (overlay) شبه شفّاف واضبط عتامته.
- ضع عنوانًا فوقها وتحقّق من مقروئيّته على كامل العرض.
- أضف استدارة وظلًّا خفيّا للبطاقات، باعتدال.
نصّ جاهز للقول — تبرير التراكب للزبون (20 ث)
«أبقيتُ صورة ورشتك الجميلة في الخلفية، مع حجاب داكن خفيف فوقها: هذا ما يُبقي العنوان مقروءًا تمامًا مهما كانت إضاءة الصورة. لا شيء مخفيّ، فقط جُعِل واضحًا.»
اشرحي التراكب كخدمة مقروئية، لا كإظلام.
قالب للنسخ واللصق — تحقّق خلفية مرئية
الحاوية: _______________
الخلفية: لون / تدرّج / صورة / فيديو
الصورة: تأطير ok؟ التثبيت (عاديّ/ثابت): _____
نصّ على صورة؟ → تراكب: لون ___ عتامة ___ %
تباين النصّ مُتحقَّق منه (كامل العرض): نعم / لا
التأثيرات: استدارة ___ px، ظلّ (خفيّ): نعم / لاشريط بصورة
صورة + تراكب + عنوان: تأثير «الدهشة» دون فقدان المقروئية.
قسم مُقتصِد
لون صلب أو تدرّج خفيف: أحيانًا أكثر احترافية من صورة.
بطاقة
خلفية بيضاء، استدارة خفيفة، ظلّ خفيّ: مظهر عصريّ وواضح.
الأداء
فيديو خلفية نهِم: احفظه للحالات القويّة، واضغطه (انظر 5.1).
✓ ممارسات جيدة
- ضَع تراكبًا حالما يكون هناك نصّ على صورة.
- استخدم التأثيرات باعتدال.
- تحقّق من التباين على كامل العرض.
✗ أخطاء شائعة
- نصّ مباشرة على صورة متباينة.
- بارالاكس وفيديوهات خلفية في كل مكان (ثقيل).
- ظلال/حدود صارخة.
النقاط الأساسية
- الخلفية: لون، تدرّج، صورة، فيديو.
- التراكب (overlay) = عادة مقروئية.
- التأثيرات (ظلال، استدارة) باعتدال.
- تحقّق دائمًا من تباين النصّ.
تحدّي 48 ساعة — طبّق غدًا
أنشئ قسمًا بصورة خلفية + تراكب + عنوان مقروء. اختبر بخفض/رفع عتامة التراكب حتى التباين الجيّد. أضف استدارة خفيّة لبطاقة. 20 دقيقة.
- أضبط خلفية (صورة، تدرّج) بنظافة.
- أضيف تراكبًا من أجل مقروئية النص.
- أستخدم التأثيرات باعتدال.
أسئلة شائعة
كيف أجعل عنوانًا مقروءًا على صورة؟
بوضع تراكب (overlay) شبه شفّاف بين صورة الخلفية والنص، واختيار لون نصّ متباين. تحقّق على كامل عرض الصورة.
هل أستخدم فيديوهات خلفية؟
بتقتير: فيديو الخلفية ثقيل (الأداء، الجوّال). احفظه للأقسام عالية الأثر واضغطه؛ وإلا تكفي صورة أو تدرّج.
هل تُقدِّم الظلال والاستدارة الموقع؟
بإفراط، نعم. مُستخدَمة بدقّة (استدارة خفيفة، ظلّ خفيّ)، تُحدِّث على العكس. يجب أن يخدم كل تأثير المقروئية أو التراتُب.
عنوان نادية الأبيض يختفي في أماكن على صورة الورشة في الخلفية. ماذا تفعل؟