كيفية تنفيذ زخرفة النص باستخدام CSS

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

• ما هي زخرفة النص؟
• أنواع زخارف النص في CSS
• زخرفة النص باستخدام CSS: Code
• زخرفة النص تخطي

ما هي زخرفة النص؟

يحدد مظهر الخطوط الزخرفية على النص. إنها خاصية مختصرة لـ:

• خط زخرفة النص
• زخرفة النص اللون
• زخرفة النص

يتم تحديده كواحد أو أكثر من القيم المفصولة بمسافات تمثل te طويلاًxt- زخرفة الخصائص.

بناء الجملة:

زخرفة النص: || ||

أين،

• خط زخرفة النص: يتم استخدامه لضبط نوع الزخرفة المستخدمة مثلتسطير وتسطير وخط عبر.

• لون زخرفة النص:يستخدم لضبط لون الزخرفة.

  
  
  

• نمط زخرفة النص: يتم استخدامه لضبط نمط الخط مثلصلب ، مموج ، منقط ، متقطع ، مزدوج

أنواع زخارف النص في CSS

• أوفرلين:

#decoration {text-decoration: overline}

• عبر الخط:

#decoration {text-decoration: line-through}

• تسطير:

#decoration {text-decoration: underline}

• مزيج:

#decoration {text-decoration: underline line-through overline}

انتاج:

زخرفة النص باستخدام CSS: Code

الشفرة:

كود CSS:

كيفية استخدام الماسحات الضوئية في جافا

#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline dotted red} #wavy {text-decoration: line-through wavy}

انتاج:

زخرفة النص تخطي

يمكن أيضًا استخدام خاصية تُعرف باسم text-decoration-skip حيث يتم تسطير النص بشكل زائد ، وخط عبر ، وتسطير. يساعد في تزيين النص. إنه يحدد ببساطة كيفية رسم التسطير والتسطير عند مرورهما فوق صعود وهبوط.

#decoration {text-decoration-skip: ink}

القيم التي يمكن استخدامها مع عمليات تخطي زخرفة النص هي:

• شاء : (افتراضيًا) يتخطى السطر الكائنات المضمنة ، مثل الصور أو العناصر المضمنة.

• لا شيء : الخط يعبر كل شيء.

• المساحات : يتخطى خط الزخرفة المسافات ، والأحرف الفاصلة بين الكلمات ، وأي مسافات معدة بمسافات بين الأحرف أو مسافات بين الكلمات.

• حبر : يتخطى خط الزخرفة الحروف الرسومية أو التنازلية أو الصاعدة.

• حواف : يبدأ خط الزخرفة قليلاً بعد حافة بداية المحتوى وينتهي قليلاً قبل حافة نهاية المحتوى.

• زخرفة المربع : يتخطى خط الزخرفة الهامش والحد والحشو الموروث.

نظرًا لأن هذه الخاصية لا يدعمها أي متصفح حتى الآن لا يوجد عرض توضيحي ، ولكن إليك مثال في الصورة أدناه يوضح كيف يمكن أن تبدو كل قيمة بمجرد تنفيذ text-decoration-skip.

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

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'زخرفة النص باستخدام CSS' وسنعاود الاتصال بك.