3 Варіанти фонових текстур за допомогою градієнтів css3

39

3 Варианта фоновых текстур с помощью градиентов css3

Уявляю вашій увазі 3 варіанти основного фону для сайту в темних тонах, створені з допомогою лінійного і радіального градієнту з обойми CSS3, без використання додаткових зображень.

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

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

Дивіться на результат, на нехитрий код CSS і вам відразу стане все зрозуміло, особливо розписувати тут нічого, а з’являться питання, в коментах обов’язково відповім.

1. Точки на темно-синьому тлі

  • Результат
  • CSS
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%);
}

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. Темний фон в клітинку

  • Результат
  • CSS
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;
}

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. Діагональні лінії на темному тлі

  • Результат
  • CSS
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%);
}

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, ви можете створювати і більш вражаючі фони, прикладів цьому маса. Такі фони дуже навіть добре лягають і на інші блокові елементи сторінки( кнопки, меню, бічні колонки і окремі блоки з контентом), не використовуючи при цьому додаткових зображень.
З приводу підтримки браузерами, тут все, як завжди, сучасні браузери відмінно справляються і «отрисовывают» всі елементи, а ось в IE, текстури побачать користувачі не нижче 10-ї версії цього браузера.
У прикладах префікси опустив, при виникненні проблем з відображенням, думаю додати необхідні, буде не дуже складно.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: