خط Wavy CSS. أنماط تشطت على الإنترنت

من المؤلف: إن أسطال شرط السفلات الروابط هو مهنة معقدة إلى حد ما، وننسى باستمرار الطريقة المناسبة في موقف واحد أو آخر. لحسن الحظ، سوف يساعدنا جون جيمسون في فهم هذا بسرعة في مقاله.

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

رقيقة، سيقان أسود مع مساحات حول الرسائل مع انخفاض الملاحظات - عمل مرسين Vitchery من المقال إنشاء إشارة تحت التشطيب إلى المتوسطة.

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

هدف

لماذا لا تستخدم Text Decoration: تسطير؟ إذا كنا نتحدث عن السيناريو المثالي، فيجب التأكيد:

الموضع دون خط الأساس؛

تخطي الأجزاء النائية السفلى من الحروف؛

تغيير اللون والسمك والأساليب؛

انتقل إلى سلسلة جديدة؛

العمل مع أي خلفيات.

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

اقتراب

إذن ما هي الأساليب التي لدينا تحت تصرفنا لتأكيد النص؟ تذكرت ما يلي:

تزيين النص

الصورة الخلفية؛

مرشحات SVG

underline.js (قماش)؛

text Decoration- *

دعنا نذهب طوال القائمة والنظر في جميع إيجابيات وسلبيات كل نهج.

خاصية تزيين النص

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

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

إياب

مجرد استخدام؛

تقع تحت خط الأساس؛

تخطي الأجزاء النائية السفلى من الحروف الافتراضية في Safari و iOS؛

يقفز إلى سلسلة جديدة؛

يعمل مع أي خلفيات.

ناقص

لا يفوت امتداد الأجزاء السفلية من الحروف في متصفحات أخرى؛

من المستحيل تغيير اللون والسمك والأساليب.

الملكية أسفل الحدود

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

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

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

على ال هذه اللحظة هناك 4 خصائص للتسلمين الأسطغي. أفضل بكثير من مجرد تزيين النص.

إياب

يمكنك استخدام خاصية الانتقال وتحريك اللون والسمك؛

يقفز إلى سلاسل جديدة افتراضيا إذا كان العنصر ليس كتلة مضمنة؛

ناقص

الخط بعيد جدا، ومن الصعب تحريكها؛

تحتاج الكثير من الخصائص غير الضرورية إلى تسطير بدا جيدا؛

تحديد نص ضعيف عند استخدام نص الظل.

مربع الظل الممتلكات

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

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

إياب

يمكن وضعها تحت خط الأساس؛

يمكنك تخطي Callouts باستخدام Text-Shadow؛

يمكن تغيير اللون والسمك.

يقفز إلى خطوط جديدة.

ناقص

من المستحيل تغيير الأساليب؛

لا يعمل مع جميع الخلفيات.

خاصية صور الخلفية

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

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

إياب

يمكن أن يكون موجودا أسفل الأساس؛

يمكنك تخطي الدلالات السفلية باستخدام ظلال النص؛

من الممكن تغيير اللون، سمك (حتى على بولباكسل) والأساليب؛

يعمل مع صور المستخدم؛

يقفز على خطوط جديدة؛

يعمل مع أي خلفية، إن لم يكن باستخدام نص نص.

ناقص

يمكن أن يختلف حجم الصورة بطرق مختلفة لأذونات مختلفة والمتصفحات وزيادة المستويات.

مرشحات SVG.

لعبت مع هذه الطريقة. يمكنك إنشاء عنصر فلتر SVG Inlaain الذي سيقسم خطا، وتوسيع النص لإخفاء أجزاء الخط التي يجب أن تكون شفافة. يمكنك تعيين معرف المرشح والرجوع إليه في CSS باستخدام عامل التصفية: URL ('# SVG-underline').

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

وبالتالي يبدو أنه في Chrome و Firefox:

