إضافة حدود وزوايا مستديرة وظلال.

أطّروا بطاقة أو دوّروا زوايا صورة أو ارفعوا صندوقًا عن الصفحة بظل. تضبطون كل ذلك في لوحة النمط الخاصة بالعنصر، ويمكنكم تغييره عند التحويم في لوحة نمط التحويم. استخدموه لجعل بطاقة واحدة مميزة. وللإطار نفسه على سلسلة كاملة من البطاقات، فئة مشتركة تُبقيها متشابهة.

يتبع الفيديو الوصفة أدناه: يحوّل كتلة نص إلى بطاقة بحد وزوايا مستديرة وظل يتعمق عند التحويم.

قبل أن تبدؤوا

• افتحوا الصفحة في DXPR Builder؛ وتُظهر الإشارة إلى عنصر شريط تحكمه مع المزيد. جديدون على المنشئ؟ انظروا صفحتكم الأولى.
• حفظ في مربع الحوار يُبقي التغيير في المحرّر. وحفظ في شريط أدوات المنشئ فوق محتواكم يخزّن الصفحة ويعرض «Saved field».
• أبرزوا شيئًا واحدًا. الحد أو الظل يجذب العين إلى تاريخ مهم أو عرض أو اقتباس. ضعوه على كل شيء فيتوقف عن العمل.
• حافظوا على تشابه السلسلة. للإطار نفسه على كثير من البطاقات، احفظوا بطاقة واحدة كقالب أو استخدموا فئة مشتركة. انظروا معرّف HTML والفئات.
• دعوا القالب يضبط الظلال. مستويات الظل المسقط الخمسة معرّفة مرة واحدة للموقع كاملًا. ويمكن لقالبكم إعادة تنسيق مستوى، فيتبعه كل عنصر يستخدمه.

وصفة: بطاقة مميزة

تحصلون على صندوق ناعم بحد رفيع بلون علامتكم التجارية. وله زوايا مستديرة وظل ينمو عند التحويم.

1. حوموا فوق عنصر النص، وانقروا المزيد ثم الإعدادات.
2. افتحوا لوحة النمط. يستقر نموذج الصندوق في الأعلى. وتبدأ أقفاله مفتوحة؛ انقروا القفل بجانب الحشوة لإغلاقه، فتتحرك جوانبه الأربعة معًا.
3. انقروا الجانب العلوي من الحشوة، واكتبوا 32 واضغطوا Enter. فتقرأ الجوانب الأربعة الآن 32px.
4. اختاروا لون خلفية فاتحًا، مثل رمادي شاحب.
5. اضبطوا نمط الحد على مصمت.
6. أغلقوا القفل بجانب الحد، ثم انقروا أحد جوانبه، واكتبوا 1 واضغطوا Enter.
7. اختاروا لون الحد، واضبطوا نصف قطر الحد على 16 واضبطوا الظل المسقط على 3.
8. افتحوا لوحة نمط التحويم واضبطوا الظل المسقط على 5.
9. انقروا حفظ في مربع الحوار، ثم حفظ في شريط الأدوات.
10. اختاروا المعاينة في قائمة العرض (أيقونة العين) وأشيروا إلى البطاقة. فيتعمق ظلها.

ما ترونه

للبطاقة حد رفيع بلونكم وزوايا مستديرة وظل ناعم تحتها. وفي المعاينة، ينمو الظل عمقًا بينما المؤشر فوق البطاقة ويستقر عند مغادرته.

كيف يُبنى الحد

يحتاج الحد إلى ثلاثة إعدادات، وتبسطها اللوحة. اضبطوا الثلاثة:

1. نمط الحد يختار الخط: مصمت أو منقّط أو متقطع. وعلى افتراضيات القالب، لا حد لمعظم العناصر إطلاقًا. ولا شيء يزيل حدًا يرسمه قالبكم.
2. حلقة الحد في نموذج الصندوق تضبط عرض كل جانب، من 0 إلى 50 بكسل. وإذا تركتموها فارغة، يستخدم المتصفح عرضه الخاص حوالي 3 بكسل.
3. لون الحد يضبط اللون. وإذا تركتموه فارغًا، يأخذ الحد لون النص.

