CSSتأثيرات الظل

ما هو تأثير الظل

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

إضافة ظل للنص

لإضافة ظل حول النص نستخدم الخاصية text-shadow و نمرر لها القيم الخاصة بالظل كإحداثيات ظهوره، لونه و حجم ضبابيته.

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

h1 {
    text-shadow: 2px 2px lightgray;
}

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

h1 {
    text-shadow: 2px 2px 5px blue;
}

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

معلومة: هذا الأسلوب في وضع الظل يسمى Neon Effect.

h1 {
    text-shadow: 0 0 3px cyan;
}

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

h1 {
    color: white;
    text-shadow: 0 0 5px black;
}

إضافة أكثر من ظل للنص

لوضع أكثر من ظل للنص، قم بوضع فاصلة بين كل ظلّين تقوم بوضعهما فقط.

في المثال التالي أضفنا ظل للنص لونه أزرق و تحته وضعنا ظل أحمر حجمه أصغر.
هنا الظل الأحمر سيظهر بشكل خفيف لأن طبقة الظل الأزرق موضوعة فوقه.

h1 {
    text-shadow: 0 0 15px blue, 0 0 5px red;
}

في المثال التالي أضفنا ظل للنص لونه أحمر و تحته وضعنا ظل أزرق حجمه أكبر.
هنا الظل الأحمر سيظهر بشكل قوي لأن طبقة الظل الأحمر موضوعة فوقة طبقة الظل الأزرق المحيطة به.

h1 {
    text-shadow: 0 0 5px red, 0 0 15px blue;
}

إضافة الظل كحدود للنص

يمكنك إضافة أربع ظلال للنص بنفس الحجم مع جعل كل ظل يظهر من جهة مختلفة و عندها سيظهر الظل كأنه حدود للنص.

h1 {
    color: orange;
    text-shadow: 0 1px black, -1px 0 black, 1px 0 black, 0 -1px black;
}

إضافة ظل للعنصر

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

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

div {
    box-shadow: 5px 5px;
    background-color: #F1F1F1;
}

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

div {
    box-shadow: 5px 5px #cacaca;
    background-color: #F1F1F1;
}

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

div {
    box-shadow: 4px 4px 5px #cacaca;
    background-color: #F1F1F1;
}

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

div {
    box-shadow: 4px 4px 5px 10px #cacaca;
    background-color: #F1F1F1;
}

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

div {
    box-shadow: inset 0 0 5px 10px #cacaca;
    background-color: #F1F1F1;
}

إضافة أكثر من ظل للعنصر

لوضع أكثر من ظل للعنصر، قم بوضع فاصلة بين كل ظلّين تقوم بوضعهما فقط.

في المثال التالي أضفنا ظللّين حول العنصر.

div {
    box-shadow: 10px 10px #6d588e, 20px 20px #405378;
}

في المثال التالي جعلنا حدود العنصر مائلة مما أدى لجعل الظلال تظهر بشكل مائل أيضاً.

div {
    border-radius: 10px;
    box-shadow: 10px 10px #6d588e, 20px 20px #405378;
}

في المثال التالي أضفنا 5 ظلال للعنصر و نريدك أن تلاحظ أننا جعلناها تظهر داخل حدوده بواسطة القيمة inset و أضفنا له هامش داخلي بمقدار أكثر من أكبر ظل موضوع فيه و ذلك لكي يظهر الكلام بعيد عن الظلال.

div {
    box-shadow:
        inset 0 0 0 10px #ee6352,
        inset 0 0 0 20px #d45379,
        inset 0 0 0 30px #a4558f,
        inset 0 0 0 40px #6d588e,
        inset 0 0 0 50px #405378;
}