• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать повторяющиеся градиенты на CSS (Радиальные, линейные и также повторяющиеся градиенты на CSS3)
Создать повторяющиеся градиенты на CSS
Kosten
Дата: Воскресенье, 2019-05-05, 02:52 | Сообщение 1
Администраторы
Сообщений:21751
Награды: 56


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

А если просто, то создаем красивый узор в одном экземпляре, а потом при помощи 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 );
}

Как можно понять из заданного, что сама идея состоит в том, что мы можем создавать шаблоны из градиентов, которые мы создаем, и позволить им повторяться бесконечно.

Демонстрация
Прикрепления: 2733450.png(7.2 Kb) · 9261247.png(6.5 Kb) · 0362635.png(18.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать повторяющиеся градиенты на CSS (Радиальные, линейные и также повторяющиеся градиенты на CSS3)
  • Страница 1 из 1
  • 1
Поиск: