| Kosten | Вторник, 21 Мая 2019, 03:29 | Сообщение 1 |
| Нам нужно создать подчеркивание текста, где по убыванию знаков, все смотрелось корректно. Где придется подчеркнуть довольно большой объем текста, тем самым он будет изначально замечен в тексте, и все сделаем на чистом 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 селектора псевдо обеспечивает тень текста не мешает выделение текста.
| | Страна: (RU) |
| |
