Фон в стилі «карбон» з допомогою градієнтів CSS

41

Всім, привіт!
У попередній статті розписував, як за допомогою лінійних і радіальних градієнтів CSS, можна «намалювати» цілком симпатичні текстури для фону.
На цей раз пропоную відтворити темний фон в стилі «карбон», який відмінно підійде для заливки, як основного фону сайту, так і для оформлення окремих блокових елементів.

У прикладі використовував повторювані лінійні градієнти з кутом нахилу 45deg, а так само накладення радіального градієнта по центру вгорі at 50% 0, для імітації світлового відблиску:

CSS Текстура в стиле карбон

На весь екран

Вийшло фонове зображення масштабується і змінюємо розмір точок, за допомогою значень властивості background-size. Спробуйте поекспериментувати зі значеннями, заданими в одиницях em і ви побачите зовсім іншу картину ))

Для наочності прописав заголовок

з візуальним ефектом вдавленности тексту і додав роздільник


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

З підтримкою браузерами, без особливих змін, сучасні браузери відмінно «отрисовывают» всі елементи, а ось в IE, текстури побачать користувачі не нижче 10-ї версії ((

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

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