CSS3 Повторяющиеся градиенты [CSS3 Tips]

Существует множество функций CSS3, которые меняют способ оформления веб-сайта, одна из которых – CSS3 Gradients. До CSS3 нам определенно нужны изображения для создания эффекта градиента; теперь мы можем добиться того же (и лучшего) эффекта, используя только CSS

В наших предыдущих постах мы обсуждали два типа градиентов, которые могут быть достигнуты с помощью CSS3:

На этот раз мы рассмотрим их родного брата: повторяющиеся градиенты.

Основное повторение

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

/ * Линейный * /
.gradient {
фон: повторяющийся линейный градиент (0deg, # f9f9f9, #cccccc 20px);
}

/ * Radial * /
.gradient {
фон: повторяющийся радиальный градиент (50% 50%, круг, # f9f9f9, #cccccc 20px);
}

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

В следующем разделе мы покажем вам, как мы можем использовать CSS3 Repeating Gradients в реальных примерах.

Пример: создание паттернов

Наиболее распространенной реализацией «Повторяющихся градиентов» является создание фоновых шаблонов. В этом примере мы собираемся создать простые узоры с вертикальной полосой.

.gradient {
фон: повторяющийся линейный градиент (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}

Обратите внимание, как мы определяем два разных цвета – # f9f9f9 и #cccccc – в одном месте, 20 пикселей. Этот пример прояснит разницу между этими двумя цветами и устранит размытость.
Чтобы направить ориентацию, мы просто изменим угол – 90 градусов направит его горизонтально, а 45 градусов направит по диагонали и так далее.

Пример: создание Paperline

Во втором примере мы собираемся создать бумажную линию, которую вы часто можете видеть в блокноте. Чтобы создать этот эффект, нам нужен только div, без изображений, только CSS.

.gradient {
ширина: авто;
высота: 500 пикселей;
поле: 0 50px;
background: -webkit-повторяющийся-линейный градиент (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px);
background: -moz-повторяющийся-линейный градиент (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px);
фон: -o-повторяющийся линейный градиент (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px);
фон: повторяющийся линейный градиент (-90 градусов, # f9f9f9, # f9f9f9 20px, #cccccc 21px);
размер фона: 100% 21px;
}

Обратите внимание, мы также добавили CSS3 background-size свойство указывать размеры фоновых изображений для 100%, 20px. Хотя градиенты CSS3 отображают «цвета», они фактически относятся к категории изображений, а не цветов.
Далее мы будем использовать: before псевдоэлемент, чтобы добавить полосу на левой стороне листа.

.gradient: before {
содержание: “”;
дисплей: встроенный блок;
высота: 500 пикселей;
ширина: 4 пикселя;
Граница слева: 4px двойной # FCA1A1;
положение: относительное;
слева: 30 пикселей;
}

И мы сделали, это действительно просто, верно? Теперь мы можем увидеть их в действии по ссылкам ниже.

Дополнительные ресурсы