Фони для сайту на чистому CSS

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{21-06-2017, 00:42 2 212 0}

Фони для сайту на чистому CSS створені з допомогою лінійного і радіального градієнту, без використання зображень.

За допомогою невиликого коду css, можна дуже легко «намалювати» фон у вигляді діагональної сітки, у формі шахової дошки, або ж, як у шкільного зошита в клітинку.
Дивіться на результат, на нехитрий код CSS і вам відразу стане все зрозуміло, особливо розписувати тут нічого.

1. Крапки на темно-синьому тлі
  Код:

body {
padding: 0;
margin: 0;
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
background-color: #12364a;
background-size: 12px 12px;
}
body:after {
content: ";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

2. Темний фон в клітинку

 Код:

body {
 background-color:#232323; margin:0;
background-image: linear-gradient(0deg, rgba(0, 153, 204, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 204, .1) 1px, transparent 1px);
background-size:20px 20px;
background-attachment:fixed;
}

3. Діагональні лінії на темному тлі

 Код:

body{
background-color:#666;
background-image: linear-gradient(45deg, transparent,transparent 48%, rgba(255,255,255,.3) 48%, rgba(255,255,255,.3) 52%, transparent 52%);
background-size:10px 10px;
}
body:after {
content: ";
 display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

З допомогою лінійних, радіальних градієнтів CSS3, ви можете створювати і більш вражаючі фони, прикладів цьому маса. Такі фони дуже навіть добре лягають і на інші блокові елементи сторінки( кнопки, меню, бічні колонки і окремі блоки з контентом), не використовуючи при цьому додаткових зображень.

Для тих кому мало! ось сервіс з сотнями фонів - https://www.transparenttextures.com/
З приводу підтримки браузерами, тут все, як завжди, сучасні браузери відмінно справляються, а ось в IE, текстури побачать користувачі не нижче 10-ї версії цього браузера.

У прикладах префікси опустив, при виникненні проблем з відображенням, думаю додати необхідні, буде не дуже складно.

Коментарі