الظلال في لغة CSS

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

خاصية Text-shadow:

خاصية Text-shadow تُستخدم لإضفاء تأثيرات الظل على النصوص، ويتم تحديد الخاصية باستخدام القيم التالية:

الأفقي X: قيمة الإزاحة الأفقية للظل.

الرأسي Y: قيمة الإزاحة الرأسية للظل.

الضبابية blur: قيمة الضبابية للظل.

اللون color: لون الظل.

إليك مثالًا على استخدام خاصية Text-shadow:

CSS

h1 {
    box-shadow: 2px 2px 4px #f45;
}

في هذا المثال، يتم إضافة تأثير الظل إلى العنصر h1 ويتم تحديد الإزاحة الأفقية والرأسية بقيمة 2 بكسل، والضبابية بقيمة 4 بكسل، ولون الظل هو #f45.

خاصية Box-shadow:

خاصية Box-shadow تُستخدم لإضفاء تأثيرات الظل على العناصر المستطيلة، ويتم تحديد الخاصية باستخدام القيم التالية:

الأفقي X: قيمة الإزاحة الأفقية للظل.

الرأسي Y: قيمة الإزاحة الرأسية للظل.

الضبابية blur: قيمة الضبابية للظل.

الانتشار spread: قيمة الانتشار للظل.

اللون color: لون الظل.

inset: يتم تحديد قيمة inset لإضافة تأثير الظل الداخلي بدلاً من الخارجي. إليك مثالًا على استخدام خاصية Box-shadow:

CSS

div {
    box-shadow: 4px 4px 8px #f45;
}

في هذا المثال، يتم إضافة تأثير الظل إلى العنصر div ويتم تحديد الإزاحة الأفقية والرأسية بقيمة 4 بكسل، والضبابية بقيمة 8 بكسل، ولون الظل هو #f45.

الآن، سنقوم بإنشاء شكل باستخدام خاصية Text-shadow و Box-shadow:

HTML

<div class="shape">shape</div>

CSS

.shape {
    width: 200px;
    height: 200px;
    background-color: #f45;
    border-radius: 0px 106px 0 106px;
    text-align: center;
    line-height: 200px;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px #ccc;
    box-shadow: 0px 0px 20px #ccc;
}

هنا نتيجة الكود لكي ترى بشكل أوضح