في IE، الحافة والسفن السفاري مع الدعم، تنشأ المشاكل. من الصعب اختبار CSS دعم مرشحات SVG. يمكنك استخدام قاعدة Supports على Filter، ولكن عليك التحقق من عمل المرجع نفسه فقط، وليس المرشح المطبق أم لا. طريقي تعمل بوقاحة للغاية مع المتصفحات، لذلك كن حذرا مضاعفا.

إياب

تقع تحت خط الأساس؛

تخطي الدلائل السفلي؛

يمكن تغيير اللون والسمك والأساليب؛

يعمل على أي خلفية.

ناقص

لا تقفز على خطوط جديدة؛

لا يعمل في IE، EDGE و Safari، ولكن يمكنك تحديد الديكور النصي كصد. السفلية في رحلات السفاري أنفسهم تبدو رائعة.

underline.js (قماش)

Underline.js هي مكتبة مذهلة. أنا مثيرة للإعجاب أن ياردة تشانغ يمكن أن تفعل مع JS والاهتمام بالتفاصيل. إذا لم تكن قد شاهدت بعد التوضيح التوضيحي التقني .JS، توقف لمدة دقيقة ونرى. تحتوي الشبكة على أداء رائع لمدة تسعة دقائق على مبادئ العمل، وسأفق بسرعة الآن. يتم سحب النفايات باستخدام قماش. نهج جديد تماما، يعمل بشكل جيد بشكل مدهش.

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

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

Text Decoration- الخصائص

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

نص الديكور

text-Decoration-Skip

النمط النصي

لا تفرح في وقت مبكر، أنت تعرف عن الدعم في المتصفحات.

خاصية Text-Decoration Color

تتيح لك خاصية Text-Decoration Color تغيير نص الشرطة السفلية بشكل منفصل عن لون النص. الخصائص لديها حتى دعم جيد في المتصفحات. يعمل في فايرفوكس وبادئة في رحلات السفاري. هناك ناقص الخاص بك - إذا كنت لا تقوم بتنظيف الخط حول Callouts، في Safari يقع على رأس النص. ثعلب النار:

خاصية Text-Decoration-Skip

خاصية Text-Decoration-Skip هي المسؤولة عن تخطي الدلالات السفلية في النص المسطر.

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

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

خاصية نمط الديكور

توفر خاصية نمط النصوص نفس السطر تحت عنوان على غرار الحدود، ولكن يضيف أيضا النوع الجديد - تموجي. القيم الممكنة:

الآن، تعمل خاصية نمط النص على طراز Decoration فقط في فايرفوكس، ويرد شاشة لقطة الشاشة أدناه:

مجموعة من التركيز أحادي اللون تبدو؟

ما هو الخطأ؟

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

نص تسطير النص

نص تسطير النص

يبدو أن هذه الخصائص قد ألقيت من الإصدار المبكر من CSS بسبب عدم الاهتمام بها. لم ينطبقوا. مهلا، أنا لا ألوم لهذا.

الاستنتاجات

إذن أفضل طريقة للتأكيد على النص؟ كل هذا يتوقف على عوامل مختلفة.

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

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

ولتخطي أحرف الحروف على خلفيات أو صور التدرج، حاول استخدام مرشح SVG. أو ببساطة لا تخلط مثل هذه الخلفيات مع الشرطة السفلية. في المستقبل، عند تحسين الدعم في المتصفحات، يمكنك استخدام خصائص Text-Decoration- *.

وصف

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

بناء الجملة

text-Decoration: [Blink || خط من خلال || Overline ||. تسطير] |. لا شيء | يرث.

قيم

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

HTML5 CSS2.1 IE CR OP SA FX

الهجوم الاستراتيجي

نموذج كائن

document.getelementbyid ("elementid") .style.textredecorage

document.getelementbyid ("elementid") .style.textdecorageBlink

document.getelementbyid ("elementid") .style.textDecorylinethrough

document.getelementbyid ("elementid") .style.textdecorationnone

document.getelementbyid ("elementid") .style.textdecorageorsenceone

document.getelementbyid ("elementid") .style.textdecorageunderlinelline

متصفحات

