ظل الخط هو إحدى الطرق لإعطاء نص صفحة الويب تأثيرا إضافيا. انها تسمح لك لتحسين قراءة النص وجعله أكثر تعبيرا. في هذه المقالة ، سننظر في كيفية إضافة ظل إلى خط على موقعك باستخدام كس.
تعد إضافة ظل الخط طريقة رائعة لتحسين التأثير المرئي للنص على صفحة الويب. يمكن ضبط الظل باستخدام كل من الإزاحة الأفقية والرأسية بالنسبة للنص المصدر ، مما يسمح لك بإنشاء مجموعة متنوعة من التأثيرات.
من المهم ملاحظة أن إضافة ظل الخط يمكن أن يكون له تأثير على أداء الصفحة ، لذلك يوصى باستخدام هذا التأثير مع الإشراف وتحسينه إذا لزم الأمر.
دعونا ننظر في عدة طرق لإضافة ظل الخط باستخدام كس. سنتحدث عن خصائص ظل النص وظلال المربع ، والتي تتيح لك تخصيص الظلال لكل من كتل النص والنص. سننظر أيضا في بعض الأمثلة على استخدام هذه الخصائص ونشارك النصائح حول كيفية تحقيق أفضل تأثير مرئي.
- كيفية إضافة ظل لخط كس: دليل مفصل
- تحديد ظل الخط
- استخدام خاصية ظل النص
كيفية إضافة ظل لخط كس: دليل مفصل
هناك عدة طرق لإضافة ظل إلى خط باستخدام كس ، وفي هذا الدليل سوف ننظر في طريقتين رئيسيتين: استخدام خاصية الظل النص واستخدام العنصر الزائف: بعد.
1. استخدام خاصية ظل النص
- أولا ، حدد العنصر الذي تريد إضافة ظل الخط إليه. على سبيل المثال ، يمكن أن يكون عنوانا أو فقرة
- داخل قاعدة كس للعنصر المحدد ، إضافة التعليمات البرمجية التالية:
نص الظل: 2 بكسل 2 بكسل 4 بكسل رغبا (0 ، 0 ، 0 ، 0.5);في الكود أعلاه ، تحدد القيمة 2 بكسل الإزاحة الأفقية والرأسية للظل ، وتحدد 4 بكسل طمس الظل ، ويحدد رغبا(0 ، 0 ، 0 ، 0.5) لون الظل وشفافيته. يمكنك ضبط هذه القيم كما يحلو لك.
- 2. باستخدام عنصر زائف: بعد
- حدد العنصر الذي تريد إضافة ظل الخط إليه.
إضافة التعليمات البرمجية التالية إلى المغلق:- موضع: نسبي;
ثم ، داخل قاعدة العنصر المحدد ، أضف الكود التالي:
المحتوى: ";
موضع: مطلق;
أعلى: 2 بكسل;
اليسار: 2 بكسل;
العرض: 100%;
الارتفاع: 100%;
ض-الفهرس: -1;
مربع الظل: 2 بكسل 2 بكسل 4 بكسل رغبا (0 ، 0 ، 0 ، 0.5);
الأسطر الأربعة الأولى من التعليمات البرمجية تعطي العنصر الزائف موضع تحديد المواقع المطلق ، والإزاحة ، والأبعاد للحصول على الظل ، والسطر الأخير من التعليمات البرمجية يوفر ظل العنصر الزائف باستخدام خاصية مربع الظل. يمكنك ضبط هذه القيم كما يحلو لك.
الآن لديك طريقتان رئيسيتان لإضافة ظل الخط باستخدام كس. يمكنك استخدام أي من هذه الطرق ، اعتمادا على تفضيلاتك ومهمتك ، وإنشاء نص أنيق وجذاب على صفحة الويب الخاصة بك.
تحديد ظل الخط
نص الظل يسمح لك لتحديد اللون ، تعويض ، وطمس الظل للنص. بناء جملة الخاصية كما يلي:
- يقوم الإزاحة الأفقية والإزاحة الرأسية بتعيين إزاحة الظل بالنسبة للنص. تتوافق القيمة 0 مع عدم وجود إزاحة ، وتحول القيم الموجبة الظل إلى اليمين وأسفل النص ، وتتحرك القيم السالبة إلى اليسار وإلى الأعلى.
- لون الظل يحدد لون الظل للنص. يمكنك استخدام أسماء الألوان ، رموز عرافة ، أو قيم رغب لتحديد اللون.
يمكن تعريف الظلال المتعددة بفصلها بفواصل:
- من المهم أن تتذكر أنه يجب تحديد خاصية اللون للنص مباشرة قبل خاصية ظل النص. خلاف ذلك ، قد يكون للظل لون افتراضي ، وهو أمر غير مرغوب فيه دائما.
- يتم استخدام خاصية ظل النص لإضافة ظل إلى النص باستخدام كس. انها تسمح لك لتعيين لون الظل وحجمه وموقعه. والنتيجة هي تأثير يجعل النص أكثر تعبيرا وجاذبية.
- نص الظل: لا شيء;
- نص-الظل: ح-الظل الخامس-الظل طمس-لون دائرة نصف قطرها;
- وضع الظلال بقيم معينة
- الإزاحة الأفقية للظل بالنسبة للنص (تقوم القيمة الموجبة بتحويل الظل إلى اليمين ، وتحركه القيمة السالبة إلى اليسار)
الخامس الظل
- الإزاحة الرأسية للظل بالنسبة للنص (قيمة موجبة تحرك الظل لأسفل ، قيمة سالبة تحركه لأعلى)