Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как в html сделать подчеркивание


Способы подчеркивания в CSS

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “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 это самый очевидный способ подчеркивания текста. Вы применяете одно свойство и этого достаточно. На небольших размерах шрифта это может выглядеть вполне прилично, но увеличьте размер шрифта и такое подчеркивание начинает выглядеть неуклюже.

See the Pen Underlines 1: text-decoration by John D. Jameson (@johndjameson) on CodePen.

Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.

Плюсы:

  • легко использовать;
  • позиционируется ниже базовой линии;
  • по умолчанию пропускает нижние выносные элементы в Safari и iOS;
  • подчеркивает многострочный текст;
  • работает на любом фоне.

Минусы:

  • не пропускает нижние выносные элементы во всех остальных браузерах;
  • не позволяет изменять цвет, толщину или стиль линии.

border-bottom предлагает хороший баланс между простотой и настраиваемостью. Этот подход использует старое доброе свойство CSS для границы, это значит, что вы можете легко изменять цвет, толщину и стиль.

Вот так border-bottom выглядит у строчных элементов.

See the Pen Underlines 2: border-bottom by John D. Jameson (@johndjameson) on CodePen.

Главный недостаток — это расстояние линии подчеркивания от текста, она целиком ниже выносных элементов. Вы можете исправить это, задав элементам свойство inline-block и уменьшив line-height, но тогда вы потеряете возможность оборачивать текст. Хорошо для отдельных строчек, но больше нигде непригодно.

See the Pen Underlines 3: border-bottom (inline-block) by John D. Jameson (@johndjameson) on CodePen.

Дополнительно, мы можете использовать text-shadow, чтобы перекрыть часть линии рядом с подстрочными элементами, имитируя это при помощи того же цвета, что и фон. То есть эта техника работает только на простом одноцветном фоне, без градиентов, паттернов или изображений.

See the Pen Underlines 4: border-bottom (text-shadow) by John D. Jameson (@johndjameson) on CodePen.

На данный момент мы уже используем целых четыре свойства для оформления одной строчки. Это намного больше работы, чем просто добавить text-decoration.

Плюсы:

  • может пропускать выносные элементы с помощью text-shadow;
  • может изменять цвет, жирность и стиль линии;
  • позволяет использовать переходы и анимации цвета и жирности;
  • работает с многострочным текстом, если не применено значение inline-block;
  • работает на любом фоне, если не использовать text-shadow.

Минусы:

  • позиционируется слишком низко и перемещается сложным способом;
  • используется много дополнительных свойств для правильной работы;
  • при использовании text-shadow выделение текста выглядит уродливо.

box-shadow рисует подстрочную линию за счет двух внутренних теней: одна создает прямоугольник, а вторая скрывает его часть. Это значит, что вам нужен однотонный фон для того, чтобы это работало.

See the Pen Underlines 5: box-shadow by John D. Jameson (@johndjameson) on CodePen.

Вы можете использовать тот же трюк с text-shadow для заполнения пропусков между подчеркиванием и выносными элементами. Но если цвет подчеркивания отличается от цвета текста — или он просто достаточно тонкий, линия не будет сталкиваться с выносными элементами так, как при использовании text-decoration.

Плюсы:

  • может позиционироваться ниже базовой линии;
  • может пропускать выносные элементы за счет text-shadow;
  • позволяет изменять цвет и толщину линии;
  • работает с многострочным текстом.

Минусы:

  • не позволяет изменять стиль подчеркивания;
  • работает не на любом фоне.

Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.

Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline;.

See the Pen Underlines 6: background-image by John D. Jameson (@johndjameson) on CodePen.

Следующий вариант обходится без linear-gradient, для эффектов вы можете добавить свое фоновое изображение.

See the Pen Underlines 7: background-image (External) by John D. Jameson (@johndjameson) on CodePen.

Плюсы:

  • может позиционироваться ниже базовой линии;
  • может пропускать выносные элементы за счет text-shadow;
  • допускает изменение цвета, толщины и стиля линии;
  • работает с кастомными изображениями;
  • обертывает несколько строчек текста;
  • работает на любом фоне, если не применять text-shadow.