Internet Explorer قبل الإصدار 7.0 لا يدعم قيمة Worherit. يقع الخط الذي تم الحصول عليه باستخدام قيمة الخط في IE7 أعلى من المتصفحات الأخرى؛ في IE8، تم إصلاح هذا الخطأ.

يسمح لك بإجراء تسطير آخر في HTML Lower (تسطير)، أعلى (Overline)، عبر النص (خط)، إلخ. متوافق مع هذه الشريحة مع السابق وسيعمل:

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

نمط الديكور النصي - النص السفلية

يخضع الخيار مظهر خط الزخرفية ل / مرجع. في توصيات CSS الجديدة، تمت إضافة قيم متموجة ومزدوجة، الآن فهي فقط 5:

• الصلبة - الخط الصلب
• ضعف مزدوج (من المثال الأول أعلاه)؛
• منقط - يتكون من سلسلة من النقاط؛
• متقطع - يسمح لك بإنشاء CSS تسطير المنقط؛
• متموج - خط رائع مذهل.

نص تسطير النص - تحديد المواقع CSS Enlerscore

بمساعدة هذه الخاصية، يمكنك التحكم في موضع الخط النسبي إلى خط Glyph.
إجمالي 4 خيارات متوفرة:

• يوجد تلقائي مقرب كنص نص ممكن؛
• تحت - تحت أدنى حد من الخط؛
• اليسار واليمين - يسار / يمين للإدخالات المعروضة عموديا.

فيما يلي الاختلاف البصري بين النص السفلي السفلي باستخدام Auto و Auto:

الفرق، وأعتقد، هو واضح تماما.

text-Decoration-Skip - نزيل الشرطة السفلية للعناصر

باستخدام الخيار، يمكنك إلغاء (تخطي) تزيين بعض العناصر في سلسلة HTML.وبعد لفهم أفضل القيم الصحيحة للمسافات، الكائنات، الديكور مربع، الحواف، الحبر، سأكرر الصورة من آخر ملاحظة:

وهذا هو، على سبيل المثال، بمساعدة الحبر، يمكنك جعل انخفاض الأسفل في CSS، والتي لن يتم عبرها مع الشخصيات. تتيح لك قيمة الكائنات تخطي العناصر المضمنة (Inline-Block) - إدراج SPAN، وسيتم مقاطعة الخط الصلب في المكان المناسب:

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

رقائق إضافية للتأكيد

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

كيفية إزالة المرجع السفلية

ج: تحوم (تزيين النص: تسطير؛)

تتيح لك كلتا الأمثلة أدناه فهم منطق العمل عند التحويم: أو تشير في البداية إلى CSS Unlescore. الروابط، ثم قم بإزالته للتحوم أو العكس.

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

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

استخدام زخرفة النص

توفر خاصية Text Decoration ذات القيمة التلقائية التركيز على النص؛ يمكن ملاحظة هذا النوع من التركيز المراجع الافتراضية. الخط الذي تم إنشاؤه بهذه الطريقة يساوي عرض النص وسوف يكون بنفس لون العنوان نفسه. يمكنك تغيير خط اللون من خلال خاصية ملونة Text Decoration. يوضح المثال 1 استخدام زخرفة النص إلى العنصر

.

مثال 1. استخدام زخرفة النص

وتظهر نتيجة هذا المثال في الشكل. واحد.

تين. 1. نوع الخط الذي تم إنشاؤه من خلال تزيين النص

لا يدعم متصفحات IE و Edge خاصية لون Decoration.

باستخدام أسفل الحدود

ملكية أسفل الحدود. يضيف إلى العنصر أسفل سطر سمك معين واللون والأناقة. يأخذ مثل هذا الخط عرض كامل متاح، على الرغم من طول نص الرأس (الشكل 2).

تين. 2. عرض الخط الذي تم إنشاؤه بواسطة أسفل الحدود

يمكن ضبط المسافة من خط إلى نص باستخدام الخاصية. أسفل الحشو كما هو مبين في المثال 2.

مثال 2. استخدام أسفل الحدود

قانون الكلام الثقافي في القرن الثاني والعشرين

في الواقع، يوضح جهاز نص الأسطو الأسطو خطاب، ويمنحه صوته، شخصيته الخاصة.

