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

قهوة
ظلال

أنشئ تأثيرات الظل باستخدام CSS!

مرر فوقي هنا!

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

من خلال استخدام CSS، يمكنك إضافة ظلال إلى النص والعناصر.

في هذا الدرس، ستتعلم النصائح التالية:

  • text-shadow
  • box-shadow

ظلال النص CSS

CSS text-shadow يضيف هذا السمة الظل إلى النص.

أبسط استخدام هو تخصيص الظل الأفقي (2px) والظل العمودي (2px):

تأثير الظل النصي!

مثال

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

تجربة بنفسك

ثم، أضف اللون إلى الظل:

تأثير الظل النصي!

مثال

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

تجربة بنفسك

ثم، أضف تأثير البهتة إلى الظل:

تأثير الظل النصي!

مثال

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

تجربة بنفسك

النموذج التوضيحي التالي يظهر النص الأبيض مع ظل أسود:

تأثير الظل النصي!

مثال

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

تجربة بنفسك

النموذج التوضيحي التالي يظهر تأثيرات الظل الأناركية الحمراء:

تأثير الظل النصي!

مثال

h1 {
  text-shadow: 0 0 3px #FF0000;
}

تجربة بنفسك

عدة ظلال

إذا كنت ترغب في إضافة عدة ظلال إلى النص، يمكنك إضافة قائمة الظلال المفصولة بفاصلة.

النموذج التوضيحي التالي يظهر تأثيرات الظل الأناركية الحمراء والزرقاء:

تأثير الظل النصي!

مثال

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

تجربة بنفسك

النموذج التالي يظهر نصًا أبيض يحتوي على ظلال أسود وأزرق وأزرق داكن:

تأثير الظل النصي!

مثال

h1 {
  color: white;
  text-shadow: 1px 1px 2px أسود، 0 0 25px أزرق، 0 0 5px أزرق داكن;
}

تجربة بنفسك

يمكنك أيضًا استخدام خاصية text-shadow لإنشاء حافة صافية حول النص (بدون ظل):

حافة النص المحيطة!

مثال

h1 {
  color: yellow;
  text-shadow: -1px 0 أسود، 0 1px أسود، 1px 0 أسود، 0 -1px أسود;
}

تجربة بنفسك