• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Линейный градиент границы для текста на CSS (Границы CSS используя градиент для описание на сайте)
Линейный градиент границы для текста на CSS
Kosten
Дата: Пятница, 29.06.2018, 19:02 | Сообщение 1
Администраторы
Сообщений:18071
Награды: 55


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



HTML

Код
<p>Ваше описание</p>


CSS

Код
p {
    margin-left: 1em;
    max-width: 31rem;
    padding: 1.5em;
    border-width: 3px;
    border-style: solid;
    -o-border-image: linear-gradient(to bottom left, black, orange) 0.5 stretch;
    border-image: linear-gradient(to bottom left, #131111, #f5a107) 0.5 stretch;
}


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

Демонстрация
Прикрепления: 3719850.png(16.0 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Линейный градиент границы для текста на CSS (Границы CSS используя градиент для описание на сайте)
  • Страница 1 из 1
  • 1
Поиск: