Представляю вашему вниманию 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%);
}

На весь экран
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;
}

На весь экран
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%);
}

На весь экран

С помощью линейных и радиальных градиентов CSS3, вы можете создавать и более впечатляющие фоны, примеров этому масса. Такие фоны очень даже хорошо ложатся и на другие блочные элементы страницы( кнопки, меню, боковые колонки и отдельные блоки с контентом), не используя при этом дополнительных изображений.
По поводу поддержки браузерами, здесь всё, как всегда, современные браузеры отлично справляются и «отрисовывают» все элементы, а вот в IE, текстуры увидят пользователи не ниже 10-й версии этого браузера.
В примерах префиксы опустил, при возникновении проблем с отображением, думаю добавить самостоятельно необходимые, будет не очень сложно.

С Уважением, Андрей .

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

фффффффффффффффффффф

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *