كيفية إنشاء تأثير الخط فوق الخط: دليل مفصل

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

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

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

كود هتمل لإنشاء تأثير مرتفع:

سيتم عرض هذا النص فوق السطر. 

وسيتم عرض هذا النص أسفل السطر.

1. الخطوة 1: اختيار الخط الأساسي
2. الخطوة 2: إنشاء حاوية ملفوفة
3. الخطوة 3: إضافة عنصر زائف
4. الخطوة 4: تعيين خصائص العنصر الزائف
5. الخطوة 5: تطبيق التأثير على النص
6. الخطوة 6: إعدادات وتحسينات إضافية

الخطوة 1: اختيار الخط الأساسي

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

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

عند اختيار خط أساسي ، ضع في اعتبارك عوامل مثل:

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

الخطوط قاعدة شعبية هي أريال ، هلفتيكا ، تايمز نيو رومان ، فيردانا وكاليبري. اختر خطا يلبي متطلباتك وتفضيلاتك.

الخطوة 2: إنشاء حاوية ملفوفة

2. تعويم: اليسار;
3. .

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

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

الخطوة 3: إضافة عنصر زائف

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

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

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

زيادة حجم الخط

باستخدام خاصية المحتوى ، نحدد النص الذي يجب عرضه في العنصر الزائف. في حالتنا ، سيكون مجرد سلسلة من"النص".

تحدد خاصية الموضع موضع العنصر الزائف. نستخدم القيمة المطلقة للسماح للعنصر الزائف بالتحرك بحرية عبر المستند.

تشير الخصائص العلوية واليسرى إلى النقطة التي سيتم فيها عرض العنصر الزائف. وضعنا أعلى: -10 بكسل لوضع العنصر الزائف فوق الخط بمقدار 10 بكسل.

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

تحدد خاصية اللون لون نص العنصر الزائف. نستخدم قيمة لون النص الحالي لضمان الاتساق مع بقية المحتوى.

أخيرا ، باستخدام خاصية حجم الخط ، يمكننا زيادة حجم خط العنصر الزائف لإحداث تأثير النص فوق السطر.

الخطوة 4: تعيين خصائص العنصر الزائف

المحتوى

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

القيمة المطلقة

لإصلاح موضع العنصر الزائف فوق النص الرئيسي. للقيام بذلك ، إضافة التعليمات البرمجية التالية:

أعلى

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

:: قبل { أعلى: -10 بكسل؛}

يمكنك أيضا تعيين لون النص وحجم الخط وسمك الخط وخصائص أخرى للعنصر الزائف لتحقيق تأثير الخط المطلوب فوق الخط.

الخطوة 5: تطبيق التأثير على النص

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

فئة

• وحدد اسم الفئة التي تم إنشاؤها لتأثير الخط فوق السطر. على سبيل المثال:
• - تطبيق تأثير على رأس المستوى الثالث

- تطبيق تأثير على فقرة

3. احفظ التغييرات وقم بتحديث الصفحة في المتصفح. الآن يجب أن يعرض العنصر المحدد النص مع تأثير الخط المطبق فوق السطر.

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

الخطوة 6: إعدادات وتحسينات إضافية

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

}

2. تغيير لون النص: يمكنك أيضا تغيير لون النص الخاص بتأثير الخط أعلى السطر لمطابقة تصميمك أو تفضيلاتك المرئية. استخدام الخاصية 'اللون' للقيام بذلك.

.تأثير النص {

اللون: # 333;