CSS3 Повторяющиеся градиенты [CSS3 Советы]
Существует множество функций CSS3, которые меняют способ оформления веб-сайта, одна из которых - CSS3 Gradients. До CSS3 нам определенно нужны изображения для создания эффекта градиента; теперь мы можем добиться того же (и лучшего) эффекта, используя только CSS
В наших предыдущих постах мы обсуждали два типа градиентов, которые могут быть достигнуты с помощью CSS3:
- Радиальная и
- Линейные градиенты.
На этот раз мы рассмотрим их родного брата: повторяющиеся градиенты.
Основное повторение
Повторяющиеся градиенты это по сути расширение. Синтаксис похож на то, как мы определяем радиальный и линейный градиенты, только то, что, как следует из названия, он также будет повторять цвета в указанном направлении. Чтобы повторить линейные градиенты, мы можем использовать эту функцию: повторяющаяся-линейный градиент, в то время как для повторения радиальных или эллиптических градиентов мы используем эту функцию: Повторяя-радиальный градиент.
/ * Линейный * / .gradient фон: повторяющийся линейный градиент (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background: повторяющийся радиальный градиент (50% 50%, круг, # f9f9f9, #cccccc 20px);
В остальном в коде нет большой разницы, за исключением повторение цветов. Ниже приведена простая иллюстрация, описывающая, как работает это цветовое повторение..
Хотя изображение выше иллюстрирует только повторение линейных градиентов, основная идея также применима к радиальным градиентам, в которых цвета будут повторяться бесконечно, в этом случае, в любом направлении. Перейдите по ссылке ниже, чтобы увидеть демо.
- Посмотреть демо
В следующем разделе мы покажем вам, как мы можем использовать CSS3 Repeating Gradients в реальных примерах.
Пример: создание паттернов
Наиболее распространенная реализация Повторяющиеся градиенты это создать фоновые рисунки. В этом примере мы собираемся создать простые узоры с вертикальной полосой.
.градиент фон: повторяющийся линейный градиент (0 градусов, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Обратите внимание, как мы определяем два разных цвета - # f9f9f9 а также #cccccc - в том же месте, 20px. Этот пример прояснит разницу между этими двумя цветами и устранит размытость.
Для направления ориентации мы просто меняем угол - 90deg будет направлять его горизонтально 45deg будет направлять его по диагонали и так далее.
- Посмотреть демо
Пример: создание Paperline
Во втором примере мы собираемся создать бумажную линию, которую вы часто можете видеть в блокноте. Чтобы создать этот эффект, нам нужно только ДИВ, нет изображений, только CSS.
.градиент ширина: авто; высота: 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 фон-размер свойство указывать размеры фоновых изображений для 100%, 20 пикселей. Хотя градиенты CSS3 отображают «цвета», они фактически относятся к категории изображений, не цвет.
Далее мы будем использовать :до Псевдо-элемент добавить полоску на левой стороне бумаги.
.градиент: перед содержание: ""; дисплей: встроенный блок; высота: 500 пикселей; ширина: 4 пикселя; рамка слева: 4px, двойная # FCA1A1; положение: относительное; слева: 30 пикселей;
И мы сделали, это действительно просто, верно? Теперь мы можем увидеть их в действии по ссылкам ниже.
- Посмотреть демо
- Скачать исходный код
Дополнительные ресурсы
- Webkit CSS3 Gradients
- CSS3 градиенты в сети разработчиков Microsoft
