Как создать повторяющийся рисунок при помощи CSS3

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

Мы будем использовать простую функцию повторяющегося градиента. И так, в оригинале это выглядит следующим образом:

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

Внизу на рисунке можно увидеть, что у нас получится благодаря этому коду.
простой градиент
Для того чтобы развернуть наш градиент на 90 градусов необходимо добавить пару параметров, а именно

gradient {
	background: -webkit-repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
	background: -moz-repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
	background: -o-repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
	background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
} 

Теперь воспользуемся точками останова и создадим простой повторяющий узор

    .gradient {background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);}  

У нас должно получится вот это
простой повторяющийся узор
А теперь попробуем создать стиль, описывающий простой тетрадный листок в линейку.

    .gradient {  
        width: auto;  
        height: 500px;  
        margin: 0 50px;  
        background: -webkit-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
        background: -moz-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
        background: -o-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
        background: repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
        background-size: 100% 21px;  
    }   
   /*Добавим 2 красные полосы, которые будут указывать на границы*/
.gradient:before {  
    content: "";  
    display: inline-block;  
    height: 500px;  
    width: 4px;  
    border-left: 4px double #FCA1A1;  
    position: relative;  
    left: 30px;  
}

В итоге мы получим следующее:
тетрадный листок



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *