الظلال في CSS: التحكم في العمق والإدراك في التصميم

مقدمة للظلال في CSS

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

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

2. خاصية الظلال للنصوص في CSS

تستخدم خاصية الظل للنصوص text-shadow في CSS لإضافة ظلال إلى النص. يمكنك استخدام هذه الخاصية لإعطاء النص بعض العمق والحيوية، وتعزيز التباين بين النص والخلفية.

تطبيق خاصية الظل للنصوص في CSS:

الصيغة الأساسية لـ text-shadow هي:

text-shadow: h-offset v-offset blur-radius color;

حيث:

• h-offset هو الإزاحة الأفقية للظل.
• v-offset هو الإزاحة الرأسية للظل.
• blur-radius هو نصف قطر الطمس. القيمة الأعلى تجعل الظل أكثر طمسًا.
• color هو اللون الذي ترغب في تطبيقه على الظل.

مثال:

p {
  text-shadow: 2px 2px 2px grey;
}

في هذا المثال، للفقرة (p) ظل يتحرك 2 بكسل إلى اليمين و 2 بكسل إلى الأسفل، مع نصف قطر طمس 2 بكسل ولون رمادي.

3. خاصية الظلال للصناديق في CSS

خاصية box-shadow في CSS تسمح بإضافة تأثير الظل إلى الصناديق. هذا يمكن أن يساعد على خلق العمق والبُعد والتباين بين العناصر المختلفة على صفحة الويب.

تطبيق خاصية الظلال للصناديق في CSS:

تتكون خاصية box-shadow من القيم التالية:

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

حيث:

• h-offset هو الإزاحة الأفقية للظل.
• v-offset هو الإزاحة الرأسية للظل.
• blur-radius هو نصف قطر الطمس. القيمة الأعلى تجعل الظل أكثر طمسًا.
• spread-radius هو مدى انتشار الظل.
• color هو اللون الذي ترغب في تطبيقه على الظل.
• inset هو اختياري ويحدد إذا كان الظل داخلي أو خارجي.

مثال:

div {
  box-shadow: 5px 10px 15px grey;
}

في هذا المثال، العنصر div يمتلك ظلًا يتحرك 5 بكسل إلى اليمين و10 بكسل للأسفل، مع نصف قطر طمس 15 بكسل ولون رمادي.

4. خاصية الظلال للصناديق في CSS بقيمة اللون

اللون هو جزء مهم من خاصية box-shadow في CSS. يمكن استخدامه لتعديل مظهر الظل وإضافة لمسة من الأناقة إلى تصميمك.

تطبيق القيمة اللون في خاصية الظلال للصناديق في CSS:

إليك مثال على كيفية استخدام اللون في خاصية box-shadow:

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

في هذا المثال، تم استخدام اللون rgba(0, 0, 0, 0.5)، وهو رمادي شفاف بنسبة 50%. اللون مكوّن من أربعة أجزاء: القيم الثلاثة الأولى تمثل اللون (الأحمر، الأخضر، والأزرق) وتتراوح بين 0 و255. القيمة الأخيرة تمثل الشفافية وتتراوح بين 0 (شفاف تمامًا) و1 (غير شفاف تمامًا).

5. خاصية الظلال للصناديق في CSS بقيمة نصف قطر الطمس

قيمة نصف قطر الطمس في خاصية box-shadow تحدد مدى طمس الظل. كلما كانت القيمة أكبر، كلما كان الظل أكثر طمسًا.

تطبيق القيمة نصف قطر الطمس في خاصية الظلال للصناديق في CSS:

لتطبيق نصف قطر الطمس، يمكنك استخدام السياق التالي:

div {
  box-shadow: 5px 5px 15px black;
}

في هذا المثال، العنصر div لديه ظل مع نصف قطر الطمس قدره 15 بكسل. يجعل هذا الظل أكثر طمسًا ويضفي لمسة ناعمة على العنصر.

6. خاصية الظلال للصناديق في CSS بقيمة الإزاحة

الإزاحة في خاصية box-shadow تحدد مدى بُعد الظل من العنصر. الإزاحة تتألف من قيمتين: الأولى تحدد بُعد الظل عن العنصر أفقيًا، والثانية تحدد بُعد الظل عن العنصر عموديًا.

تطبيق القيمة الإزاحة في خاصية الظلال للصناديق في CSS:

لتطبيق الإزاحة، يمكنك استخدام السياق التالي:

div {
  box-shadow: 10px 10px 5px black;
}

في هذا المثال، العنصر div لديه ظل بإزاحة أفقية وعمودية قدرها 10 بكسل. يجعل هذا الظل يبدو وكأنه بُعيد قليلًا عن العنصر.

7. خاصية الظل للنص في CSS

خاصية text-shadow في CSS توفر لك القدرة على إضافة الظل إلى النص. يمكنك استخدامها لإعطاء تأثير العمق، أو لتحسين القراءة على خلفيات بلون مغاير.

تطبيق خاصية الظل للنص في CSS:

إليك مثال على كيفية تطبيق خاصية text-shadow:

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

في هذا المثال، يحتوي العنوان h1 على ظل بإزاحة أفقية وعمودية قدرها 2 بكسل، ونصف قطر الطمس قدره 4 بكسل، واللون رمادي شفاف بنسبة 50%. يضيف هذا الظل تأثير العمق على النص، ويجعله أكثر وضوحًا على خلفيات بلون مغاير.

8. خاصية الظلال للصناديق في CSS

خاصية box-shadow في CSS تمكنك من إضافة الظلال إلى العناصر. يمكنك استخدامها لإعطاء تأثير العمق، أو لتحسين قراءة العناصر على خلفيات بلون مغاير.

تطبيق خاصية الظلال للصناديق في CSS:

إليك مثال على كيفية تطبيق خاصية box-shadow:

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

في هذا المثال، العنصر div يحتوي على ظل بإزاحة أفقية وعمودية قدرها 5 بكسل، ونصف قطر الطمس قدره 10 بكسل، واللون رمادي شفاف بنسبة 50%. يضيف هذا الظل تأثير العمق على العنصر، ويجعله أكثر وضوحًا على خلفيات بلون مغاير.

9. خاصية الظل للنص في CSS

إعادة النظر في خاصية الظل للنص في CSS، يمكننا أن نرى العديد من الطرق لاستخدامها لتحقيق تأثيرات مختلفة.

تطبيق خاصية الظل للنص في CSS:

لنأخذ مثالاً آخر على كيفية استخدام خاصية text-shadow:

h2 {
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

في هذا المثال، يتم تطبيق ثلاثة ظلال على العنوان h2. الظل الأول أسود مع إزاحة بكسل واحد وتمويه 2 بكسل. الظل الثاني أزرق مع تمويه 25 بكسل ولا يوجد إزاحة، مما يخلق تأثير الهالة حول النص. الظل الثالث أزرق داكن مع تمويه 5 بكسل ولا إزاحة، يضيف تأثير الهالة الداكنة حول الهالة الأزرق الأولى.

الخاتمة

تقدم خصائص الظل في CSS العديد من الطرق المبتكرة لإضفاء الأبعاد والحيوية على العناصر على صفحات الويب الخاصة بك. سواء كان ذلك من خلال إضافة الظل إلى النص لتحسين القراءة، أو إضافة الظل إلى الصناديق لتوفير تأثير العمق. مع قليل من التجربة والتحسين، يمكنك الاستفادة من هذه الخصائص لتحسين تجربة المستخدم الخاصة بك.

أسئلة شائعة