Градиент в качестве фона

Ранее в качестве фона для сайта использовали либо просто заливку цветом, либо какую-то картинку, которая «весила» достаточно много и как следствие тормозила загрузку сайта. Затем стали использовать маленький «кусочек» — картинку малого размера, которую множили на весь экран.

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

Простые градиенты, типа разноцветной заливки здесь рассматриваться не будут. В интернете полно онлайн-генераторов по созданию этих градиентов. Вот несколько для примера : www.colorzilla.com или angrytools.com.

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

Листик в клеточку

 background-image:
   linear-gradient(#bbb, transparent 1px),
   linear-gradient(90deg,#bbb, transparent 1px);
background-size: 10px 10px;
background-position: center center;

Шахматка

background-color: white;
background-image:
   linear-gradient( 45deg,black 25%, transparent 25%, transparent 74%, black 75%, black), 
   linear-gradient( 45deg,black 25%, transparent 25%, transparent 74%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

Рисунок посложнее

В этом варианте используется один и тот же градиент, но при 4 различных фонах.

background-image:
   radial-gradient(#555, #333 21%, #eee 23%, transparent 25%)0 0,
   radial-gradient(#ccc, #666 21%, #eee 23%, transparent 35%)25px 0,
   radial-gradient(#ccc, #666 21%, #eee 23%, transparent 35%)0 25px,
   radial-gradient(#ccc, #666 21%, #eee 23%, transparent 35%)0 -25px,
   radial-gradient(#ccc, #666 21%, #eee 23%, transparent 35%)-25px 0;
background-size: 15px 15px;
 
background-color: rgba(248, 251, 255, 0.7);   /* Цвет фона 1*/
background-color: rgba(173, 173, 173, 0.7);   /* Цвет фона 2*/
background-color: rgba(92, 92, 92, 0.7);      /* Цвет фона 3*/
background-color: rgba(7, 7, 6, 0.74);        /* Цвет фона 4*/ 

Изменили лишь цвет фона, а внешне 4 разных рисунка.

Косая клетка

А здесь немного «поигрались» цветами и смотрите, что получилось.

   /* Серый фон */
background-image: 
   linear-gradient(45deg,rgba(8, 8, 8, 0) 48%,rgba(8, 8, 8, 0.2) 50%,rgba(8, 8, 8, 0) 52%),
   linear-gradient(-45deg,rgba(8, 8, 8, 0) 48%,rgba(8, 8, 8, 0.2) 50%,rgba(8, 8, 8, 0) 52%);
background-size: 1em 1em;
background-color: #ccc;
 
   /* Темный фон */
background-image:
   linear-gradient(45deg,rgba(255,255,255, 0) 48%,rgba(255,255,255, 0.2) 50%,rgba(255,255,255, 0) 52%),
   linear-gradient(-45deg,rgba(255,255,255, 0) 48%,rgba(255,255,255, 0.2) 50%,rgba(255,255,255, 0) 52%);
background-size: 1em 1em;
background-color: #444;

  /* Светлый фон */
background-image: 
   linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%),
   linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%);
background-size: 1em 1em;
background-color: #fff; 

Кинопленка

Ну а здесь градиент превращается в кино-, фото-пленку. Если кто то помнит мультики на фильмоскопе, так это оттуда. Как же давно это было…

Слева пустой фон, а справа что то захотелось создать иллюзию настоящей пленки.

Я думаю, если картинки с котом анимировать, то можно будет посмотреть » В Мире Животных».

Ну достаточно лирики — переходим к стилям.

border-left: 5px solid #555;
border-right: 5px solid #555;
margin-bottom: 15px;
background-image:
   linear-gradient(0deg, #eee 50%, #555 50%) left 91px, 
   linear-gradient(0deg, #eee 50%, #555 50%) right 4px;
background-size:  5px 20px,  5px 20px;
background-repeat: repeat-y, repeat-y;
background-color: #555; 

Зубчики

2 фона — светлый и темный

   /* Темный фон */
background-image:
   linear-gradient(45deg, transparent 5px, #555 5px, #555 6px, transparent 6px),
   linear-gradient(135deg, transparent 5px, #333 5px, #333 6px, transparent 6px);
background-size: 14px 14px, 14px 14px;
background-color: #444;
   /* Светлый фон */
background-image:
   linear-gradient(45deg, transparent 5px, #bbb 5px, #bbb 6px, transparent 6px),
   linear-gradient(135deg, transparent 5px, #ddd 5px, #ddd 6px, transparent 6px);
background-size: 14px 14px, 14px 14px;
background-color: #ccc;}

Кирпичики

background-image:
   linear-gradient(135deg, rgb(112, 128, 144) 22px, rgb(217, 236, 255) 22px, rgb(217, 236, 255) 24px, transparent 24px, transparent 67px, rgb(217, 236, 255) 67px,rgb(217, 236, 255) 69px, transparent 69px),
   linear-gradient(225deg, rgb(112, 128, 144) 22px, rgb(217, 236, 255) 22px, rgb(217, 236, 255) 24px, transparent 24px, transparent 67px, rgb(217, 236, 255) 67px, rgb(217, 236, 255) 69px, transparent 69px)0 64px;
background-color:rgb(112, 128, 144);
background-size: 64px 128px;
   

3D-кубы

background-image: 
   linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
   linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
   linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
   linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
   linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
   linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-color:#556;
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;

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

background-image:
   linear-gradient(90deg, transparent 90px, rgba(149, 6, 6, 0.96) 90px, #abced4 92px, transparent 92px),
   linear-gradient(#eee 2px, transparent 0px);          
background-color: #fffeee;
background-size:100% 100%, 100% 1.4em;

Клетчатое поле

background-color:rgba(173, 173, 248, 0.1);
background-image:
   linear-gradient(rgba(83, 82, 82, 0.48) 1px, transparent 1px),
   linear-gradient(to right, rgba(83, 82, 82, 0.48) 1px, transparent 1px),
   linear-gradient(rgba(2,2,2,.3) 1px, transparent 1px),
   linear-gradient(to right, rgba(2,2,2,.3) 1px, transparent 1px);;
background-size:50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
   

Карбон

background-image:
   linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
   linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
   linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
   linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
   linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
   linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;

Звездное небо

background-color:black;
background-image:
   radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 20px),
   radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 10px),
   radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 20px),
   radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 0px);
background-size: 500px 300px, 220px 50px, 100px 100px, 50px 50px; 
background-position: 0 0, 20px 30px,65px 90px, 30px 50px;

Круги на воде

background: 
   repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px);