Lesson 8 / الدرس 8

Borders, corners and shadows / الحدود والزوايا والظلال

The three things that turn a rectangle into something that looks designed. Both frameworks scale all three, and the useful skill is knowing when to use one instead of another.

الأشياء الثلاثة التي تحوّل مستطيلًا إلى شيء يبدو مصمَّمًا. ويقيس الإطاران الثلاثة، والمهارة النافعة معرفة متى تستخدم واحدًا بدل آخر.

You want	Tailwind	Bootstrap
A 1px border	border	border
A coloured border	border-slate-300	border-secondary
One side only	border-b	border-bottom
Rounded corners	rounded / rounded-lg	rounded / rounded-3
A pill	rounded-full	rounded-pill
A soft shadow	shadow / shadow-lg	shadow-sm / shadow-lg
No shadow	shadow-none	shadow-none

The names are close enough to guess in either direction, which is not true of the spacing scale. Note that in Tailwind border alone gives you a border with a default colour; you usually want to say which.

والأسماء قريبة بما يكفي للتخمين في الاتجاهين، وهو ما لا يصح على مقياس التباعد. ولاحظ أن border وحدها في Tailwind تعطيك حدًا بلون افتراضي؛ وتريد عادةً أن تقول أيّه.

Border or shadow — they answer different questions

A BORDER says:  this is a separate region
A SHADOW says:  this is floating above the page

So:  a card in a list          -> border
     a dropdown or a dialog    -> shadow
     a card you can click      -> border, and a shadow on hover

Using both everywhere is the commonest way a framework page ends up looking busy. Run the demonstration and compare the three boxes — the difference is subtle written down and obvious on screen.

Rounding, consistently

One rule saves a lot of fiddling: a small control gets a small radius, a large panel gets a larger one. A button at rounded inside a card at rounded-lg looks right; the same radius on both makes the button look like a panel. This is the same two-tier idea this very site uses in its own design tokens.

وقاعدة واحدة توفّر كثيرًا من العبث: فالتحكم الصغير ينال نصف قطر صغيرًا، واللوحة الكبيرة تنال أكبر. فالزر بـrounded داخل بطاقة بـrounded-lg يبدو صحيحًا؛ ونصف القطر نفسه على الاثنين يجعل الزر يبدو لوحة. وهذه فكرة الطبقتين نفسها التي يستخدمها هذا الموقع في رموز تصميمه.

والظل خفي في الوضع الداكن إن لم تفكر فيه. فالظل الأسود الناعم تحت لوحة داكنة على خلفية داكنة لا يفعل شيئًا إطلاقًا — إذ يختفي الارتفاع وتنبسط اللوحة في الصفحة. والدرس 20 يغطي الإصلاح؛ والجدير بالملاحظة الآن أن shadow-lg ليس قرارًا يعمل في الوضعين مجانًا.

One more class worth knowing in both: divide-y in Tailwind puts a border between every child of a container and not around the outside — exactly what a list of rows wants, and much less work than putting border-b on each item and then removing it from the last one. Bootstrap solves the same problem with its list-group component.

وصنف آخر يستحق المعرفة في الاثنين: فـdivide-y في Tailwind يضع حدًا بين كل أبناء حاوية ولا يضعه حولها من الخارج — وهو بالضبط ما تريده قائمة صفوف، وعمل أقل بكثير من وضع border-b على كل عنصر ثم إزالته من الأخير. ويحل Bootstrap المشكلة نفسها بمكوّن list-group.

والظلال في الإطارين مضبوطة أصلًا — طبقتان وشفافية منخفضة وإزاحات صغيرة. فقاوم كتابة ظلك حتى يكون لك سبب؛ فـbox-shadow مصنوع باليد بطبقة واحدة ثقيلة مموّهة هو ما يجعل الصفحة تبدو منزلية الصنع، وهو أول ما يلاحظه مصمم.

Try it live / جرّب بنفسك

<h1>Border, shadow, or both</h1>

<h2>Tailwind</h2>
<pre>&lt;div class="rounded-lg border border-slate-300 p-4"&gt;…
&lt;div class="rounded-lg shadow-lg p-4"&gt;…</pre>

<h2>Bootstrap</h2>
<pre>…</pre>

<h2>Which, when</h2>
<p>For a list of search results I would use … because …</p>
<p>For a dropdown I would use … because …</p>

Preview / المعاينة

Check yourself / اختبر نفسك

1. When should a box get a shadow rather than a border?

2. Why does a shadow often fail in dark mode?

3. What is a sensible rule for corner radius?

Your task / مهمتك

Build one card three ways in each framework: border only, shadow only, and a clickable version that lifts on hover. Then write a short paragraph on which you would use for a list of search results and which for a dropdown menu, and why. Include one example of a card that uses too much of everything, so the contrast is visible.

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

Three versions in each framework ثلاث صيغ في كل إطار
A hover lift that actually works ارتفاع عند التحويم يعمل فعلًا
A stated choice for two different situations اختيار معلن لموقفين مختلفين
A deliberately overdone example مثال مبالغ فيه عمدًا