كيفية إنشاء ظل الخط باستخدام كس: طرق بسيطة

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

تعتمد تقنية إنشاء ظل للنص باستخدام كس على استخدام خاصية ظل النص. باستخدام هذه الخاصية ، يمكنك تعيين الظل للخط عن طريق تحديد إزاحة المسافة الأفقية والرأسية ، وكذلك ضبط لون الظل وطمسه. على سبيل المثال ، لإنشاء ظل ينزل من يمين النص ، يمكنك استخدام الكود التالي:

نص الظل: 2 بكسل 2 بكسل 4 بكسل رغبا (0 ، 0 ، 0 ، 0.6);

في هذا المثال ، نحدد الظل مع إزاحة أفقية من 2 بكسل ، إزاحة رأسية من 2 بكسل ، طمس الظل من 4 بكسل ولون الظل رغبا (0 ، 0 ، 0 ، 0.6) ، وهو لون أسود شفاف.

ميزة استخدام ظلال النص المغلق هي بساطتها ومرونتها. يمكنك إنشاء تأثيرات ظل مختلفة عن طريق تغيير قيم خاصية ظل النص. من آثار لعوب وغير عادية لتلك أكثر كلاسيكية وأنيقة ، وميزات المغلق تسمح لك لتجربة والعثور على الحل الأمثل للتصميم الخاص بك!

1. كيفية إضافة الظل إلى النص في كس: طرق بسيطة
2. استخدام خاصية ظل النص:
3. ضبط الظل الأفقي:
4. تطبيق الظل العمودي:

كيفية إضافة الظل إلى النص في كس: طرق بسيطة

1. الظل باستخدام خاصية الظل النص

تتيح لك خاصية ظل النص إضافة ظل إلى النص. يحتوي على بناء الجملة التالي:

نص الظل: أفقي أوفست عمودي أوفست طمس اللون;

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

ظل النص: 2 بكسل 2 بكسل 0 بكسل #000000;

2. الظل باستخدام خاصية مربع الظل

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

مربع الظل: أفقي أوفست عمودي أوفست طمس اللون;

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

مربع الظل: 2 بكسل 2 بكسل 0 بكسل #000000;

3. ظلال متعددة

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

نص الظل: 2 بكسل 2 بكسل 0 بكسل #000000 ، - 2 بكسل-2 بكسل 0 بكسل #ففف;

في هذا المثال ، نضيف ظلا أسود مع إزاحة إلى اليمين والأسفل ، بالإضافة إلى ظل أبيض مع إزاحة إلى اليسار وأعلى.

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

استخدام خاصية ظل النص:

بناء الجملة لاستخدام ظل النص هو كما يلي:

نص الظل: أفقي-أوفست عمودي-أوفست طمس اللون;

على سبيل المثال ، لإنشاء ظل للنص بإزاحة أفقية 2 بكسل وعمودية 2 بكسل وطمس 1 بكسل ولون #000000 ، يمكنك استخدام الكود التالي:

نص الظل: 2 بكسل 2 بكسل 1 بكسل #000000;

أيضا ، لإنشاء تأثير ظل واسع ، يمكنك تعيين قيمة طمس كبيرة. على سبيل المثال ، لإنشاء ظل عريض للنص بإزاحة أفقية 2 بكسل وعمودية 2 بكسل وطمس 5 بكسل ولون #000000 ، يمكنك استخدام الكود التالي:

ظل النص: 2 بكسل 2 بكسل 5 بكسل #000000;

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

نص الظل: 2 بكسل 2 بكسل 1 بكسل #000000 ، - 2 بكسل-2 بكسل 1 بكسل #ففف;

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

ضبط الظل الأفقي:

لإنشاء ظل أفقي في كس ، يمكنك استخدام خاصية ظل النص. تحدد قيمة هذه الخاصية ظل النص ويتم تحديدها بالتنسيق التالي:

نص الظل: أفقي أوفست عمودي أوفست طمس اللون;

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

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

عدم وضوح يحدد ضبابية الظل. كلما ارتفعت القيمة ، كلما كان الظل أكثر ضبابية.

يحدد اللون لون الظل. يمكنك تعيين اللون بتنسيق رمز سداسي عشري أو باستخدام اسم اللون.

أمثلة لإنشاء ظل أفقي:

.نص الظل {

نص الظل: 5 بكسل 0 بكسل 5 بكسل رغبا (0 ، 0 ، 0 ، 0.5);

}

.نص الظل {

نص الظل :-3 بكسل 0 بكسل 2 بكسل #ف 0000;

}