• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание нижнего контура для текста на CSS (Нижний контурный эффект для текста при помощи CSS)
Создание нижнего контура для текста на CSS
Kosten
Вторник, 21 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В этой статье представлен нижний контур для знаков, где при заполнение идет эффект. Контур, это линия, нарисованная вокруг элементов за пределами границы. Пространство между элементом и его контуром является прозрачным. Кроме того, контур может быть не прямоугольным. Для этого нам нужен способ стилизации диапазона на основе состояния фокуса.



HTML

Код
<div>
  <span contenteditable>Здесь может быть разный текст...</span>
</div>

CSS

Код
div {
  padding: 0.4rem 0;
  border-bottom: 4px solid #383838;
  width: 90vw;
}

span {
    position: relative;
    bottom: -11px;
    color: #f3ecec;
    display: inline-block;
    padding: 0.5rem 0;
    border-bottom: 4px solid #18de83;
    outline: 0;
}

Длина: это расстояние или расстояние между контуром и границей, а точнее, это расстояние на которое контур смещается от края границы. Это также может иметь отрицательное значение. Если длина отрицательна, то контур помещается внутри элемента.

Демонстрация
Прикрепления: 6739247.png (2.8 Kb) · 6547576.zip (1.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание нижнего контура для текста на CSS (Нижний контурный эффект для текста при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: