Фон в стиле «карбон» с помощью градиентов CSS
Всем, здравствуйте!
В предыдущей статье расписывал, как с помощью линейных и радиальных градиентов CSS, можно «нарисовать» вполне симпатичные текстуры для фона.
На этот раз предлагаю воспроизвести тёмный фон в стиле «карбон», который отлично подойдёт для заливки, как основного фона сайта, так и для оформления отдельных блочных элементов.
В примере использовал повторяющиеся линейные градиенты с углом наклона 45deg, а так же наложение радиального градиента по-центру вверху at 50% 0, для имитации светового блика:
Получившееся фоновое «изображение» масштабируем и изменяем размер точек, с помощью значений свойства background-size. Попробуйте поэкспериментировать со значениями заданными в единицах em и вы увидите совсем другую картину ))
Для наглядности прописал заголовок <h1> с визуальным эффектом вдавленности текста и добавил разделитель <hr>, оформленный нестандартно, с помощью всё тех же градиентов. В итоге получилось то, что получилось.
С поддержкой браузерами, без особых изменений, современные браузеры отлично «отрисовывают» все элементы, а вот в IE, текстуры увидят пользователи не ниже 10-й версии ((
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 0