❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • ما هو تأثير الظل
  • إضافة ظل للنص
  • إضافة أكثر من ظل للنص
  • إضافة ظل للعنصر
  • إضافة أكثر من ظل للعنصر

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

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

CSS Text Shadow Effect
CSS Text Shadow Effect
CSS Box Shadow Effect
CSS Box Shadow Effect

معلومة تقنية

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

إضافة ظل للنص

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


ملاحظة

إفتراضياً، لون الظل الذي يتم وضعه للنص هو لون النص نفسه و بالتالي فإن كان لون النص أسود و أضفت له ظل بدون أن تحدد لونه فإن الظل سيظهر بلون أسود أيضاً.


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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect
جرب الكود

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

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect
جرب الكود

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

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


في حال وضع أكثر من ظل فإن الظل الذي تضعه في الأول يظهر فوق الظل الذي تضعه بعده و هذا يعني أنه سيظهر بشكل بارز أكثر.


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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Text Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Text Shadow Effect
جرب الكود

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

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Text Shadow Effect
جرب الكود

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

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


ملاحظة

إفتراضياً، لون الظل الذي يتم وضعه للعنصر هو لون نص العنصر نفسه و بالتالي فإن كان لون النص أسود و أضفت له ظل بدون أن تحدد لونه فإن الظل سيظهر بلون أسود أيضاً.


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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect
جرب الكود

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

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


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


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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Box Shadow Effect
جرب الكود

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

مثال

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

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Box Shadow Effect
جرب الكود

في المثال التالي أضفنا 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;
}
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; }

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Box Shadow Effect
جرب الكود
الدرس التالي❯ ❮الدرس السابق