• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать подчеркивание большого объёма текста (Подчеркивание слов без подчеркивания пробелов между ними)
Создать подчеркивание большого объёма текста
Kosten
Дата: Вторник, 2019-05-21, 03:29 | Сообщение 1
Администраторы
Сообщений:22439
Награды: 56


Нам нужно создать подчеркивание текста, где по убыванию знаков, все смотрелось корректно. Где придется подчеркнуть довольно большой объем текста, тем самым он будет изначально замечен в тексте, и все сделаем на чистом CSS. Типичные подчеркивания CSS будут охватывать все слово и поддерживать местоположение на основе высоты строки.

Этот фрагмент генерирует тонкое фоновое изображение, где отстает от букв, создавая тем самым подчеркивание, которое не прорезает спуски. Более приятная альтернатива text-decoration: underline или u /u где спуски не обрезать подчеркивание. Где реализованные приемы проходит в таком направление, как text-decoration-skip-ink: auto имея меньше контроля над подчеркиванием.

HTML

Код
<p class="kadebou_cubepingon_descevung">Довольно подчеркивание текста без обрезки по убыванию букв.</p>

CSS

Код
.kadebou_cubepingon_descevung {
    display: inline;
    text-shadow: 1px 1px #fff5f5, -1px 1px #f8faff, -1px -1px #fbfcff, 1px -1px #fcfdff;
    background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}
.kadebou_cubepingon_descevung::-moz-selection {
  background-color: rgba(9, 158, 42, 0.51);
  text-shadow: none;
}
.kadebou_cubepingon_descevung::selection {
  background-color: rgba(9, 158, 42, 0.51);
  text-shadow: none;
}

Также сразу в CSS выстраиваем свою палитру цвета, которая идет при копирование знаков, которые подчеркнуты, где ставим свой оттенок цвета.

Демонстрация

1. text-shadow использует 4 значения со смещениями, которые покрывают область 4x4 px, чтобы гарантировать, что подчеркивание имеет тень, в которой спусковые механизмы обрезают ее. Используйте цвет, который соответствует фону. Для более крупного шрифта используйте больший pxразмер. Дополнительные значения могут создать еще более плотную тень, а также могут использоваться субпиксельные значения.
2. background-image: linear-gradient(...) создает градиент 90 градусов, используя цвет текста.
3. Эти background-* свойства определяют размер градиента как 100% от ширины блока и 1px в высоту на дне и отключает повторение, который создает 1px подчеркивание под текстом.
4. Правило ::selection селектора псевдо обеспечивает тень текста не мешает выделение текста.
Прикрепления: 4683494.zip(1.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать подчеркивание большого объёма текста (Подчеркивание слов без подчеркивания пробелов между ними)
  • Страница 1 из 1
  • 1
Поиск: