ما به انجام ترفندها در css خالص ادامه می دهیم. امروز به شما خواهم گفت که چگونه با استفاده از css یک مدل زیبا بسازید خط تقسیم به شکل موجدر سایت. برای مثال می توان از آن برای جداسازی بصری پست های وبلاگ یا جدا کردن بلوک ها در نوار کناری استفاده کرد.
یک بار قبلاً در مورد آن صحبت کردم. اما از تگ hr دایناسور با چند قانون طراحی پیچیده برای بازی با سایه استفاده کرد.
امروز شرایط کاملا متفاوت است. برای نمایش یک خط به شکل موج، باید ترفندهای بسیار بیشتری به قوانین اضافه کنید و نه فقط css، بلکه css3 را اعمال کنید. خوش آمدید!
برای شروع، کد معمولی html. ما خطوط را به صورت div های خالی با مجموعه ای از قوانین خاص ترسیم می کنیم. بلوک های خالی، البته، شیطانی هستند. اما گاهی اوقات باید آن را تحمل کنید.
در اینجا ما 4 نوع خط را نشان داده ایم. و اینگونه است که مجموعه ای از سبک ها در css برای آنها به نظر می رسد:
موج (
سرریز: پنهان
موقعیت: نسبی;
عرض: 630 پیکسل؛
ارتفاع: 50 پیکسل؛
}
خط (
موقعیت: مطلق;
عرض: 630 پیکسل؛
ارتفاع: 26px;
}
.خط 1 (
}
.خط 2 (
}
خط (
اندازه پس زمینه: 50px 50px;
}
.smallLine (
موقعیت: مطلق;
عرض: 630 پیکسل؛
ارتفاع: 5px;
}
.smallLine1 (
پس زمینه: گرادیان خطی (45 درجه، شفاف، شفاف 49٪، سیاه 49٪، شفاف 51٪).
}
.smallLine2 (
پس زمینه: گرادیان خطی (-45 درجه، شفاف، شفاف 49٪، سیاه 49٪، شفاف 51٪).
}
.smallLine (
اندازه پس زمینه: 10px 10px;
}
.دایره (
موقعیت: مطلق;
عرض: 630 پیکسل؛
ارتفاع: 20 پیکسل؛
پس زمینه: گرادیان شعاعی (16 پیکسل، شفاف، شفاف 4 پیکسل، سیاه 4 پیکسل، سیاه 10 پیکسل، شفاف 11 پیکسل)؛
اندازه پس زمینه: 30px 40px;
}
.circle2 (
بالا: 20 پیکسل؛
سمت چپ: 15 پیکسل
}
بیضی (
موقعیت: مطلق;
پس زمینه: گرادیان شعاعی (بیضی، شفاف، شفاف 7 پیکسل، سیاه 7 پیکسل، سیاه 10 پیکسل، شفاف 11 پیکسل)؛
اندازه پس زمینه: 36px 40px;
عرض: 630 پیکسل؛
ارتفاع: 20 پیکسل؛
}
ellipse2 (
بالا: 20 پیکسل؛
سمت چپ: 18 پیکسل;
پس زمینه موقعیت: 0px -20px.
}
در اینجا ما از ترفندهایی مانند گرادیان خطی و گرادیان شعاعی از زرادخانه css3 استفاده کردیم.
گزینه دیگری برای استفاده از خط تقسیم به شکل موج (پایین ترین آن در تصویر ابتدای پست) وجود دارد. می توان از آن در انتهای بلوک، به عنوان تزئین پایین استفاده کرد. کد به اندازه کافی ساده است. ابتدا html:
بیایید عناصر شبه: قبل و بعد: را در قوانین css اعمال کنیم. می توانید در مورد آنها بخوانید. این چیزی است که کد شبیه به آن خواهد بود:
موج (
عرض: 630 پیکسل؛
پس زمینه: # 333;
ارتفاع: 30 پیکسل؛
موقعیت: نسبی;
}
.wave :: قبل (
محتوا: ""؛
موقعیت: مطلق;
سمت چپ: 0;
پایین: 0;
سمت راست: 0;
background-repeat: تکرار;
ارتفاع: 10 پیکسل؛
اندازه پس زمینه: 20px 20px;
تصویر پس زمینه:
گرادیان شعاعی (دایره در 10px -5px، شفاف 12px، # 19d1ff 13px)؛
}
موج :: بعد از (
محتوا: ""؛
موقعیت: مطلق;
سمت چپ: 0;
پایین: 0;
سمت راست: 0;
background-repeat: تکرار;
ارتفاع: 15 پیکسل؛
اندازه پس زمینه: 40px 20px;
تصویر پس زمینه:
گرادیان شعاعی (دایره در 10px 15px، # 19d1ff 12px، شفاف 13px)؛
}
همین! به دنبال آن برو!
از نویسنده:لینک یک ظاهر طراحی شده که بر آن تاکید می کند، یک تجارت دشوار است، و من مدام فراموش می کنم که کدام روش برای یک موقعیت خاص بهترین است. خوشبختانه، جان جیمسون در مقاله خود به ما کمک می کند تا به سرعت این موضوع را بفهمیم.
راه های زیادی برای استایل دادن به خطوط زیر وجود دارد. ممکن است مقاله ایجاد زیر خط برای پیوندهای متوسط را به خاطر داشته باشید. مدیوم سعی نمی کرد کاری را خارج از چارچوب انجام دهد، آنها فقط می خواستند زیر خط های جذابی در متن ایجاد کنند.
زیر خط‌های نازک و مشکی با فاصله‌های دور حروف با خطوط پایین اثر Marcin Whitchery در Creating Medium links underlines است.
زیر خط استاندارد خوب است که همچنین اندازه خوبی دارد و از هر فرود حذف شده است. بسیار بهتر از اکثر مرورگرهای پیش فرض. همانطور که مشخص است، Medium در این مسیر با چالش های زیادی روبرو شد. و حتی دو سال بعد، استایل خوب زیرخط ها باعث مشکلات زیادی می شود.
اهداف
چرا فقط از تزئین متن استفاده نکنید: زیر خط بکشید؟ اگر در مورد یک سناریوی ایده آل صحبت می کنیم، زیرخط ها باید:
زیر خط پایه باشد
از پسوند پایین حروف رد شوید.
تغییر رنگ، ضخامت و سبک؛
رفتن به خط جدید؛
با هر زمینه ای کار کنید
من معتقدم که می‌توانیم همه اینها را از زیر خط‌ها بخواهیم، اما تا آنجا که من می‌دانم، هیچ راه بصری برای حل همه این وظایف در CSS وجود ندارد.
رویکردها
پس چه راه هایی برای خط کشی متن داریم؟ یاد موارد زیر افتادم:
متن-تزیین;
تصویر پس زمینه؛
فیلترهای SVG؛
Underline.js (بوم)؛
متن - تزیین - *
بیایید کل لیست را مرور کنیم و تمام جوانب مثبت و منفی هر رویکرد را در نظر بگیریم.
خاصیت تزیین متن
ویژگی text-decoration ساده ترین راه برای خط کشیدن زیر متن است. فقط یک ویژگی باید اعمال شود. در متن کوچک، چنین خطی خوب به نظر می رسد، اما اگر اندازه فونت را افزایش دهید، از قبل ناخوشایند به نظر می رسد.
بزرگترین مشکل ویژگی text-decoration عدم سفارشی سازی است. این خط از رنگ و اندازه فونت متنی که روی آن اعمال می‌شود استفاده می‌کند و هیچ راه بین مرورگری برای تغییر سبک وجود ندارد. بعداً در مورد این ملک با جزئیات بیشتر صحبت خواهیم کرد.
طرفداران
آسان برای استفاده؛
زیر خط پایه است.
Ascenders را به طور پیش فرض در Safari و iOS رد می کند.
به یک خط جدید می پرد.
با هر زمینه ای کار می کند.
موارد منفی
از گسترش قسمت های پایینی حروف در مرورگرهای دیگر صرف نظر نمی کند.
رنگ، ضخامت و سبک را نمی توان تغییر داد.
خاصیت حاشیه پایین
ویژگی border-bottom تعادل خوبی بین سرعت و سفارشی سازی است. این رویکرد از مرزهای CSS اثبات شده استفاده می کند، به این معنی که شما به راحتی می توانید رنگ، وزن و سبک را تغییر دهید. این چیزی است که ویژگی border-bottom در عناصر درون خطی به نظر می رسد:
بزرگترین منفی این است که خط زیر آن چقدر از متن فاصله دارد. زیر خط زیر نزول حروف قرار دارد. این مشکل را می توان با ساختن عنصر درون خطی بلوک و کاهش ارتفاع خط حل کرد، اما پس از آن قابلیت پرش به خطوط جدید از بین می رود. برای خطوط تک خوب است، اما نه بیشتر.
علاوه بر این، می توانید از text-shadow برای مخفی کردن بخش هایی از خط در اطراف رهبران پایین استفاده کنید. در این صورت باید رنگ پس‌زمینه را شبیه‌سازی کنید، یعنی این روش فقط روی پس‌زمینه‌های یکنواخت کار می‌کند. گرادیان ها و تصاویر کار نمی کنند.
در حال حاضر 4 خاصیت برای استایل دادن به خط زیر وجود دارد. خیلی بهتر از تزیین متن.
طرفداران
می توانید از ویژگی transition استفاده کنید و رنگ و ضخامت را متحرک کنید.
اگر عنصر درون خطی نباشد، به صورت پیش‌فرض به خطوط جدید می‌پرد.
موارد منفی
خط بسیار دور است و حرکت آن دشوار است.
برای اینکه زیرخط خوب به نظر برسد، باید از ویژگی‌های غیرضروری زیادی استفاده شود.
انتخاب ضعیف متن هنگام استفاده از text-shadow.
ویژگی جعبه سایه
ویژگی box-shadow با استفاده از دو سایه داخلی یک زیر خط می کشد: یکی یک مستطیل ایجاد می کند و دیگری آن را پنهان می کند. این به این معنی است که یک پس زمینه یکنواخت برای کارکرد صحیح روش مورد نیاز است.
از همان ترفند سایه متن می توان برای شبیه سازی فضای سفید در اطراف رهبران پایین حروف استفاده کرد. اگر رنگ خط با متن متفاوت است، یا به اندازه کافی نازک است، نباید مشکلی وجود داشته باشد، مانند تزیین متن.
طرفداران
را می توان در زیر خط پایه قرار داد.
می توانید با استفاده از text-shadow از فراخوان ها رد شوید.
می توانید رنگ و ضخامت را تغییر دهید.
به خطوط جدید می پرد
موارد منفی
سبک ها قابل تغییر نیستند.
با همه پس زمینه ها کار نمی کند.
ویژگی تصویر پس زمینه
ویژگی پس‌زمینه-تصویر برای اهداف ما بهترین است و جنبه‌های منفی بسیار کمی دارد. ایده این است که شما یک تصویر با گرادیان خطی و موقعیت پس زمینه ایجاد کنید که در محور افقی در امتداد خطوط متن تکرار می شود. عنصر باید نمایش داده شود: inline ;.
نسخه ی نمایشی زیر از گرادیان خطی استفاده نمی کند. می توانید از تصویر خود برای ایجاد یک جلوه جالب استفاده کنید.
طرفداران
را می توان در زیر خط پایه قرار داد.
می توانید با استفاده از text-shadow از رهبران پایین رد شوید.
می توانید رنگ، ضخامت (حتی نیم پیکسل) و سبک را تغییر دهید.
با تصاویر سفارشی کار می کند.
پرش به خطوط جدید؛
تا زمانی که از text-shadow استفاده نشود، با هر پس زمینه ای کار می کند.
موارد منفی
اندازه تصویر برای رزولوشن‌ها، مرورگرها و سطوح زوم مختلف می‌تواند به طرق مختلف متفاوت باشد.
فیلترهای SVG
من با این روش بازی کردم. می توانید یک عنصر فیلتر SVG درون خطی ایجاد کنید که خط را ترسیم کند و متن را گسترش دهید تا قسمت هایی از خط را که باید شفاف باشند پنهان کنید. یک فیلتر را می توان با استفاده از فیلتر: url (# svg-underline) شناسه و در CSS ارجاع داد.
چه مزیتی دارد - فیلتر بدون تکیه بر سایه متن شفافیت را اضافه می کند. یعنی می‌توانید در هر پس‌زمینه‌ای، از جمله شیب‌ها و تصاویر، از حرف‌های پایین‌تر رد شوید! مثال زیر فقط با یک خط متن کار می کند، پس مراقب باشید.
و در کروم و فایرفاکس اینگونه به نظر می رسد:
مشکلات IE، Edge و Safari با مشکلاتی روبرو هستند. آزمایش پشتیبانی از فیلترهای SVG در CSS دشوار است. می‌توانید از قانون supports@ در فیلتر استفاده کنید، اما این فقط بررسی می‌کند که آیا خود پیوند کار می‌کند، نه اینکه آیا فیلتر اعمال شده است یا خیر. روش من نسبت به مرورگرها بسیار ناپخته است، پس دوچندان مراقب باشید.
طرفداران
واقع در زیر خط پایه؛
از رهبران پایین می گذرد.
شما می توانید رنگ، ضخامت و سبک را تغییر دهید.
در هر زمینه ای کار می کند
موارد منفی
به خطوط جدید نمی پرد.
در اینترنت اکسپلورر، Edge و Safari کار نمی کند، اما می توانید text-decoration را به عنوان یک بازگشت مشخص کنید. خطوط سافاری به تنهایی عالی به نظر می رسند.
Underline.js (کانواس)
Underline.js یک کتابخانه شگفت انگیز است. من از کاری که ونتینگ ژانگ توانست با JS و توجه به جزئیات انجام دهد تحت تأثیر قرار گرفته ام. اگر هنوز نسخه ی نمایشی فناوری Underline.js را ندیده اید، یک دقیقه توقف کنید و نگاهی بیندازید. یک گفتگوی نه دقیقه ای فوق العاده در شبکه با موضوع اصول کار وجود دارد، اکنون سریع آن را برای شما بازگو می کنم. خطوط زیر با استفاده از بوم کشیده می شوند. یک رویکرد کاملاً جدید که به طرز شگفت آوری خوب عمل می کند.
با وجود نام جذاب، این فقط یک نمایش فنی است. یعنی شما نمی توانید بلافاصله کتابخانه را بدون یک سری تغییرات در پروژه قرار دهید.
این کتابخانه تنها به عنوان اثبات مفهومی قابل ذکر است. Canvas پتانسیل ایجاد زیر خطوط زیبا و تعاملی را دارد، اما برای درست کار کردن باید کد JS اضافی بنویسید.
متن - تزئین - * خواص
یادتان هست که گفتم بعداً چیزی را با جزئیات بیشتری تحلیل خواهیم کرد؟ حالا ما این کار را انجام خواهیم داد. ویژگی text-decoration به تنهایی به خوبی کار می کند، اما ما می توانیم چند ویژگی آزمایشی را برای ظاهر بهتر اضافه کنیم:
متن-تزیین-رنگ
متن-تزیین-پرش
متن-تزیین-سبک
خیلی خوشحال نباشید، در مورد پشتیبانی مرورگر می دانید.
ویژگی متن-تزیین-رنگ
ویژگی text-decoration-color به شما این امکان را می دهد که رنگ زیر خط را جدا از رنگ متن تغییر دهید. این ملک حتی از پشتیبانی مرورگر خوبی نیز برخوردار است. در فایرفاکس کار می کند و در سافاری پیشوند دارد. از جنبه منفی، اگر خط اطراف رهبران را پاک نکنید، در Safari با متن همپوشانی پیدا می کند. فایرفاکس:
ویژگی text-decoration-skip
ویژگی text-decoration-skip وظیفه پرش از خطوط پایین در متن زیرخط دار است.
این ملک غیر استاندارد است و در حال حاضر فقط در سافاری کار می کند. برای کار در سایر مرورگرها، باید از پیشوند -webkit- استفاده کنید. Safari این ویژگی را به‌طور پیش‌فرض روشن کرده است، به همین دلیل است که زیرخط‌ها حتی در سایت‌هایی که این ویژگی مشخص نشده است، از فراخوان‌های پایین پرش می‌شوند.
اگر از Normalize استفاده می کنید، باید توجه داشته باشید که نسخه های اخیر این ویژگی را در همه مرورگرها غیرفعال می کنند. اگر می خواهید آن زیرخط های تقریبا جادویی را بازگردانید، باید این ویژگی را فعال کنید.
ویژگی text-decoration-style
ویژگی text-decoration-style همان مجموعه ای از خطوط زیر را به عنوان ویژگی حاشیه ای ارائه می دهد، اما ظاهر جدیدی را نیز اضافه می کند - موج دار. مقادیر ممکن:
در حال حاضر ویژگی text-decoration-style فقط در فایرفاکس کار می کند، تصویر زیر را مشاهده می کنید:
مجموعه ای از زیر خط های جامد شبیه به نظر می رسد؟
مشکل چیه؟
ویژگی‌های text-decoration- * نسبت به سایر ویژگی‌ها برای استایل کردن زیر خط‌ها بصری‌تر هستند. با این حال، اگر به الزاماتی که قبلا ارائه کردیم متفاوت نگاه کنید، متوجه خواهید شد که با استفاده از این ویژگی ها نمی توانید ضخامت و موقعیت را تغییر دهید. پس از کمی تحقیق، این دو ویژگی را پیدا کردم:
متن-زیر خط-عرض
text-underline-position
به نظر می رسد این ویژگی ها به دلیل عدم علاقه به آنها از نسخه اولیه CSS حذف شده اند. آنها هرگز اعمال نشدند. هی، این تقصیر من نیست
نتیجه گیری
بنابراین بهترین راه برای خط کشیدن زیر متن چیست؟ همه چیز به عوامل مختلفی بستگی دارد.
برای متن های کوچک، توصیه می کنم از text-decoration و ویژگی آزمایشی text-decoration-skip استفاده کنید، امیدواریم کارساز باشد. در اکثر مرورگرها اینطور به نظر می رسد، اما همیشه اینگونه بوده است و مردم به آن توجه نکرده اند. اگر به اندازه کافی صبور باشید، به احتمال زیاد به زودی تمام زیر خط های شما خوب به نظر می رسند و نیازی به تغییر چیزی نخواهید داشت.
از تصویر پس زمینه برای متن بدنه استفاده کنید. این روش کار می کند، زیبا به نظر می رسد، و میکس های Sass برای آن وجود دارد. اگر خط زیر نازک است، یا رنگ آن با متن متفاوت است، به احتمال زیاد می توانید از روش سایه متن صرف نظر کنید. برای متن در یک خط، از border-bottom و هر ویژگی دیگر استفاده کنید.
و برای پرش از حروف لیدر در پس‌زمینه یا تصاویر گرادیان، از فیلتر SVG استفاده کنید. یا فقط چنین پس‌زمینه‌هایی را با خط‌های زیرین مخلوط نکنید. در آینده، هنگامی که پشتیبانی مرورگر بهبود یابد، می توان از ویژگی های text-decoration- * استفاده کرد.
راه های مختلفی برای پرسیدن وجود دارد زیر خط متن CSS... اگر در مورد یک سناریوی ایده آل صحبت می کنیم، خط زیر باید شرایط زیر را برآورده کند:
- در زیر خط پایه خط قرار گرفته است.
- به قسمت هایی از حروف که زیر خط پایه هستند مستقیماً دست نزنید.
- تغییر رنگ، ضخامت و سبک خط زیر باید امکان پذیر باشد.
- زیر خط کشیدن باید پس از بسته بندی متن ادامه یابد.
- خط کشی باید در هر زمینه ای کار کند.
این همه کاملا واضح است. اما تا آنجا که من می دانم، هیچ راهی برای رسیدن به همه اینها با CSS وجود ندارد.
رویکردها
راه هایی که با آن می توانید زیر متن در اینترنت خط بکشید:
- متن-تزیین;
- حاشیه پایین؛
- جعبه-سایه;
- تصویر پس زمینه؛
- فیلترهای SVG؛
- Underline.js (بوم)؛
- متن-تزیین- *.
بیایید یک به یک آنها را بررسی کنیم و در مورد مزایا و معایب آنها صحبت کنیم.
متن-تزیین
text-decoration ساده ترین روش CSS است. فقط یک خاصیت اعمال می شود و بس. برای اندازه های کوچک فونت ممکن است بسیار مناسب به نظر برسد، اما اندازه را افزایش دهید و همان خط شروع به ظاهر ناخوشایند می کند.
مشاهده نمونه
بزرگترین مشکل استفاده از تزیین متن، عدم سفارشی سازی آن است. این ویژگی با هر اندازه فونت یا رنگ متنی که به آن اعمال می‌شود مطابقت دارد و هیچ راه بین مرورگری برای تغییر سبک داده‌شده وجود ندارد.
طرفداران
- استفاده از آن آسان است.
- واقع در زیر خط پایه؛
- به طور پیش‌فرض، به قسمت‌هایی از حروف که زیر خط پایه بیرون زده‌اند، بالشتک اضافه می‌کند ( در سافاری و iOS);
- خط به خط می پیچد.
- مناسب برای هر پس زمینه؛
منفی ها
- در مرورگرهای دیگر از قسمت هایی از حروف که زیر خط پایه بیرون زده اند، تورفتگی اضافه نمی کند.
- شما نمی توانید رنگ، وزن یا سبک خط زیر را تغییر دهید.
لبه پایین
حاشیه-پایین آسان برای استفاده و قابل تنظیم است. این ویژگی تغییر رنگ، وزن و سبک زیر خط متن CSS را بسیار آسان می کند.
نتیجه اعمال حاشیه-پایین به عناصر درون خطی:
مشاهده نمونه
توجه داشته باشید که زیر خط زیر قسمت هایی از حروف قرار می گیرد که زیر خط پایه قرار دارند. این را می توان با تنظیم ویژگی inline-block روی عنصر و کاهش مقدار line-height تغییر داد. اما در این حالت، توانایی بسته بندی متن را از دست می دهید. مناسب برای متن تک خطی
مشاهده نمونه
می‌توانید از ویژگی text-shadow برای پنهان کردن بخشی از خط زیر که زیر خط مبنا امتداد دارد استفاده کنید. در این حالت استفاده از رنگ زمینه ضروری است. این رویکرد فقط با رنگ‌های پس‌زمینه ثابت کار می‌کند، نه پرهای گرادیان یا تصاویر.
مشاهده نمونه
برای تنظیم یک زیر خط، باید چهار ویژگی سبک را اعمال کنید. این بیشتر از تزیین متن است.
طرفداران
- با کمک text-shadow می توانید تورفتگی های قسمت هایی از حروف را که در زیر خط پایه بیرون زده اند تنظیم کنید.
- شما می توانید رنگ، وزن و سبک خط CSS خط زیر را تغییر دهید.
- شما می توانید انتقال ها و انیمیشن ها را برای رنگ و ضخامت خط زیر تنظیم کنید.
- اگر بلوک درون خطی نباشد، به طور پیش‌فرض حمل می‌شود.
منفی ها
- این موقعیت که دور از متن قرار می گیرد، به سختی تغییر می کند.
- بسیاری از خواص اضافی برای استفاده وجود دارد.
- برجسته کردن متن عجیب هنگام استفاده از ویژگی text-shadow.
جعبه-سایه
این ویژگی با استفاده از دو سایه ریزش یک زیرخط تشکیل می دهد: یکی یک مستطیل ایجاد می کند، دیگری بیشتر آن را به جز قسمت پایین پنهان می کند. این روش فقط برای یک پس زمینه جامد قابل استفاده است.
مشاهده نمونه
می‌توانید از همان ترفند text-shadow برای شبیه‌سازی تورفتگی از قسمت‌هایی از حروف که زیر خط پایه بیرون زده‌اند استفاده کنید. اگر قرار است رنگ زیر خط با متن متفاوت باشد، دیگر مشکلاتی مانند تزیین متن نخواهید داشت.
طرفداران
- زیر خط CSS را می توان زیر خط مبنا قرار داد.
- می توانید رنگ و ضخامت خط زیر را تغییر دهید.
- خط زیر خط به خط پیچیده می شود.
منفی ها
- سبک را نمی توان تغییر داد.
- برای هیچ پس زمینه ای کار نمی کند.
تصویر پس زمینه
background-image نتیجه ای را ایجاد می کند که با تمام معیارهای بالا مطابقت دارد. این از گرادیان خطی و موقعیت پس‌زمینه برای ایجاد تصویری استفاده می‌کند که به صورت افقی در امتداد خطوط متن تکرار می‌شود. در این حالت، متن باید طوری تنظیم شود که نمایش داده شود: inline ;.
مشاهده نمونه
به جای گرادیان خطی، می توانید تصویر خود را با برخی افکت ها اضافه کنید.
مشاهده نمونه
طرفداران
- زیر خط پیوند CSS را می توان در زیر خط مبنا قرار داد.
- با کمک text-shadow می توانید تورفتگی هایی را در زیر خط مبنا قرار دهید.
- شما می توانید رنگ، ضخامت و سبک خط زیر را تغییر دهید.
- با تصاویر سفارشی کار می کند.
- خط به خط زیر خط می بندد.
- روی هر پس‌زمینه‌ای کار می‌کند مگر اینکه از text-shadow استفاده شود.
منفی ها
- اندازه تصویر بسته به وضوح، مرورگر و مقیاس مشاهده می تواند به روش های مختلفی تغییر کند.
فیلترهای SVG
می توانید یک عنصر فیلتر SVG ایجاد کنید که یک خط بکشد و سپس متن را گسترش دهد تا قسمت های شفاف خط پنهان شود. پس از آن، باید یک شناسه برای فیلتر تنظیم کنید و در CSS به آن مراجعه کنید:
فیلتر: url ('# svg-underline').
مزیت این روش این است که فیلتر بدون استفاده از سایه متن شفافیت را اضافه می کند. می‌توانید فاصله زیر خط CSS را طوری تنظیم کنید که در هر پس‌زمینه زیر خط پایه بیرون بزند. اما این روش برای متن یک خطی قابل اجرا نیست، این اشکال اصلی آن است.
مشاهده نمونه
در کروم و فایرفاکس اینگونه به نظر می رسد:
پشتیبانی مرورگر برای IE، Edge و Safari مشکل ساز است. بررسی پشتیبانی از فیلتر SVG در CSS دشوار است.
طرفداران
- می توان زیر خط مبنا قرار داد.
- می توانید تورفتگی ها را در زیر خط مبنا تنظیم کنید.
- شما می توانید رنگ، ضخامت و سبک خط زیر را تغییر دهید.
- روی هر زمینه ای کار می کند.
منفی ها
- خط زیر در چندین خط قرار نمی گیرد.
- در اینترنت اکسپلورر، اج یا سافاری کار نمی کند، اما بازگشت مجدد را می توان با تزئین متن انجام داد. به هر حال در سافاری خوب به نظر می رسد.
Underline.js (بوم)
Underline.js زیر خط CSS را با استفاده از عناصر ترسیم می کند
این فقط یک نسخه آزمایشی فنی است، بنابراین، برای استفاده از کتابخانه، باید تغییرات کلی در پروژه در حال توسعه ایجاد کنید.
ما این روش را برای نشان دادن احتمالات ارائه می دهیم
متن - تزئین - * خواص
این ویژگی به تنهایی خوب کار می کند، اما می توانید چند ویژگی آزمایشی را برای تغییر ظاهر اضافه کنید:
- متن-تزیین-رنگ;
- متن-تزیین-پرش;
- متن-تزیین-سبک.
فقط زودتر خوشحال نشو از مشکل پشتیبانی مرورگر آگاه باشید.
متن-تزیین-رنگ
به شما امکان می‌دهد رنگ CSS زیرخط نقطه‌دار را جدا از رنگ متن تغییر دهید. این ویژگی به خوبی توسط مرورگرها پشتیبانی می شود. در فایرفاکس کار می کند و در سافاری پیشوند دارد. اما اگر شکست های زیر خط پایه متن را کنترل نکنید، سافاری زیر خط را در بالای متن قرار می دهد.
فایرفاکس:
سافاری:
متن-تزیین-پرش
این ویژگی شکست های زیر خط مبنا را اضافه می کند:
استاندارد نیست و در حال حاضر فقط در سافاری کار می کند، بنابراین برای استفاده از آن باید از پیشوند -webkit استفاده کنید. سافاری به صورت پیش‌فرض از این ویژگی پشتیبانی می‌کند، بنابراین حتی در سایت‌هایی که ویژگی اصلاً مشخص نشده است، وقفه اضافه می‌شود.
متن-دکوراسیون-سبک
این ویژگی همان نوع زیرخط متن CSS را ارائه می دهد که می تواند با استفاده از سبک حاشیه تنظیم شود. و علاوه بر آن نوع خط موجی را اضافه می کند.
در زیر مقادیر مختلفی وجود دارد که می توانید از آنها استفاده کنید:
- نقطه چین؛
- خط چین؛
- دو برابر؛
- جامد؛
- موج دار.
در حال حاضر، سبک تزیین متن فقط در فایرفاکس کار می کند، در اینجا یک اسکرین شات وجود دارد.
شرح
تزیین متن را به صورت خط کشی، خط خطی، خط بالای متن و چشمک زدن اضافه می کند. بیش از یک سبک را می توان همزمان با فهرست کردن مقادیر جدا شده با فاصله اعمال کرد.
نحو
متن-تزیین: [چشمک زدن || خط از طریق || روی خط || زیر خط بکش] | هیچکدام | به ارث می برند
ارزش ها
چشمک زدن متن چشمک زن را تنظیم می کند. چنین متنی به طور دوره ای، تقریباً یک بار در ثانیه، ناپدید می شود، سپس دوباره در همان مکان ظاهر می شود. این مقدار در حال حاضر توسط مرورگرها منسوخ شده است و در CSS3 منسوخ شده است؛ به جای آن انیمیشن پیشنهاد می شود. line-through متن خطی ایجاد می کند (مثال). overline خط روی متن می رود (مثال). underline مجموعه متن زیر خط (مثال). هیچکدام همه جلوه ها، از جمله زیر خط پیش فرض پیوندها را لغو می کند. inherit مقدار از والد به ارث می رسد.HTML5 CSS2.1 IE Cr Op Sa Fx
حمله استراتژیک
مدل شی
document.getElementById ("elementID") .style.textDecoration
document.getElementById ("elementID") .style.textDecorationBlink
document.getElementById ("elementID") .style.textDecorationLineThrough
document.getElementById ("elementID") .style.textDecorationNone
document.getElementById ("elementID") .style.textDecorationOverLine
document.getElementById ("elementID") .style.textDecorationUnderline
مرورگرها
اینترنت اکسپلورر تا نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند. خط به دست آمده با استفاده از مقدار line-through در IE7 بالاتر از سایر مرورگرها است. IE8 این باگ را برطرف کرده است.
روش های مختلفی برای استایل دادن به خط زیر وجود دارد. ممکن است مقاله مارسین ویچاری را به خاطر بیاورید که "زیر لینک ساخت" در Medium است. توسعه دهندگان Medium سعی نمی کنند کار احمقانه ای انجام دهند، آنها فقط می خواهند یک خط خوب زیر متن ایجاد کنند.
این ساده‌ترین خط زیر است، اما اندازه آن صحیح است و با نزول حروف همپوشانی ندارد. و قطعا بهتر از خط پیش فرض در اکثر مرورگرها است. Medium برای رسیدن به سبک خود در وب تلاش کرد. دو سال بعد، ما هنوز برای گرفتن یک زیرخط خوب مشکل داریم.
اهداف
چه اشکالی دارد با تزیین متن آشنا: زیر خط بکشید؟ برای یک سناریوی ایده آل، خط زیر باید موارد زیر را انجام دهد:
- در زیر خط پایه قرار گرفته است.
- رد شدن از عناصر راه دور؛
- تغییر رنگ، ضخامت و سبک خط؛
- کار با متن چند خطی؛
- روی هر زمینه ای کار کنید
من معتقدم اینها همه الزامات معقول هستند، اما تا آنجا که من می دانم هیچ راه بصری برای رسیدن به این هدف با CSS وجود ندارد.
رویکردها
بنابراین، این راه‌های مختلفی که می‌توانیم زیرخط‌گذاری را در وب پیاده‌سازی کنیم، چیست؟
اینها مواردی هستند که من در نظر دارم:
- متن-تزیین;
- حاشیه پایین؛
- جعبه-سایه;
- تصویر پس زمینه؛
- فیلترهای SVG؛
- Underline.js (بوم)؛
- متن-تزیین- *.
بیایید این روش ها را یکی یکی تحلیل کنیم و در مورد مزایا و معایب هر یک از آنها صحبت کنیم.
متن-تزیین
تزیین متن واضح ترین راه برای خط کشیدن زیر متن است. شما یک خاصیت را اعمال می کنید و بس است. ممکن است در اندازه های کوچک فونت بسیار مناسب به نظر برسد، اما اندازه فونت را افزایش دهید و این خط زیر شروع به ظاهر ناخوشایند می کند.
بزرگترین مشکل تزیین متن، عدم سفارشی سازی است. شما محدود به رنگ و اندازه فونت متن هستید و هیچ راه بین مرورگری برای تغییر آن ندارید. در این مورد با جزئیات بیشتری صحبت خواهیم کرد.
- آسان برای استفاده؛
- در زیر خط پایه قرار گرفته است.
- به طور پیش فرض در Safari و iOS از نزول پرش می کند.
- زیر متن چند خطی خط می کشد.
- در هر زمینه ای کار می کند
- در همه مرورگرهای دیگر از نزول رد نمی شود.
- اجازه تغییر رنگ، وزن یا سبک خط را نمی دهد.
لبه پایین
border-bottom تعادل خوبی بین سادگی و سفارشی سازی ارائه می دهد. این رویکرد از ویژگی مرز خوب قدیمی CSS استفاده می کند، به این معنی که می توانید رنگ، وزن و سبک را به راحتی تغییر دهید.
اینگونه است که حاشیه-پایین در عناصر درون خطی به نظر می رسد.
ایراد اصلی فاصله خط زیر خط از متن است، کاملاً زیر نزول است. می‌توانید این مشکل را با تنظیم عناصر بر روی بلوک درون خطی و کاهش ارتفاع خط برطرف کنید، اما پس از آن توانایی قرار دادن متن را از دست خواهید داد. برای تک دوخت خوب است، اما در هیچ جای دیگری مفید نیست.
علاوه بر این، می‌توانید از text-shadow برای همپوشانی برخی از خطوط در کنار نزول‌ها استفاده کنید و آن را با همان رنگ پس‌زمینه تقلید کنید. یعنی این تکنیک فقط روی یک پس‌زمینه تک رنگ ساده، بدون شیب، الگو یا تصویر کار می‌کند.
در حال حاضر، ما در حال حاضر از چهار ویژگی برای استایل یک خط استفاده می کنیم. این کار بسیار بیشتر از افزودن تزئین متن است.
- می تواند با استفاده از text-shadow از فراخوان ها رد شود.
- می تواند رنگ، وزن و سبک خط را تغییر دهد.
- به شما امکان می دهد از انتقال ها و انیمیشن های رنگ و وزن استفاده کنید.
- با متن چند خطی کار می کند مگر اینکه بلوک درون خطی اعمال شود.
- تا زمانی که از text-shadow استفاده نکنید روی هر پس زمینه ای کار می کند.
- خیلی پایین قرار گرفت و به روشی دشوار حرکت کرد.
- بسیاری از ویژگی های اضافی برای کار درست استفاده می شود.
- هنگام استفاده از text-shadow، انتخاب متن زشت به نظر می رسد.
جعبه-سایه
box-shadow یک نزولی را با دو سایه داخلی ترسیم می کند: یکی یک مستطیل ایجاد می کند و دیگری بخشی از آن را پنهان می کند. این بدان معناست که برای این کار به یک پس زمینه تک رنگ نیاز دارید.
می توانید از همان ترفند text-shadow برای پر کردن شکاف بین زیر خط و نزول استفاده کنید. اما اگر رنگ خط زیر با رنگ متن متفاوت باشد - یا فقط به اندازه کافی نازک باشد، مانند تزیین متن، خط با نزول ها برخورد نمی کند.
- به شما امکان می دهد رنگ و ضخامت خط را تغییر دهید.
- با متن چند خطی کار می کند.
- اجازه تغییر سبک زیرخط را نمی دهد.
- روی هیچ پس زمینه ای کار نمی کند
تصویر پس زمینه
روش پس‌زمینه-تصویر به خواسته ما نزدیک‌ترین است و کمترین ایراد را دارد. ایده استفاده از گرادیان خطی و موقعیت پس‌زمینه برای ایجاد تصویری است که در زیر خطوط متن تکرار می‌شود.
برای اینکه این رویکرد کار کند، متن باید در نمایش استاندارد باشد: حالت درون خطی. ...
گزینه بعدی از گرادیان خطی صرف نظر می کند، برای افکت ها می توانید تصویر پس زمینه خود را اضافه کنید.
- را می توان در زیر خط پایه قرار داد.
- می تواند به دلیل متن سایه از فراخوان ها رد شود.
- با تصاویر سفارشی کار می کند.
- چندین خط متن را می پیچد.
- روی هر پس‌زمینه‌ای کار می‌کند، به شرطی که سایه متن را اعمال نکنید.
- اندازه تصویر ممکن است بسته به وضوح صفحه نمایش، مرورگر و بزرگنمایی متفاوت باشد.
فیلترهای SVG
من خیلی با این روش بازی کردم. شما می توانید یک فیلتر درون خطی SVG ایجاد کنید که یک خط بکشد و سپس متن را گسترش دهد تا قسمتی از خط را که می خواهیم شفاف کنیم پنهان کند. سپس می‌توانید به فیلتر یک شناسه بدهید و مانند filter: url (# svg-underline) به آن در CSS پیوند دهید.
مزیت این روش این است که شفافیت بدون اعمال سایه متن به دست می آید، یعنی از فراخوانی ها در هر پس زمینه، از جمله گرادیان ها و تصاویر پس زمینه صرف نظر می کنیم! این فقط روی یک خط متن کار می کند، این را در نظر داشته باشید.
در کروم و فایرفاکس اینگونه به نظر می رسد:
پشتیبانی IE، Edge و Safari مشکل ساز است. آزمایش پشتیبانی از فیلتر SVG در CSS دشوار است. می‌توانید از دستور supports@ با فیلتر استفاده کنید، اما این فقط بررسی می‌کند که آیا مرجع فیلتر کار می‌کند، اما نه خود فیلتر. تلاش‌های من به تعیین ترسناک قابلیت‌های مرورگر ختم شد، این یک نقص قابل توجه در روش است.
- را می توان در زیر خط پایه قرار داد.
- می تواند عناصر راه دور را رد کند.
- اجازه می دهد تا رنگ، ضخامت و سبک خط را تغییر دهید.
- در هر زمینه ای کار می کند
- با متن چند خطی کار نمی کند.
- در اینترنت اکسپلورر، اج و سافاری کار نمی کند، اما می توانید از تزیین متن به عنوان نسخه بازگشتی استفاده کنید، در سافاری مناسب به نظر می رسد.
Underline.js (کانواس)
Underline.js مسحور کننده است. به نظر من کاری که ونتین ژانگ با مهارت های جاوا اسکریپت و توجه به جزئیات انجام داده است، قابل توجه است. اگر دموی فنی Underline.js را ندیده اید، خواندن را متوقف کنید و یک دقیقه از وقت خود را صرف کنید. همچنین صحبت های 9 دقیقه ای او در مورد نحوه عملکرد آن وجود دارد، اما من به طور خلاصه توضیح می دهم: زیر خط با استفاده از عناصر ترسیم شده است.
با وجود نام جذاب، Underline.js فقط یک نسخه نمایشی فنی است. این بدان معنی است که شما نمی توانید این را انتخاب کنید و بدون تغییر کد آن را به پروژه خود وصل کنید.
تصمیم گرفتم این را به عنوان اثبات این مفهوم ذکر کنم
ویژگی های جدید تزیین متن
یادتان هست که قول داده بودم در مورد تزیین متن بیشتر صحبت کنم. زمان آن رسیده است.
این ویژگی به خودی خود عالی عمل می کند، اما می توانید برخی از ویژگی های آزمایشی را برای سفارشی کردن ظاهر خط زیر اضافه کنید.
- متن-تزیین-رنگ
- متن-تزیین-پرش
- متن-تزیین-سبک
اما خیلی خوشحال نباشید ... پشتیبانی مرورگر - مثل همیشه. بنابراین می رود.
متن-تزیین-رنگ
ویژگی text-decoration-color به شما این امکان را می دهد که رنگ زیر خط را جدا از رنگ متن تغییر دهید. پشتیبانی از این ویژگی بهتر از چیزی است که انتظار دارید - در فایرفاکس کار می کند و در سافاری پیشوند دارد. نکته اینجاست: اگر فراخوانی دارید، سافاری یک خط زیر روی متن قرار می دهد.
متن-تزیین-پرش
ویژگی text-decoration-skip پرش از نزول در متن زیرخط دار را امکان پذیر می کند.
این ویژگی غیر استاندارد است و در حال حاضر فقط در Safari با پیشوند -webkit- کار می کند. سافاری این ویژگی را به طور پیش‌فرض فعال می‌کند، بنابراین پیام‌ها همیشه خط‌دار نیستند.
اگر از Normalize استفاده می‌کنید، لطفاً توجه داشته باشید که نسخه‌های اخیر این ویژگی را به خاطر رفتار ثابت مرورگر غیرفعال می‌کنند. و اگر می خواهید زیر خط روی نزول ها تأثیری نداشته باشد، باید آن را به صورت دستی فعال کنید.
متن-تزیین-سبک
ویژگی text-decoration-style با اضافه شدن سبک موج دار، همان قابلیت های یک ظاهر طراحی شده را ارائه می دهد.
در اینجا لیستی از مقادیر موجود است:
- نقطه چین
- خط چین
- دو برابر
- جامد
در حال حاضر ویژگی text-decoration-style فقط در فایرفاکس کار می کند، در اینجا یک اسکرین شات از آن آمده است:
چه چیزی جا افتاده
استفاده از سری ویژگی‌های text-decoration-* نسبت به بقیه ویژگی‌های CSS برای استایل‌سازی زیرخط بصری‌تر است. اما اگر دقیق‌تر نگاه کنید، راه‌های کافی برای تنظیم ضخامت یا موقعیت خط برای رفع نیازهای ما وجود ندارد.
پس از کمی تحقیق، چند ویژگی دیگر پیدا کردم:
- متن-زیر خط-عرض
- text-underline-position
به نظر می رسد که آنها پیش نویس های اولیه CSS هستند، اما به دلیل عدم علاقه هرگز در مرورگرها پیاده سازی نشدند.
نتیجه گیری
بنابراین بهترین راه برای خط کشی چیست؟
برای متن های کوچک، توصیه می کنم از تزیین متن با افزودن خوشبینانه متن-تزیین-پرش استفاده کنید. در اکثر مرورگرها کمی بی مزه به نظر می رسد، اما مرورگرها همیشه دارای خط زیر بوده اند و مردم به آن توجه نمی کنند. به علاوه همیشه این احتمال وجود دارد که با صبر و حوصله، روزی بدون نیاز به تغییر چیزی، این زیرخط خوب به نظر برسد، همانطور که مرورگرها این کار را می کنند.
برای متن بدنه، استفاده از تصویر پس‌زمینه منطقی است. این رویکرد کار می کند، عالی به نظر می رسد، و میکس های Sass برای آن وجود دارد. اگر خط زیر نازک است یا رنگ آن با متن متفاوت است، در اصل، می توانید سایه متن را حذف کنید.
برای تک خطوط متن، از حاشیه-پایین به همراه هر ویژگی اضافی استفاده کنید.
و اگر نیاز به رد شدن از نزول در برابر یک گرادیان یا تصویر دارید، از فیلترهای SVG استفاده کنید. یا فقط از استفاده از زیرخط خودداری کنید.
در آینده، با بهبود پشتیبانی مرورگر، تنها پاسخ مجموعه ویژگی text-decoration- * خواهد بود.
همچنین توصیه می‌کنم مقاله بنجامین وودراف CSS Underlines Suck را بررسی کنید، که به همین مسائل می‌پردازد.
