CSS3 повторение градиента

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

Тест о котором я упоминал в описании находится здесь: Тест CSS3. Стандарт оформления HTML документов

Реальный пример работы вы можете увидеть и скачать ниже:

Посмотреть примерСкачать

Как использовать?(простое повторение градиента)

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

1
2
3
4
5
6
7
8
9

/*Линейный*/  
.gradient {  
    background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);   
}  
 
/*Радиальный*/  
.gradient {  
    background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);    
}

(Создание шаблона для повторений)

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

HTML часть

Для этого нам нужен лишь один <div> и никаких изображений, только CSS3:

1
2

<div class="gradient five">
</div>

CSS3 часть

1
2
3
4
5
6
7
8
9
10

.gradient {  
    width: auto;  
    height: 500px;  
    margin: 0 50px;  
    background: -webkit-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -moz-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -o-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background-size: 100% 21px;  
}

Последнее свойство означает что градиент будет растягиваться на всю страницу и повторяться через 21 пиксель. Чтобы свойство работало в разных браузерах мы используем специальные префиксы(«-webkit», «-moz», «-o»).

А для создания двух полосок слева мы используем псевдоэлемент :before :

1
2
3
4
5
6
7
8
9

.gradient:before {  
    content: "";  
    display: inline-block;  
    height: 500px;  
    width: 4px;  
    border-left: 4px double #FCA1A1;  
    position: relative;  
    left: 30px;  
}

Вывод

CSS3 еще больше упрощает жизнь веб-разработчика и дизайнера. Всё меньше и меньше изображений, а значит больше скорость загрузки страницы. Я уверен, осталось недолго ждать когда все браузеры смогут полноценно поддерживать данную технологию.

Успехов!

Источник: http://www.hongkiat.com/blog/css3-repeating-gradients/