إلى الخط يكون عرض النص، يكفي تحويل الرأس إلى عنصر كتلة مضيق عن طريق إضافة خاصية إلى محدد H2 عرض مع قيمة كتلة مضمنة.

الاستعمال :: الفترة والمحتوى

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

تين. 3. خط تم إنشاؤه بواسطة :: بعد

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

مثال 3. الاستخدام :: بعد

قانون الكلام الثقافي في القرن الثاني والعشرين

في الواقع، يوضح جهاز نص الأسطو الأسطو خطاب، ويمنحه صوته، شخصيته الخاصة.

هناك حفنة بطرق مختلفة تحت إبطاء. قد تتذكر المادة Marsina Vicari "Licking Link underline" على المتوسط. المطورون المتوسطة لا يحاولون القيام بشيء مجنون، فإنهم يريدون فقط إنشاء خط جميل تحت النص.

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

هدف

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

• وضعه تحت خط الأساس؛
• تخطي العناصر النائية؛
• تغيير اللون والسمك وخط النمط؛
• العمل مع نص متعدد الخطوط؛
• العمل على أي خلفية.

أعتقد أن هذه جميع متطلبات معقولة، ولكن كما أعرف، لا توجد وسيلة بديهية لتحقيق ذلك بمساعدة CSS.

اقتراب

لذلك هذا هو أساليب مختلفةالتي يمكننا تنفيذ الشرطة السفلية على شبكة الإنترنت؟

إليك تلك التي أعتبرها:

• تزيين النص
• أسفل الحدود.
• مربع الظل.
• الصورة الخلفية؛
• مرشحات SVG
• underline.js (قماش)؛
• text Decoration- *.

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

تزيين النص.

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

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

• سهل الاستخدام؛
• وضعه تحت خط الأساس؛
• بشكل افتراضي، أدنى عناصر الإزالة في Safari و iOS؛
• يؤكد النص متعدد الخطوط؛
• يعمل على أي خلفية.

• لا يفوت العناصر النائية أقل في جميع المتصفحات الأخرى؛
• لا يسمح لك بتغيير خط اللون أو السماكة أو النمط.

أسفل الحدود.

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

هذه هي الطريقة التي يشبه القاع الحدود مثل العناصر الصغيرة.

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

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

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

• يمكن تخطي العناصر عن بعد باستخدام ظلال النص؛
• يمكن تغيير اللون، السمنة وخط النمط؛
• يسمح لك باستخدام التحولات والرسوم المتحركة للألوان والدماء؛
• يعمل مع نص متعدد الخطوط، إذا لم يتم تطبيق قيمة الكتلة المضمنة؛
• يعمل على أي خلفية، إذا كنت لا تستخدم نص النص.

• وضعت منخفضة جدا والتحركات بطريقة معقدة؛
• تستخدم العديد من الخصائص الإضافية للتشغيل السليم؛
• عند استخدام نص نص، يبدو اختيار النص قبيحا.

مربع الظل

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

يمكنك استخدام نفس الخدعة مع ظل النص لملء التمريرات بين العناصر السفلية والمناطق البعيدة. ولكن إذا اختلاف لون السفلات السفلية عن لون النص - أو هو ببساطة رقيقة تماما، فلن يواجه الخط عناصر عن بعد عند استخدام Text-Decoration.

• يسمح لك بتغيير لون وسمك الخط؛
• يعمل مع النص متعدد الخطوط.

• لا يسمح بتغيير نمط الشرطة السفلية؛
• إنه يعمل على أي خلفية.

الصورة الخلفية.

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

للعمل هذا النهج، من الضروري أن يكون النص في عرض الوضع القياسي: مضمن؛ وبعد

يتم الخيار التالي دون التدرج الخطي، للآثار التي يمكنك إضافة صورة الخلفية الخاصة بك.

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

• قد يختلف حجم الصورة اعتمادا على دقة الشاشة والمتصفح والتكبير.

مرشحات SVG.