Минусы:

  • размер изображения может изменяться в зависимости от разрешения экрана, браузера и увеличения.

Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр SVG, который рисует линию и затем расширяет текст для маскировки части линии, которую мы хотим сделать прозрачной. Затем вы можете задать фильтру id и ссылаться на него в CSS примерно так filter: url(‘#svg-underline’).

Преимущество этого подхода в том, что прозрачность достигается без применения text-shadow, то есть мы пропускаем выносные элементы на любом фоне, включая градиенты и фоновые изображения! Это работает только на отдельной строке текста, учитывайте это.

See the Pen Underlines 8: SVG Filters by John D. Jameson (@johndjameson) on CodePen.

Вот как это выглядит в Chrome и Firefox:

Поддержка в IE, Edge и Safari проблематична. Сложно тестировать поддержку фильтра SVG в CSS. Вы можете использовать директиву @supports с filter, но это проверит лишь работу ссылки на фильтр, но не работу самого фильтра. Мои попытки завершились муторным определением возможностей браузера, это ощутимый недостаток метода.

Плюсы:

  • может позиционироваться ниже базовой линии;
  • может пропускать выносные элементы;
  • допускает изменение цвета, толщины и стиля линии;
  • работает на любом фоне.

Минусы:

  • не работает с многострочным текстом;
  • не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.

Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает, но я опишу кратко: подчеркивание рисуется с помощью элементов . Это новый подход, который работает на удивление хорошо.

Несмотря броское название, Underline.js это всего лишь техническое демо. Это значит, что вы не можете просто взять и подключить это в свой проект без изменения кода.

Я решил упомянуть об этом в доказательство концепции, что обладает потенциалом создания прекрасных интерактивных подчеркиваний, но чтобы это заработало, вам надо писать свой JavaScript.

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о text-decoration. Время пришло.

Само по себе это свойство отлично работает, но вы можете добавить несколько экспериментальных свойств для настройки внешнего вида подчеркивания.

  • text-decoration-color
  • text-decoration-skip
  • text-decoration-style

Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.

text-decoration-color

Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать — оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.

Firefox:

Safari:

text-decoration-skip

Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.

Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit-. Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.

Если вы используете Normalize, то учтите, что последние версии отключают это свойство ради последовательного поведения браузеров. И если вы хотите, чтобы подчеркивание не затрагивало выносные элементы, вам надо вручную активировать его.

text-decoration-style

Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style, добавляя кроме этого стиль wavy.

Вот список доступных значений:

  • dashed
  • dotted
  • double
  • solid
  • wavy

Сейчас свойство 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, в которой рассматриваются те же вопросы.

prgssr.ru

CSS text-decoration: подчеркивание, зачеркивание текста — учебник CSS

Используя свойство CSS text-decoration, можно добавлять дополнительные эффекты для текста, такие как подчеркивание, зачеркивание, мигание. Ниже приведена таблица с допустимыми значениями и их описанием.

Значение Что делает
underline Нижнее подчеркивание текста
overline Верхнее подчеркивание текста
line-through Зачеркивание текста
blink Мигание текста
none Удаление всех эффектов
inherit Наследование значений родителя

Пример записи стиля:

p a { text-decoration: underline; }

Применяя свойство text-decoration в CSS, следует соблюдать чувство меры и некоторые рекомендации. Перед использованием значения underline не для гиперссылки убедитесь, что текст на веб-странице не будет на нее похож. Многие пользователи воспринимают подчеркнутый текст как ссылку. Чтобы более гибко настроить стиль и иметь возможность изменять толщину, вид и цвет полосы подчеркивания, можно использовать свойство border (подробнее о нем мы будем говорить чуть позже).

Если вы желаете убрать стандартное подчеркивание гиперссылки в браузере, воспользуйтесь значением none.

Значение blink (мигание текста) хоть и внесено в таблицу, на данный момент не поддерживается браузерами.

Скриншот с примерами использования стиля:

Скриншот: использование свойства text-decoration

Далее в учебнике: установка тени для текста при помощи свойства CSS text-shadow.

idg.net.ua

Красивое тонкое подчеркивание ссылок средствами CSS

Содержание

  • RGBA
    • Синтаксис
    • Совместимость
    • Кто внедрил
    • Пример кода

С появлением формата RGBA (Red Green Blue Alpha) в CSS3 можно считать данную проблему решенной. Используя расширенный формат представления цвета, у веб-дизайнеров появилась возможность использовать альфа-прозрачность для цвета.

В отличие от свойства opacity его можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока. Цветовые значения RGBA являются продолжением цветовых значений RGB только с альфа-каналом — который определяет непрозрачность объекта.

Синтаксис

color: rgba(0,96,160); / * синий цвет */ color: rgba(0,96,160,0.2); / * синий цвет с прозрачностью */

Значение цвета RGBA задается: ​​RGBA (красный, зеленый, синий, альфа). Параметр альфа представляет собой число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Совместимость

Цветовые значения RGBA поддерживаются браузерами: IE9 +, Firefox 3 +, Chrome, Safari, и Opera 10 +.

Кто внедрил

Данной возможностью сразу же воспользовалась Студия Лебедева, Дизайн-бюро Артёма Горбунова, Илья Бирман… На их сайтах подчеркивание ссылок осталось, но оно стало более изящным.

patpitchaya / Shutterstock

Пример кода

Ниже привожу фрагменты кода, как сделать подчеркивание тонким и изящным. Естественно, что цвет вы будете указывать тот, который больше подходит вашему сайту.

a:link { color: #0060a0; border-bottom: 1px solid; border-bottom-color: rgba(0,96,160,0.2); }a:hover { color: #d04000; border-bottom-color: rgba(255,218,202,0.5); }

fortress-design.com


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!