Способи підкреслення CSS. Розділова лінія у вигляді хвилі на css Css стиль підкреслення
Властивість CSS text-decoration відповідає за оформлення тексту у плані підкреслень. Можна зробити нижнє, верхнє підкреслення. Також можна закреслити текст або застосувати всі підкреслення одразу.
Синтаксис CSS text-decoration
... text-decoration : none|underline|overline|line-through|inherit; ...
- none – текст без оформлення
- underline - нижнє підкреслення
- overline - верхнє підкреслення
- line-through - закреслення тексту
- blink - мерехтливий текст (рекомендується не застосовувати це значення)
Можна вказати декілька значень. Наприклад
text-decoration: underline overline;
Як змінити стиль і колір підкреслення
Для зміни стилю підкреслення є спеціальна властивість text-decoration-style:
text-decoration-style : solid|double|dotted|dashed|wavy;
- solid - суцільне підкреслення
- double - подвійна лінія
- dotted - пунктирна лінія
- dashed - штрихова лінія
- wavy - хвиляста лінія
Для зміни кольору підкреслення служить властивість text-decoration-color:
text-decoration-style : ;
color може приймати значення у вигляді RGB, назви кольору (див. коди та назви html кольорів для сайту)
ПриміткаНа жаль, властивість text-decoration-style та text-decoration-color не підтримуються майже всіма браузерами (йде вже 2016 рік).
Приклади із підкресленнями
Приклад 1. Просте підкреслення
Звичайний текст. Нижнє підкреслення Верхнє підкреслення
Звичайний текст.
Нижнє підкреслення
Верхнє підкреслення
Верхнє та нижнє підкреслення
Приклад 2. Закреслений текст
Звичайний текст. Закреслений текст
Ось як це виглядає на сторінці:
Звичайний текст. Закреслений текст
Приклад 3. Змінюємо колір та тип підкреслення
Звичайний текст.
Ось як це виглядає на сторінці:
Звичайний текст.
Червоне підкреслення з пунктирною лінією
Якщо ви не бачите якихось змін в останньому прикладі, можна спробувати використовувати перевірений спосіб за допомогою властивості border-bottom :
border-bottom: 1px datted red;
Для звернення до text-decoration із JavaScript потрібно писати таку конструкцію:
object.style.textDecoration = "VALUE "
Існує купа різних способівоформлення підкреслення. Можливо, ви згадаєте статтю Марсіна Вічарі "Crafting link underlines" на Medium. Розробники Medium не намагаються зробити щось божевільне, вони просто хочуть створити гарну лініюпід текстом.
Це найпростіше підкреслення, але в нього правильний розмірі воно не перекриває виносні елементи букв. І воно однозначно краще за дефолтне підкреслення в більшості браузерів. Medium довелося зіткнутися зі складнощами для досягнення свого стилю в Інтернеті. Через два роки, нам все також складно зробити гарне підкреслення.
Цілі
Що не так із звичним text-decoration: underline? Якщо йдеться про ідеальний сценарій, підкреслення має робити таке:
- позиціонуватись нижче базової лінії;
- пропускати виносні елементи;
- змінювати колір, товщину та стиль лінії;
- працювати з багаторядковим текстом;
- працювати на будь-якому фоні.
Я вважаю, що це все розумні вимоги, але наскільки я знаю, не існує інтуїтивного способу досягти цього з допомогою CSS.
Підходи
То що це за різні способи, якими ми можемо реалізувати підкреслення у Інтернеті?
Ось ті, що я розглядаю:
- text-decoration;
- border-bottom;
- box-shadow;
- background-image;
- фільтри SVG;
- Underline.js (canvas);
- text-decoration-*.
Розберемо ці способи один за одним і поговоримо про плюси та мінуси кожного з них.
text-decoration
text-decoration це найочевидніший спосіб підкреслення тексту. Ви застосовуєте одну властивість і цього достатньо. На невеликих розмірах шрифту це може виглядати цілком пристойно, але збільште розмір шрифту і таке підкреслення починає виглядати незграбно.
Найбільша проблема з text-decoration - це відсутність налаштувань. Ви обмежені кольором та розміром шрифту тексту і у вас немає кроссбраузерного способу змінити це. Ми ще поговоримо про це детальніше.
- легко використовувати;
- позиціонується нижче за базову лінію;
- за замовчуванням пропускає нижні виносні елементи в Safari та iOS;
- підкреслює багаторядковий текст;
- працює на будь-якому фоні.
- не пропускає нижні виносні елементи у всіх інших браузерах;
- не дозволяє змінювати колір, товщину чи стиль лінії.
border-bottom
border-bottom пропонує гарний баланс між простотою та настроюваністю. Цей підхід використовує старе добре CSS для кордону, це означає, що ви можете легко змінювати колір, товщину і стиль.
Ось так border-bottom виглядає у малих елементів.
Головний недолік - це відстань лінії підкреслення від тексту, вона цілком нижча від виносних елементів. Ви можете виправити це, задавши елементам властивість inline-block і зменшивши line-height, але тоді ви втратите можливість обертати текст. Добре для окремих рядків, але ніде більше непридатно.
Додатково, ми можете використовувати text-shadow, щоб перекрити частину лінії поруч із підрядковими елементами, імітуючи це за допомогою того ж кольору, що й фон. Тобто ця техніка працює тільки на простому кольоровому фоні, без градієнтів, патернів або зображень.
на Наразіми вже використовуємо чотири властивості для оформлення одного рядка. Це набагато більше роботи, ніж просто додати text-decoration.
- може пропускати виносні елементи за допомогою text-shadow;
- може змінювати колір, жирність та стиль лінії;
- дозволяє використовувати переходи та анімації кольору та жирності;
- працює з багаторядковим текстом, якщо не застосовано значення inline-block;
- працює на будь-якому фоні, якщо не використовувати text-shadow.
- позиціонується надто низько та переміщається складним способом;
- використовується багато додаткових властивостей для правильної роботи;
- при використанні text-shadow виділення тексту виглядає потворно.
box-shadow
box-shadow малює підрядкову лінію за рахунок двох внутрішніх тіней: одна створює прямокутник, а друга приховує його частину. Це означає, що вам потрібне однотонне тло для того, щоб це працювало.
Ви можете використовувати той же трюк із text-shadow для заповнення перепусток між підкресленням та виносними елементами. Але якщо колір підкреслення відрізняється від кольору тексту - або він досить тонкий, лінія не стикатиметься з виносними елементами так, як при використанні text-decoration .
- дозволяє змінювати колір та товщину лінії;
- працює з багаторядковим текстом.
- не дозволяє змінювати стиль підкреслення;
- працює не на будь-якому тлі.
background-image
Метод з background-image найбільш близький до наших бажань і має мінімум недоліків. Ідея полягає у використанні linear-gradient та background-position для створення зображення, що повторюється під рядками тексту.
Для цього підходу необхідно, щоб текст був у стандартному режимі display: inline; .
Наступний варіант обходиться без line-gradient , для ефектів ви можете додати своє фонове зображення.
- може позиціонуватися нижче за базову лінію;
- може пропускати виносні елементи за рахунок text-shadow;
- працює із кастомними зображеннями;
- обгортає кілька рядків тексту;
- працює на будь-якому фоні, якщо не застосовувати text-shadow.
- розмір зображення може змінюватися залежно від роздільної здатності екрана, браузера та збільшення.
Фільтри SVG
Я досить багато пограв із цим способом. Ви можете створити малий фільтр SVG, який малює лінію, а потім розширює текст для маскування частини лінії, яку ми хочемо зробити прозорою. Потім ви можете задати фільтру id і посилатися на нього в CSS приблизно так filter: url('#svg-underline') .
Перевага цього підходу в тому, що прозорість досягається без застосування text-shadow, тобто ми пропускаємо виносні елементи на будь-якому тлі, включаючи градієнти та фонові зображення! Це працює лише на окремому рядку тексту, враховуйте це.
Ось як це виглядає в Chrome та Firefox:
Підтримка в IE, Edge та Safari проблематична. Складно тестувати підтримку фільтра SVG у CSS. Ви можете використовувати директиву @supports з filter , але це перевірить лише роботу посилання на фільтр, але не роботу самого фільтра. Мої спроби завершилися нудним визначенням можливостей браузера, це відчутний недолік методу.
- може позиціонуватися нижче за базову лінію;
- може пропускати виносні елементи;
- допускає зміну кольору, товщини та стилю лінії;
- працює на будь-якому фоні.
- не працює з багаторядковим текстом;
- не працює в IE, Edge і Safari, але ви можете використовувати text-decoration як запасний варіант, в Safari він виглядає гідно.
Underline.js (Canvas)
Underline.js зачаровує. Я вважаю вражаючим те, що зробила Вентін Жанг за рахунок володіння JavaScript та уваги до деталей. Якщо ви не бачили технічне демо Underline.js, кидайте читати та приділіть йому хвилину часу. Є також її дев'ятихвилинна доповідь про те, як це працює, але я опишу коротко: підкреслення малюється за допомогою елементів
Незважаючи на помітну назву, Underline.js це лише технічне демо. Це означає, що ви не можете просто взяти та підключити це до свого проекту без зміни коду.
Я вирішив згадати про це на доказ концепції, що
Нові властивості text-decoration
Ви пам'ятаєте, що я обіцяв детальніше поговорити про text-decoration. Час прийшов.
Сама по собі ця властивість чудово працює, але ви можете додати кілька експериментальних властивостей для налаштування зовнішнього виглядупідкреслення.
- text-decoration-color
- text-decoration-skip
- text-decoration-style
Але надто сильно не радійте… Підтримка у браузерах – як завжди. Такі справи.
text-decoration-color
Властивість text-decoration-color дозволяє змінювати колір підкреслення окремо від кольору тексту. Підтримка цієї властивості краще, ніж можна було очікувати – вона працює у Firefox і з префіксом у Safari. Ось у чому проблема: якщо у вас є виносні елементи, Safari помістить підкреслення поверх тексту.
text-decoration-skip
Властивість text-decoration-skip включає пропуск виносних елементів у тексті, що підкреслюється.
Ця властивість нестандартна і працює зараз тільки в Safari, з префіксом -webkit-. Safari за замовчуванням активує цю властивість, тому виносні елементи завжди не перекреслюються.
Якщо ви використовуєте Normalize, то врахуйте, що останні версіївідключають цю властивість для послідовної поведінки браузерів. І якщо ви хочете, щоб підкреслення не торкалося виносних елементів, вам треба вручну активувати його.
text-decoration-style
Властивість text-decoration-style пропонує такі ж можливості оформлення, що й у властивості border-style, додаючи також стиль wavy.
Ось список доступних значень:
- dashed
- dotted
- double
- solid
Зараз властивість text-decoration-style працює тільки у Firefox, ось скріншот із нього:
Чого бракує
Серія властивостей text-decoration-* набагато інтуїтивніша у використанні, ніж інші властивості CSSдля оформлення підкреслення. Але якщо поглянути уважніше, то задоволення наших запитів не вистачає способів задати товщину або позицію лінії.
Після невеликого дослідження, я знайшов ще пару властивостей:
- text-underline-width
- text-underline-position
Зважаючи на все, вони ставляться до ранніх чернеток CSS, але їх так і не реалізували в браузерах через відсутність інтересу.
Висновки
То який спосіб підкреслення кращий?
Для невеликого тексту рекомендую використовувати text-decoration з оптимістичним додаванням text-decoration-skip . Це виглядає трохи несмачно у більшості браузерів, але підкреслення у браузерах було таким завжди і люди просто не звернуть уваги. Плюс завжди є шанс, що за наявності у вас терпіння, це підкреслення колись виглядатиме добре без необхідності для вас щось змінювати, оскільки це зроблять у браузерах.
Для основного тексту можна використовувати background-image . Цей підхід працює, виглядає чудово і для нього є міксини Sass. Ви, в принципі, можете пропустити text-shadow , якщо підкреслення тонке або відрізняється від тексту.
Для окремих рядків тексту використовуйте border-bottom разом із будь-якими додатковими властивостями.
А якщо вам потрібен пропуск виносних елементів на фоні градієнта або зображення, спробуйте використати фільтри SVG. Або просто уникайте використовувати підкреслення.
У майбутньому, коли підтримка у браузерах стане кращою, єдиною відповіддю буде набір властивостей text-decoration-*.
Також рекомендую звернути увагу на статтю Бенджаміна Вудроффа CSS Underlines Suck, в якій розглядаються самі питання.
Від автора:стилізація підкреслень посилань – досить складне заняття, і я постійно забуваю, який спосіб краще підходить у тій чи іншій ситуації. На щастя, Джон Джеймсон допоможе нам швидко розібратися в цьому у статті.
Існує безліч способів, як стилізувати підкреслення. Можливо, ви пам'ятаєте статтю «створюємо підкреслення посилань на Medium». Medium не намагалися робити щось з рамок, що виходить, вони хотіли просто створити привабливі підкреслення в тексті.
Тонкі, чорні підкреслення з пробілами навколо літер з нижніми виносками – робота Марсін Вітчері зі статті створюємо підкреслення посилань на Medium.
Хороше стандартне підкреслення, яке до того ж має гарний розмірта пропускає нижні виносні частини літер. Набагато краще, ніж у більшості браузерів за промовчанням. Як виявилося, Medium зіткнулися з багатьма проблемами на своєму шляху. І навіть через два роки досі хороша стилізація підкреслень викликає багато проблем.
Цілі
Чому просто не використовувати text-decoration: underline? Якщо ми говоримо про ідеальний сценарій, наголошення повинні:
розташовуватись нижче базової лінії;
пропускати нижні виносні частини літер;
змінювати колір, товщину та стилі;
переходити на новий рядок;
працювати з будь-якими фонами.
Я вважаю, що ми можемо вимагати все це від підкреслень, проте, наскільки мені відомо, не існує інтуїтивного способу для вирішення всіх цих завдань у CSS.
Підходи
То які способи є у нашому розпорядженні для підкреслення тексту? Я згадав такі:
text-decoration;
background-image;
фільтри SVG;
Underline.js (canvas);
text-decoration-*
Пройдемося по всьому списку та розглянемо всі плюси та мінуси кожного підходу.
Властивість text-decoration
Властивість text-decoration – найпростіший спосіб підкреслення тексту. Потрібно застосувати лише одну властивість. На маленькому тексті така лінія виглядатиме нормально, але варто збільшити розмір шрифту і вона вже виглядає незграбно.
Найбільша проблема із властивістю text-decoration – відсутність кастомізації. Лінія використовує колір і розмір шрифту того тексту, до якого застосовується, і немає кроссбраузерного способу зміни стилів. Трохи пізніше поговоримо докладніше з цієї властивості.
Плюси
просто використовувати;
розташовується нижче за базову лінію;
пропускає нижні виносні частини літер за замовчуванням у Safari та iOS;
перестрибує на новий рядок;
працює з будь-якими фонами.
Мінуси
не пропускає виносні нижні частини літер інших браузерах;
не можна змінювати колір, товщину та стилі.
Властивість border-bottom
Властивість border-bottom – гарний баланс швидкості та кастомізації. Цей підхід використовує перевірені CSS рамки, А значить, ви з легкістю можете змінювати колір, товщину та стилі. Так виглядає властивість border-bottom на елементах інлайнових:
Найбільший мінус - те, наскільки далеко підкреслення розташоване від тексту. Підкреслення розташоване нижче за нижні виносні частини літер. Ця проблема вирішується, якщо зробити елемент inline-block і зменшити line-height, але втрачається можливість перестрибувати на нові рядки. Добре підходить для одиночних рядків, але не більше.
Крім того, за допомогою text-shadow можна приховати частини лінії навколо нижніх виносок. У такому разі вам доведеться імітувати колір фону, що означає, що метод працює лише на однорідних фонах. Градієнти та зображення не підійдуть.
На даний момент існує 4 властивості для стилізації підкреслення. Набагато краще ніж просто text-decoration.
Плюси
можна використовувати властивість transition та анімувати колір та товщину;
перестрибує на нові рядки за замовчуванням, якщо елемент не є inline-block;
Мінуси
лінія розташована дуже далеко і її складно пересунути;
занадто багато зайвих властивостей потрібно задіяти, щоб підкреслення добре виглядало;
погане виділення тексту під час використання text-shadow.
Властивість box-shadow
Властивість box-shadow малює підкреслення за допомогою двох внутрішніх тіней: одна створює прямокутник, а друга ховає його. Це означає, що для правильної роботи методу необхідне однорідне тло.
Такий самий трюк із text-shadow можна використовувати для імітації пропуску навколо нижніх виносок літер. Якщо колір лінії відрізняється від тексту, або він досить тонкий, то проблем виникнути не повинно, як це буває з text-decoration.
Плюси
можна розташувати під базовою лінією;
можна пропускати виноски за допомогою text-shadow;
можна змінювати колір та товщину;
перестрибує на нові рядки.
Мінуси
не можна змінювати стилі;
не працює з усіма фонами.
Властивість background-image
Властивість background-image найкраще вирішує наші завдання, і в нього дуже мало мінусів. Ідея полягає в тому, що ви створюєте зображення за допомогою linear-gradient і background-position, яке повторюється горизонтальною віссю вздовж рядків тексту. Елемент повинен бути display: inline;
Демо нижче не використовує linear-gradient. Для створення крутого ефекту можна використовувати своє зображення.
Плюси
можна розташувати нижче базової лінії;
можна пропускати нижні виноски за допомогою text-shadow;
можна змінювати колір, товщину (навіть на півпікселі) та стилі;
працює з зображеннями користувача;
перестрибує на нові рядки;
працює з будь-яким фоном, якщо не використовувати text-shadow.
Мінуси
розмір зображення може по-різному змінюватися під різні дозволи, браузери та рівні збільшення.
SVG фільтри
Ось із цим методом я грав. Ви можете створити інлайновий SVG елемент filter, який малюватиме лінію, і розширити текст, щоб замаскувати ті частини лінії, які мають бути прозорими. Фільтр можна присвоїти id і посилатися на нього в CSS за допомогою filter: url('#svg-underline').
У чому тут плюс – фільтр додає прозорість, не покладаючись на text-shadow. Тобто ви можете пропускати нижні виноски букв на будь-якому фоні, у тому числі градієнти та зображення! Приклад нижче працює тільки з одним рядком тексту, тому обережніше.
А ось так це виглядає в Chrome та Firefox:
У IE, Edge та Safari з підтримкою виникають проблеми. У CSS важко тестувати підтримку SVG фільтрів. Можна використовувати правило @supports на filter, але так ви перевірите тільки роботу самого посилання, а не те, чи фільтр застосований чи ні. Мій спосіб досить грубо працює з браузерами, так що будьте вдвічі обережнішими.
Плюси
розташований нижче базової лінії;
пропускає нижні виноски;
можна змінювати колір, товщину та стилі;
працює на будь-якому фоні.
Мінуси
не перестрибує на нові рядки;
не працює в IE, Edge і Safari, але можна як фолбек вказати text-decoration. Підкреслення в Safari самі собою виглядають чудово.
Underline.js (Canvas)
Underline.js – дивовижна бібліотека. Мене вражає, що Wenting Zhang змогли зробити з JS та увагою до деталей. Якщо ви ще не бачили технічне демо Underline.js, зупиніться на хвилинку і подивіться. У мережі є чудовий 9-хвилинний виступ на тему принципів роботи, я вам зараз швидко його перекажу. Підкреслення малюються з допомогою canvas. Абсолютно новий підхід, який напрочуд добре працює.
Незважаючи на привабливу назву, це лише технічне демо. Тобто ви не зможете відразу помістити бібліотеку у проект без цілої купи змін.
Цю бібліотеку варто згадати лише як доказ концепції. Canvas має потенціал для створення красивих, інтерактивних підкреслень, але для правильної роботи вам доведеться написати додатковий JS код.
Властивості text-decoration-*
Пам'ятаєте, я сказав, що трохи пізніше ми докладніше розберемо щось? Нині цим і займемося. Властивість text-decoration працює добре сама по собі, але ми можемо додати пару експериментальних властивостей для ще кращого виду:
text-decoration-color
text-decoration-skip
text-decoration-style
Не радійте заздалегідь, ви ж знаєте про підтримку в браузерах.
Властивість text-decoration-color
Властивість text-decoration-color дозволяє змінювати колір підкреслення окремо від кольору тексту. Властивості навіть непогана підтримка у браузерах. Воно працює у Firefox і з префіксом у Safari. Є свій мінус – якщо ви не очищаєте лінію навколо виносок, у Safari вона лягає поверх тексту. Firefox:
Властивість text-decoration-skip
Властивість text-decoration-skip відповідає за пропуск нижніх виносок у тексті, що підкреслюється.
Властивість нестандартна і зараз працює тільки в Safari. Для роботи в інших браузерах потрібно використовувати префікс-webkit-. У Safari ця властивість включена за умовчанням, тому підкреслення пропускають нижні виноски навіть на сайтах, де ця властивість не вказана.
Якщо ви використовуєте Normalize, потрібно знати, що останні версії відключають властивість для нормальної роботи у всіх браузерах. Якщо ви хочете повернути ці майже магічні підкреслення, вам потрібно включити цю властивість.
Властивість text-decoration-style
Властивість text-decoration-style пропонує той самий набір підкреслень, що й властивість border-style, але також додає нового вигляду – wavy. Можливі значення:
Прямо зараз властивість text-decoration-style працює тільки у Firefox, нижче показаний скріншот:
Набір однотонних підкреслень Схоже, виглядає?
Що не так?
Властивості text-decoration-* інтуїтивніші в порівнянні з іншими властивостями для стилізації підкреслень. Однак якщо по-іншому поглянути на вимоги, які ми висунули раніше, то можна помітити, що за допомогою цих властивостей не можна змінювати товщину та позицію. Після невеликого вивчення я знайшов ці дві властивості:
text-underline-width
text-underline-position
Схоже, ці властивості були викинуті з ранньої версії CSS через відсутність інтересу до них. Вони так і не застосовувалися. Гей, я в цьому не винний.
Висновки
То як же найкраще підкреслювати текст? Все залежить від різних факторів.
Для маленького тексту я рекомендую використовувати text-decoration та експериментальну властивість text-decoration-skip, сподіваючись, що воно працюватиме. У більшості браузерів це виглядає так собі, але так було завжди, і люди не звертали на це увагу. Якщо ви досить терплячі, є шанс, що незабаром усі ваші підкреслення добре виглядатимуть, і вам нічого не доведеться змінювати.
Для основного тексту використовуйте background-image. Метод працює, виглядає красиво, і для нього є міксини Sass. Якщо підкреслення тонке або колір відрізняється від тексту, швидше за все, ви можете пропустити метод з text-shadow. Для тексту на одному рядку використовуйте border-bottom та будь-які інші властивості.
А для пропуску винесення літер на градієнтних фонах або зображеннях спробуйте використовувати фільтр SVG. Або просто не змішуйте такі фони з підкресленнями. У майбутньому, коли покращиться підтримка у браузерах, можна буде використовувати властивості text-decoration-*.
Існує безліч різних способівпоставити підкреслення тексту CSS. Якщо ми говоримо про ідеальний сценарій, підкреслення має відповідати наступним умовам:
- Розташовуватись нижче базової лінії рядка;
- Не торкатися безпосередньо частин літер, що виступають нижче базової лінії;
- Повинна бути можливість змінювати колір, товщину та стиль лінії підкреслення;
- Підкреслення має продовжуватися після перенесення тексту;
- Підкреслення має працювати на будь-якому фоні.
Все це є досить очевидним. Але, наскільки я знаю, не існує способу досягти всього цього за допомогою CSS.
Підходи
Способи, за допомогою яких можна підкреслити текст в Інтернеті:
- text-decoration;
- border-bottom;
- box-shadow;
- background-image;
- Фільтри SVG;
- Underline.js (canvas);
- text-decoration-*.
Давайте розглянемо їх один за одним і поговоримо про їхні плюси та мінуси.
text-decoration
text-decoration – це найпростіший спосіб CSS підкреслення. Застосовується лише одна властивість і на цьому все. Для невеликих розмірів шрифту це може виглядати досить пристойно, але збільште розмір і та сама лінія починає виглядати незграбно.
Подивитися приклад
Найбільша проблема застосування text-decoration - відсутність настроюваності. Властивість відповідає будь-якому розміру шрифту або кольору тексту, до якого воно застосовано, і не існує способу кроссбраузерного змінити заданий стиль.
ПЛЮСИ
- Його просто застосовувати;
- Розташовується нижче за базову лінію;
- За замовчуванням додає відступи від частин літер, що виступають нижче за базову лінію ( в Safari та iOS);
- Переноситься рядками;
- Підходить для будь-якого фону;
МІНУСИ
- Не додає відступи від частин літер, що виступають нижче за базову лінію, в інших браузерах;
- Не можна змінити колір, товщину або стиль лінії підкреслення.
border-bottom
border-bottom - відрізняється простотою використання та настроюваністю. Властивість дозволяє просто змінювати колір, товщину і стиль лінії підкреслення тексту CSS.
Результат застосування border-bottom до малих елементів:
Подивитися приклад
Зверніть увагу, що лінія підкреслення розміщується під частинами букв, що виступають нижче базової лінії. Це можна змінити, задавши властивість inline-block для елемента і зменшивши значення line-height . Але в цьому випадку ви втрачаєте можливість переносити текст. Підходить для однорядкового тексту.
Подивитися приклад
Можна використовувати властивість text-shadow, щоб приховати частину лінії підкреслення, що виступає нижче базової лінії. При цьому необхідно використовувати колір тла. Цей підхід працює тільки з суцільними кольорами фону, але не з градієнтною заливкоючи зображеннями.
Подивитися приклад
Щоб встановити одне підкреслення, потрібно застосувати чотири властивості стилів. Це більше, ніж для text-decoration.
ПЛЮСИ
- За допомогою text-shadow можна встановити відступи від частин літер, що виступають нижче базової лінії;
- Можна змінити колір, товщину та стиль лінії CSS підкреслення;
- Можна задати переходи та анімацію для кольору та товщини лінії підкреслення;
- За замовчуванням переноситься, якщо це не inline-block ;
МІНУСИ
- Розташовується далеко від тексту, це становище важко змінити;
- Потрібно використати багато додаткових властивостей;
- Дивне виділення тексту під час використання властивості text-shadow .
box-shadow
Ця властивість формує підкреслення за допомогою двох тіней: одна створює прямокутник, друга - приховує більшу частину, крім нижньої. Даний метод застосовується лише для однотонного фону.
Подивитися приклад
Можна використовувати той же трюк, що і з text-shadow , щоб імітувати відступи від частин літер, що виступають нижче базової лінії. Якщо лінія підкреслення повинна відрізнятися за кольором від тексту, то у вас не виникнуть проблеми, як у випадку з text-decoration .
ПЛЮСИ
- Нижнє підкреслення CSS може бути розміщене нижче базової лінії;
- Можна змінити колір та товщину лінії підкреслення;
- Підкреслення переноситься рядково.
МІНУСИ
- Неможливо змінити стиль;
- Чи не працює для будь-якого фону.
background-image
background-image дає результат, що підходить під усі перелічені критерії. При цьому використовуються linear-gradient і background-position, щоб створити зображення, яке повторюється по горизонталі вздовж рядків тексту. При цьому для тексту має бути задано display: inline;
Подивитися приклад
Замість linear-gradient можна додати власне зображення з ефектами.
Подивитися приклад
ПЛЮСИ
- Підкреслення посилання CSS може бути розміщене нижче за базову лінію;
- За допомогою text-shadow можна задати відступи нижче базової лінії;
- Можна змінювати колір, товщину та стиль підкреслення;
- Працює з зображеннями користувача;
- Підкреслення переноситься рядково;
- Працює на будь-якому фоні, якщо не використовується text-shadow.
МІНУСИ
- Розмір зображення може змінюватись по-різному залежно від роздільної здатності, браузера та масштабу перегляду.
Фільтри SVG
Можна створити SVG елемент filter, який малює лінію, а потім розширює текст, щоб приховати прозорі частини лінії. Після цього потрібно задати ідентифікатор для фільтра і послатися на нього в CSS :
filter: url('#svg-underline').
Перевага цього підходу полягає в тому, що фільтр додає прозорість, не використовуючи text-shadow. Можна встановити проміжки лінії CSS підкреслення виступаючими нижче базової на будь-якому фоні. Але цей метод не застосовується для однорядкового тексту, у цьому його основний недолік.
Подивитися приклад
Ось як це виглядає в Chrome і Firefox:
Підтримка браузерами IE, Edge та Safari є проблематичною. Перевірити наявність підтримки SVG-фільтра в CSS важко.
ПЛЮСИ
- Можливо розміщено нижче базової лінії;
- Можна встановити відступи нижче базової лінії;
- Можна змінювати колір, товщину та стиль лінії підкреслення;
- Працює на будь-якому тлі.
МІНУСИ
- Підкреслення не переноситься на кілька рядків;
- Не працює в IE, Edge або Safari, але можна створити резервний варіант за допомогою text-decoration. У Safari воно виглядатиме добре у будь-якому випадку.
Underline.js (canvas)
Underline.js малює CSS підкреслення за допомогою елементів
Це лише технічна демо-версія, тому для використання бібліотеки доведеться здійснити глобальні зміни в проекті, що розробляється.
Ми наводимо даний методдля демонстрації можливостей
Властивості text-decoration-*
Ця властивість чудово працює сама по собі, але можна додати кілька експериментальних властивостей для налаштування зовнішнього вигляду:
- text-decoration-color;
- text-decoration-skip;
- text-decoration-style .
Тільки не радійте завчасно. Пам'ятайте про проблему підтримки браузерами.
TEXT-DECORATION-COLOR
Дозволяє змінити колір CSS підкреслення пунктиром окремо від кольору тексту. Ця властивістьдобре підтримується браузерами. Воно працює в Firefox і за допомогою префікса в Safari. Але якщо не обробляти розриви нижче базової лінії тексту, Safari помістить підкреслення поверх тексту.
Firefox:
Safari:
TEXT-DECORATION-SKIP
Ця властивість додає розриви нижче базової лінії:
Воно не є стандартним і зараз працює тільки в Safari, тому для його застосування потрібно використовувати префікс -webkit. Safari підтримує цю властивість, тому розриви додаються навіть на тих сайтах, де властивість не вказана взагалі.
TEXT-DECORATION-STYLE
Ця властивість пропонує ті самі типи підкреслення тексту CSS, які можна задати за допомогою border-style. І крім цього додає тип лінії wavy (хвиляста).
Нижче наведено різні значення, які можна використовувати:
- dashed;
- dotted;
- double;
- solid;
- wavy.
На даний момент text-decoration-style працює тільки у Firefox, ось скріншот.
Продовжуємо творити трюки на чистому css. Сьогодні я розповім, як на засобами cssзробити гарну роздільну лінію у вигляді хвиліна сайті. Її можна використовувати, наприклад, для візуального поділу постів на блозі або окремих блоків у сайдбарі.
Колись я вже розповідав про . Але там застосовувався тег-динозавр hr із парочкою хитрих правил у стилях, що дозволяли погратися з тінню.
Сьогодні ж зовсім інший розклад. Для відображення лінії у вигляді хвилі доведеться додати до правил набагато більше хитрощів і застосовувати вже не просто css, а css3. Велкам!
Для початку звичайний html код. Лінії ми виводитимемо порожніми блоками div зі спеціальними наборами правил. Порожні блоки – це, звичайно ж, зло. Але іноді доводиться миритися з ним.
Тут ми показали 4 види ліній. А ось так виглядатиме набір стилів у css для них:
Wave (
overflow: hidden;
position: relative;
width: 630px;
height: 50px;
}
.line (
position: absolute;
width: 630px;
height: 26px;
}
.line1 (
}
.line2 (
}
.line (
background-size: 50px 50px;
}
.smallLine (
position: absolute;
width: 630px;
height: 5px;
}
.smallLine1 (
background: linear-gradient(45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine2 (
background: linear-gradient(-45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine (
background-size: 10px 10px;
}
. circle (
position: absolute;
width: 630px;
height: 20px;
background: radial-gradient(16px, transparent, transparent 4px, black 4px, black 10px, transparent 11px);
background-size: 30px 40px;
}
. circle2 (
top: 20px;
left: 15px;
}
.ellipse (
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 630px;
height: 20px;
}
.ellipse2 (
top: 20px;
left: 18px;
background-position: 0px -20px;
}
Тут ми використовували такі фішки як linear-gradient і radial-gradient з арсеналу css3.
Є й інший варіант застосування розділової лінії у вигляді хвилі (найнижча на ілюстрації на початку посту). Її можна застосовувати наприкінці якогось блоку, як нижнє оформлення. Код досить простий. Спочатку html:
У правилах cssзастосуємо псевдоелементи: before і: after. Про них ви можете прочитати. Ось як виглядатиме код:
Wave(
width: 630px;
background: #333;
height: 30px;
position: relative;
}
.wave::before(
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient( circle at 10px -5px, transparent 12px, #19d1ff 13px);
}
.wave::after(
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient( circle at 10px 15px, #19d1ff 12px, transparent 13px);
}
От і все! Наважуйтеся!