لقد لعبت كثيرا بهذه الطريقة. يمكنك إنشاء عامل تصفية أحرف صغيرة SVG، مما يسجل خطا ثم قم بتوسيع النص لإخفاء جزء من السطر، والتي نريد أن نجعلها شفافة. يمكنك بعد ذلك تعيين مرشح المعرف والرجوع إليها في CSS تقريبا مرشح ذلك: URL ('# SVG-underline').

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

هذه هي الطريقة التي يبدو فيها في Chrome و Firefox:

الدعم في IE، EDGE و Safari مشكلة. من الصعب اختبار دعم مرشح SVG في CSS. يمكنك استخدام التوجيه Supports مع مرشح، لكنه سيحقق فقط من تشغيل رابط المرشح، ولكن ليس عمل المرشح نفسه. انتهت محاولاتي بالتعريف المتبادل لإمكانيات المتصفح، وهذا هو نقص ملموس لطريقة.

• قد يتم وضعها تحت خط الأساس؛
• يمكن أن تفوت عناصر عن بعد؛
• يسمح بالتغيير في لون اللون والسمك والنمط؛
• يعمل على أي خلفية.

• لا يعمل مع نص متعدد الخطوط؛
• لا يعمل في IE، EDGE و Safari، ولكن يمكنك استخدام Decoration Text-Decoration كخيار نسخ احتياطي، في Safari يبدو جديرا.

underline.js (قماش)

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

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

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

خصائص جديدة

تتذكر أنني وعدت بالحديث عن الديكور النصي. لقد حان الوقت.

في حد ذاته، تعمل هذه الخاصية رائعة، ولكن يمكنك إضافة خصائص تجريبية متعددة للتخصيص عرض خارجي تحت إبطاء.

• نص الديكور
• text-Decoration-Skip
• النمط النصي

ولكن لا تفرح كثيرا ... الدعم في المتصفحات - كما هو الحال دائما. لذلك يذهب.

نص الديكور

تتيح لك خاصية Text-Decoration Color تغيير مستوى الأسفل بشكل منفصل عن لون النص. دعم هذه الخاصية أفضل مما يمكن أن تتوقعه - إنه يعمل في فايرفوكس وبادئة في رحلات السفاري. هذا ما snag: إذا كان لديك عناصر عن بعد، فسوف يضع Safari تحت التأكيد على النص.

text-Decoration-Skip

تتضمن خاصية Text-Decoration-Skip مقطعا من العناصر عن بعد في النص المسطر.

هذه الخاصية غير قياسية تعمل الآن فقط في Safari، مع البادئة -Webkit. يقوم Safari افتراضيا بتنشيط هذه الخاصية هذه الخاصية، لذلك يتم دائما عبر العناصر النائية.

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

النمط النصي

توفر خاصية نمط النصوص نفس الفرص التصميم نفسها بمثابة خاصية على غرار الحدود، مما يضيف النمط المتموج باستثناء.

فيما يلي قائمة القيم المتاحة:

• متقطع.
• منقط.
• مزدوج.
• صلب

الآن تعمل الممتلكات على طراز Text-Decoration فقط في فايرفوكس، وهنا لقطة شاشة لها:

ما المفقود

تعد سلسلة من خصائص Text Decoration- * بديهية أكبر بكثير من خصائص CSS الأخرى ل Ulderscore. ولكن إذا نظرت أكثر بعناية، فلا يكفي تلبية طلباتنا لتعيين سمك أو موضع الخط.

بعد دراسة صغيرة، وجدت زوجين عقارات أخرى:

• نص تسطير النص
• نص تسطير النص

على ما يبدو، يرتبطون بمسودات CSS المبكرة، لكنها لم تنفذ أبدا في المتصفحات بسبب عدم الاهتمام.

الاستنتاجات

إذن ما هي طريقة تسطير الأفضل؟

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

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

ل سلسلة منفصلة يستخدم النص أسفل الحدود جنبا إلى جنب مع أي خصائص إضافية.

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

في المستقبل، عند الدعم في المتصفحات أفضل، ستكون الإجابة الوحيدة مجموعة من خصائص Text Decoration- *.

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