| Kosten | Воскресенье, 05 Мая 2019 | Сообщение 1 |
| С немного меньшей поддержкой браузера повторяются градиенты, которые бывают как линейные, так и оригинальные по своему формату. Есть хитрость с не повторяющимися градиентом, чтоб выставить, но для начало создаем такой образ, где просто идет повторение заданного элемента, для того, чтобы совпал с другими маленькими крошечными заданными версиями.
А если просто, то создаем красивый узор в одном экземпляре, а потом при помощи CSS задаем ему повторение, которое осуществляется по всей странице. Остается создать оригинальный градиент и установите background-size под заданную форму. Это позволяло легко создавать красиво исполненные полосы, которые потом можно задействовать в других направлениях.
Сравнение линейного градиента по левую сторону с повторяющимся линейным градиентом по с правую сторону.
Существует три типа повторяющихся градиентов, два из которых в настоящее время поддерживаются в официальной спецификации, а второй идет в текущем рабочем проекте.
Синтаксис для каждой нотации такой же, как и у соответствующего типа градиента. Например repeating-linear-gradient() следует тот же синтаксис, что и linear-gradient().
HTML
Код <div class="klass"></div>
CSS
Код div {
width: 100%;
height: 550px;
background-image: repeating-linear-gradient( 45deg, #efef08, #ecec07 10px, #f10606 10px, #f10909 20px );
}
Повторяется градиент изначально определяется окончательной остановкой цвета. Если это на 20px размер градиента, который затем повторяет представляет собой 20px по 20px площади.
То же самое верно, если к рисунку приковано несколько цветов, где окончательный цвет с конечной остановкой — это то, что определяет размер и местоположение повторения.
Демонстрация
Код .klass {
width: 100%;
height: 550px;
background: repeating-radial-gradient( circle at 0 0, #e8e8e8, #d2cece 50px );
}
Как можно понять из заданного, что сама идея состоит в том, что мы можем создавать шаблоны из градиентов, которые мы создаем, и позволить им повторяться бесконечно.
Демонстрация
| | Страна: (RU) |
| |
