يعد النص المتدرج طريقة رائعة لتنسيق النص تتيح لك إنشاء انتقالات من لون إلى آخر. يمكن استخدام هذا التأثير للفت الانتباه إلى العناوين الرئيسية أو إبراز المعلومات المهمة أو ببساطة إضافة نمط إلى كتلة نصية. في هذه المقالة ، سنلقي نظرة على دليل خطوة بخطوة لإنشاء نص متدرج باستخدام كس.
هناك عدة طرق لإنشاء نص متدرج في كس. سنستخدم خاصية مقطع الخلفية ، والتي تسمح لك بتحديد المنطقة التي سيتم تطبيق تدرج الخلفية عليها. في الوقت نفسه ، سيظل النص شفافا ، مما سيسمح لك برؤية خلفية التدرج.
تتمثل الخطوة الأولى في إنشاء حاوية للنص ، والتي سنطبق عليها تأثير التدرج اللوني. يمكنك استخدام أي عنصر هتمل لهذا ، على سبيل المثال,
أو . ثم ، في كس ، نحدد أبعاد وتحديد المواقع من الحاوية ، وكذلك تحديد التدرج الخلفية لاستخدامها للنص.
مثال على الكود:
.التدرج-نص-حاوية {
العرض: 300 بكسل;
الارتفاع: 100 بكسل;
الخلفية: التدرج الخطي (إلى اليمين ، # 0000 ، #0000 وما يليها);
}
- في هذا المثال ، أنشأنا حاوية بعرض 300 بكسل وارتفاع 100 بكسل وخصصنا لها خلفية متدرجة تنتقل من الأحمر (#0000) إلى الأزرق (#0000 وما يليها) من اليسار إلى اليمين.
- ما هو النص التدرج وكيف يعمل في كس
- كيفية تعيين نص التدرج في كس
- 1. تعيين نص التدرج باستخدام خاصية مقطع الخلفية
- 2. وضع النص التدرج باستخدام اخفاء
- الخطوة 1: حدد العنصر الذي سيتم تعيين نص التدرج له
- الخطوة 2: تعيين تدرج الخلفية للنص
- الخطوة 3: التباين وسهولة قراءة النص المتدرج
- سؤال وجواب
- ما بناء الجملة يجب أن تستخدم لإنشاء نص التدرج في المغلق?
- كيف يمكنني تغيير ألوان التدرج للنص?
- هل من الممكن إنشاء نص التدرج شعاعي في المغلق?
- كيف يمكنني تغيير اتجاه التدرج للنص?
- هل من الممكن إنشاء نص متدرج بألوان متعددة?
هل من الممكن تطبيق تأثير التدرج على النص فقط على جزء معين من الصفحة?
ما هو النص التدرج وكيف يعمل في كس
نص التدرج هو نمط من النص يتم إنشاؤه باستخدام ألوان التدرج في كس. بدلا من أن يكون لونا واحدا ، يمكن للنص المتدرج الانتقال بسلاسة من لون إلى آخر ، مما يخلق تأثيرا مرئيا مذهلا. يمكن أن يكون التدرج عموديا أو أفقيا أو قطريا ، ويمكن أن يتكون من أي عدد من انتقالات الألوان.
- لإنشاء نص متدرج في كس ، يتم استخدام خاصية مقطع الخلفية مع خصائص أخرى مثل صورة الخلفية وحجم الخلفية. عند استخدام الخلفية كليب: خاصية النص; يتم تطبيق قيمة خلفية متدرجة على النص بدلا من اللون المحدد.
- قم بإنشاء عنصر كتلة يحتوي على نص التدرج.
- قم بتعيين الأنماط الضرورية للكتلة ، مثل الخط وحجم النص ولونه والمحاذاة.
- باستخدام خاصية مقطع الخلفية مع قيمة النص ، قم بتعيين خلفية التدرج للنص.
بالإضافة إلى ذلك ، يمكنك استخدام خصائص أخرى مثل صورة الخلفية وحجم الخلفية لتخصيص مظهر النص المتدرج.
| هنا مثال على رمز كس لإنشاء نص التدرج: | الممتلكات |
|---|---|
| المعنى | خلفية كليب |
| النص; | صورة الخلفية |
| التدرج الخطي (45 درجة ، # 0000 ، #0000 وما يليها); | حجم الخلفية |
| 100%; | اللون |
شفاف;
سيقوم هذا الرمز بإنشاء نص متدرج مع الانتقال من الأحمر إلى الأزرق ، بزاوية 45 درجة.
يمكن استخدام نص التدرج في كس لإنشاء عنوان أنيق ، أو تمييز المعلومات المهمة ، أو ببساطة إضافة اهتمام مرئي إضافي إلى صفحة ويب.
كيفية تعيين نص التدرج في كس
النص المتدرج هو نمط من النص ينتقل بسلاسة من لون إلى آخر. هناك عدة طرق لإنشاء نص التدرج في كس ، وفي هذا الدليل سوف ننظر في الطريقتين الأكثر شيوعا: استخدام خاصية الخلفية كليب واستخدام اخفاء.
1. تعيين نص متدرج باستخدام خاصية مقطع الخلفية
تحدد خاصية مقطع الخلفية منطقة الخلفية للعنصر الذي سيتم تطبيق التدرج عليه. لإنشاء نص متدرج ، تحتاج إلى تعيين صورة خلفية بتدرج وتعيين مقطع الخلفية: قيمة النص. سيسمح لك ذلك بتطبيق صورة الخلفية فقط على نص العنصر ، وليس على منطقته بأكملها.
على سبيل المثال ، لإنشاء نص متدرج مع انتقال أفقي من الأحمر إلى الأزرق ، يمكنك استخدام رمز كس التالي:
.مثال {
صورة الخلفية: التدرج الخطي (إلى اليمين ، الأحمر ، الأزرق);
- بكت-الخلفية-كليب: نص;
- موز-الخلفية-كليب: نص;
خلفية كليب: نص;
اللون: شفاف;
}
في هذا المثال ، قمنا بتعيين صورة خلفية بتدرج متدرج باستخدام دالة التدرج الخطي. ثم قمنا بتعيين مقطع الخلفية: خاصية النص بحيث يتم تطبيق التدرج اللوني فقط على نص العنصر. اللون: خاصية شفافة تجعل النص شفافا بحيث لا يتداخل مع التدرج اللوني.
2. وضع النص التدرج باستخدام اخفاء
الطريقة الثانية لإنشاء نص متدرج هي استخدام التقنيع باستخدام خاصية صورة القناع. في هذه الحالة ، نقوم بإنشاء قناع للنص باستخدام صورة خلفية ذات تدرج من شأنه أن يلقي بظلاله على النص ويجعله مرئيا.
Например, чтобы создать градиентный текст с вертикальным переходом от зеленого к желтому цвету, можно использовать следующий CSS-код:
.example {
background-image: linear-gradient(to bottom, green, yellow);
-webkit-mask-image: linear-gradient(to bottom, black, transparent);
mask-image: linear-gradient(to bottom, black, transparent);
}
في هذا المثال ، قمنا بتعيين صورة خلفية بتدرج لخاصية صورة الخلفية وإنشاء قناع باستخدام خاصية صورة القناع ، والتي تحتوي أيضا على انتقال متدرج من اللون الأسود إلى اللون الشفاف. يتيح لك ذلك عرض النص فقط من خلال القناع ، وإخفاء بقية المنطقة.
يمكنك الآن استخدام إحدى هذه الطرق لإنشاء نص متدرج في مشاريعك. استخدم خصائص مقطع الخلفية أو صورة القناع لتعيين خلفية متدرجة للنص وإنشاء تأثير ملحوظ.
الخطوة 1: حدد العنصر الذي سيتم تعيين نص التدرج له
تتمثل الخطوة الأولى في إنشاء نص متدرج في كس في تحديد العنصر الذي نريد تعيين نص التدرج له. يمكن أن يكون عنوانا أو فقرة أو أي عنصر آخر على صفحة الويب.
لنلق نظرة على مثال باستخدام رأس:
في هذا المثال ، استخدمنا رأس المستوى الأول
. إنه أحد العناصر الأكثر شيوعا التي يمكن استخدام نص التدرج فيها.
- ولكن يمكنك استخدام أي عنصر آخر يناسب المحتوى الخاص بك. على سبيل المثال:
- رأس المستوى الثاني
- الفقرة
- قائمة نقطية
- قائمة مرقمة
الجدول
تعتمد العناصر التي يجب استخدامها على احتياجاتك وتصميم صفحة الويب الخاصة بك. الشيء الرئيسي هو تحديد العنصر الذي تريد جعل التدرج.
الآن بعد أن أصبح لدينا العنصر المحدد ، يمكننا الانتقال إلى الخطوة التالية — تعيين لون التدرج للنص في كس.
الخطوة 2: تعيين تدرج خلفية للنص
لإنشاء نص متدرج في كس ، يمكننا استخدام خاصية مقطع الخلفية. تتيح لنا هذه الخاصية تحديد مكان عرض خلفية العنصر.
في حالتنا ، نريد أن يكون التدرج مرئيا فقط داخل النص ، لذلك سنستخدم قيمة النص لخاصية مقطع الخلفية.
لإنشاء نص متدرج ، نحتاج أيضا إلى تعيين تدرج الخلفية باستخدام خاصية الخلفية. سوف نستخدم التدرج الخطي بالقيمة التالية:.التدرج-النص {
معلومات أساسية: التدرج الخطي (إلى اليمين ، # ف 0000 ، #00 ف 00);
- بكت-الخلفية-كليب: نص;
خلفية كليب: نص;
اللون: شفاف;
}
في المثال أعلاه ، نقوم بإنشاء تدرج من الأحمر (#ف 0000) إلى الأخضر (#00 ف 00) في الاتجاه من اليسار إلى اليمين. ثم وضعنا قيمة النص ل-بكت الخلفية كليب وخصائص الخلفية كليب من أجل تطبيق التدرج فقط على النص.
أخيرا ، قمنا بتعيين قيمة اللون على شفافة. يعد ذلك ضروريا حتى يصبح النص شفافا ويسمح بتدرج الخلفية ليكون مرئيا.
قد يبدو مثال الكود الكامل كما يلي:
مثال على نص التدرج
بعد تطبيق هذه الأنماط ، يجب أن ترى أن النص أصبح تدرجا ، وأن خلفيته تتوافق مع التدرج المحدد من الأحمر إلى الأخضر.
الخطوة 3: التباين وسهولة قراءة النص المتدرج
أحد الجوانب المهمة عند إنشاء نص متدرج في كس هو التباين وسهولة القراءة. يجب أن يكون النص مرئيا بوضوح وسهل القراءة للمستخدمين.
- لتحقيق قراءة جيدة للنص المتدرج ، يجب مراعاة العوامل التالية:
- لون الخلفية: حدد لون الخلفية الذي يوفر تباينا كافيا مع لون النص. وهذا سوف يساعد على ضمان وضوح النص الخاص بك وسهولة القراءة اللازمة.
- حجم الخط: تأكد من أن حجم الخط مناسب للقراءة. قد يكون من الصعب قراءة حجم الخط الصغير جدا ، خاصة على خلفية متدرجة.
- نوع الخط: اختر خطا يقرأ جيدا على ألوان الخلفية المختلفة. قد تكون بعض الخطوط أكثر قابلية للقراءة من غيرها على خلفية متدرجة.
سمك الخط: انتبه إلى سمك الخط بحيث يكون جريئا بدرجة كافية ، ولكن ليس سميكا جدا. قد يكون الخط الرفيع جدا أقل قابلية للقراءة ، خاصة على خلفية ساطعة.
من المهم أيضا أن تتذكر أن المستخدمين المختلفين قد يكون لديهم نظام ألوان أو إعدادات رؤية مختلفة. بالإضافة إلى التباين وسهولة القراءة ، يوصى بتوفير طرق بديلة للوصول إلى المحتوى للمستخدمين ذوي الإعاقة.
يمكن أن يضيف النص المتدرج الاهتمام والجاذبية الجمالية إلى موقع الويب الخاص بك. ومع ذلك ، لا تنس أن التباين وسهولة القراءة من العوامل الرئيسية لضمان سهولة القراءة لزوار موقعك.
سؤال وجواب
ما بناء الجملة يجب أن تستخدم لإنشاء نص التدرج في المغلق?
لإنشاء نص متدرج في كس ، يمكنك استخدام بناء الجملة التالي: الخلفية: التدرج الخطي (إلى اليمين ، # فف00 سي سي ، #333399);
كيف يمكنني تغيير ألوان التدرج للنص?
لتغيير ألوان التدرج للنص ، تحتاج إلى تغيير قيم رموز الألوان في خاصية التدرج الخطي (). على سبيل المثال ، لتغيير لون النص من الأحمر إلى الأصفر ، يمكنك استخدام الكود التالي: الخلفية: التدرج الخطي (إلى اليمين ، الأحمر ، الأصفر);
هل من الممكن إنشاء نص التدرج شعاعي في المغلق?
نعم ، من الممكن إنشاء نص متدرج شعاعي في كس. للقيام بذلك ، استخدم خاصية الخلفية مع وظيفة التدرج الشعاعي (). على سبيل المثال ، لإنشاء نص متدرج شعاعي باللون الأحمر في المنتصف والأصفر على الحواف ، يمكنك استخدام الكود التالي: الخلفية: التدرج الشعاعي (أحمر ، أصفر);
كيف يمكنني تغيير اتجاه التدرج للنص?
لتغيير اتجاه التدرج ، تحتاج إلى تغيير قيمة الوسيطة إلى في خاصية التدرج الخطي (). على سبيل المثال ، لإنشاء نص متدرج أفقي ، تحتاج إلى استخدام القيمة إلى اليمين: الخلفية: التدرج الخطي (إلى اليمين ، الأحمر ، الأصفر);
هل من الممكن إنشاء نص متدرج بألوان متعددة?
نعم ، يمكنك إنشاء نص متدرج بألوان متعددة. للقيام بذلك ، حدد عدة قيم رمز اللون في خاصية التدرج الخطي (). على سبيل المثال ، لإنشاء نص متدرج مع الانتقال من الأحمر إلى الأصفر والأخضر ، يمكنك استخدام الكود التالي: الخلفية: التدرج الخطي (إلى اليمين ، الأحمر ، الأصفر ، الأخضر);
هل من الممكن تطبيق تأثير التدرج على النص فقط على جزء معين من الصفحة?