نصف قطر الحد يدوّر الزوايا الأربع، من 0 إلى 100 بكسل. ويدوّر الخلفية والظل أيضًا. وعلى صورة يدوّر الصورة نفسها.

للدائرة، اجعلوا العنصر مربعًا. ثم اضبطوا نصف قطر الحد على نصف عرضه بالبكسل: 100 لعنصر عرضه 200 بكسل. ولأي شيء أعرض، أضيفوا فئة دائري (نصف قطر 50%) تحت فئات HTML. وعلى صورة تدوّر هذه الفئة الإطار حول الصورة لا الصورة، فاستخدموا نصف قطر الحد هناك.

مستويات الظل المسقط

هذه هي المستويات الافتراضية. كل مستوى نمط مشترك لا قيمة مخزنة في صفحتكم، فيمكن لقالب إعادة ضبط مستوى للموقع كاملًا. ولمطوّر القالب الخاص بكم: المستويات هي متغيرات CSS من --dxb-box-shadow-1 إلى --dxb-box-shadow-5.

في لوحة نمط التحويم، يضبط الظل المسقط المستوى بينما المؤشر فوق العنصر. ويتلاشى الظل الجديد دخولًا خلال 0.15 ثانية. والمستوى الأعلى عند التحويم يجعل البطاقة تبدو مرفوعة.

فئات HTML توفر أشكالًا أكثر: ظل مسقط مرفوع وظل مسقط بارز وظل ثلاثي الأبعاد وظل مسقط أفقي منحنٍ. وتحوي أيضًا ظل صغير وظل افتراضي وظل كبير من Bootstrap. استخدموا ظلًا واحدًا لكل عنصر. وتتغلب فئات ظل Bootstrap على منزلق الظل المسقط.

إذا لم تظهر لكم الحدود أو الزوايا أو الظل التي ضبطتموها

• الحد لا يظهر. نمط الحد على افتراضيات القالب أو لا شيء. اختاروا مصمت أو منقّط أو متقطع.
• الحد أسمك مما تريدون. لم يُضبط عرض، فيستخدم المتصفح حوالي 3 بكسل. اضبطوا جوانب الحد في نموذج الصندوق.
• للحد اللون الخطأ. لون الحد الفارغ يأخذ لون النص. اختاروا لون الحد.
• تبقى الزوايا مربعة. فئة مثل لا زوايا مستديرة (rounded-0) تحت فئات HTML، أو قاعدة قالب مع !important، تفوز. أزيلوا الرقاقة، أو اسألوا مشرف موقعكم عن قاعدة القالب.
• تستدير الزوايا لكن لا تظهر دائرة. يتوقف المنزلق عند 100 بكسل. استخدموا فئة دائري (نصف قطر 50%).
• الظل المسقط لا يغيّر شيئًا. فئة ظل Bootstrap مثل ظل كبير تحت فئات HTML تفوز. أزيلوا رقاقتها. والمستوى 1 خافت أيضًا، فجرّبوا المستوى 3 للاختبار.
• الظل لا ينمو عند التحويم. اضبطوا الظل المسقط في لوحة نمط التحويم لا في النمط، واختاروا مستوى أعلى من مستوى السكون.
• تغيّر جانب واحد فقط. القفل بجانب الحشوة أو الحد كان مفتوحًا. أغلقوه وأدخلوا القيمة مجددًا.
• ظل التحويم لا يظهر أبدًا على هاتف. شاشات اللمس بلا مؤشر، فيظهر مظهر التحويم فقط بعد اللمس.

ما الخطوة التالية؟

• التباعد: امنحوا المحتوى فسحة داخل الحد.