تُعدّ الظلال من الأدوات المميزة في CSS، حيث يمكنها إضافة عمق وحيوية إلى عناصر الصفحة بشكل يجعلها تبدو أقرب إلى الحياة الواقعية. باستخدام box-shadow و text-shadow، يمكنك إضافة ظلال للصناديق والنصوص، مما يساعد على توضيح التركيب البصري للموقع، وتوجيه نظر المستخدم إلى عناصر معينة.
في هذا الدرس، سنستعرض كيفية استخدام هذه الخصائص، وسنرى أمثلة على تأثيرات ظل أنيقة يمكنك تطبيقها على مشاريعك.
1. خاصية box-shadow
تُستخدم box-shadow لإضافة ظلال خلفية لعناصر مثل الصناديق والصور. تتيح لك هذه الخاصية تخصيص موقع الظل، حجمه، لونه، وحتى جعله متدرجاً أو ناعماً.
صيغة box-shadow
الصيغة الأساسية لـ box-shadow هي كالتالي:
box-shadow: offset-x offset-y blur-radius spread-radius color;حيث:
- offset-x: يحدد مقدار انتقال الظل على المحور الأفقي (يمينًا أو يسارًا).
- offset-y: يحدد مقدار انتقال الظل على المحور العمودي (أعلى أو أسفل).
- blur-radius: يحدد مقدار تشويش أو نعومة حواف الظل. (اختياري)
- spread-radius: يتحكم في حجم الظل من حيث التمدد أو الانكماش. (اختياري)
- color: يحدد لون الظل، ويمكن استخدام الشفافية (مثل
rgba).
مثال على box-shadow
.box {
width: 200px;
height: 100px;
background-color: #f2f2f2;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}في هذا المثال:
- 10px هو الإزاحة الأفقية.
- 10px هو الإزاحة العمودية.
- 15px هو نصف قطر التشويش، مما يجعل الظل ناعماً.
- rgba(0, 0, 0, 0.3) هو لون الظل الشفاف باللون الأسود.
2. خاصية text-shadow
تُستخدم text-shadow لإضافة ظل إلى النصوص، مما يجعلها تبدو بارزة وواضحة على الصفحة. تعتبر هذه الخاصية مشابهة لـ box-shadow، ولكنها لا تحتوي على خاصية spread-radius.
صيغة text-shadow
الصيغة الأساسية لـ text-shadow هي كالتالي:
text-shadow: offset-x offset-y blur-radius color;حيث:
- offset-x: الإزاحة الأفقية للظل.
- offset-y: الإزاحة العمودية للظل.
- blur-radius: مقدار التشويش أو نعومة الظل. (اختياري)
- color: لون الظل.
مثال على text-shadow
.text {
font-size: 24px;
color: #333;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}في هذا المثال:
- 2px هو الإزاحة الأفقية.
- 2px هو الإزاحة العمودية.
- 5px هو نصف قطر التشويش.
- rgba(0, 0, 0, 0.5) هو لون الظل الشفاف.
3. أمثلة على تأثيرات ظل أنيقة
3.1. ظل بسيط للصندوق
إضافة ظل بسيط للصندوق تضفي تأثيراً واضحاً وأنيقاً:
.simple-box {
width: 250px;
height: 150px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}3.2. ظل عائم (Soft Floating Shadow)
يُضفي الظل العائم إحساسًا بالحركة ويجعل العنصر يبدو وكأنه يطفو.
.floating-box {
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}3.3. ظل داخلي (Inset Shadow)
يمكنك أيضًا إضافة ظل داخلي باستخدام خاصية inset مع box-shadow، مما يعطي تأثيرًا فريدًا يبدو وكأن العنصر محفور في الداخل.
.inset-box {
width: 200px;
height: 100px;
background-color: #eaeaea;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
}في هذا المثال:
- inset يجعل الظل داخليًا.
- rgba(0, 0, 0, 0.3) يعطي الظل لونًا شفافًا مناسبًا.
4. تأثيرات ظل متقدمة على النصوص
4.1. تأثير الظل المزدوج للنص
يمكنك تطبيق أكثر من ظل على النص لإنشاء تأثيرات رائعة. يكفي فصل كل ظل عن الآخر باستخدام الفاصلة.
.double-shadow-text {
font-size: 36px;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(0, 0, 0, 0.2);
}4.2. تأثير توهج النص
يمنح توهج النص النصوص بريقًا رائعًا، خاصة عند استخدام ألوان زاهية أو ظلال خفيفة.
.glowing-text {
font-size: 36px;
color: #ff4d4d;
text-shadow: 0px 0px 10px rgba(255, 77, 77, 0.7), 0px 0px 20px rgba(255, 77, 77, 0.5);
}5. نصائح لإضافة الظلال بفعالية
5.1. التوازن بين الظل والخلفية
تأكد من استخدام لون ظل يناسب لون الخلفية ولون العنصر الأساسي. الظل الداكن على خلفية فاتحة يعطي نتائج جيدة، والعكس صحيح.
5.2. تجنب الظلال الكثيفة
الظلال المفرطة أو الكثيفة قد تجعل التصميم يبدو غير احترافي. اختر ظلًا ناعمًا يتماشى مع التصميم العام للموقع.
5.3. استخدام الظل لإبراز عناصر مهمة
استخدم الظلال لإبراز العناصر المهمة مثل الأزرار أو العناوين. تجذب الظلال نظر المستخدم وتجعل العنصر يبدو وكأنه قابل للنقر.
خاتمة
تمثل الظلال أداة قوية في تصميم واجهات المستخدم، فهي تضيف العمق والأناقة، وتساعد في تحسين التركيب البصري لعناصر الصفحة. سواء كنت تستخدم box-shadow لتأثيرات الصناديق أو text-shadow للنصوص، يمكنك بتخصيص القيم بطرق مختلفة أن تخلق تأثيرات مميزة تساعد في تحسين تجربة المستخدم بشكل جذاب وأنيق.
