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

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

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

Представляю вашему вниманию 3 варианта основного фона для сайта в тёмных тонах, созданные с помощью линейного и радиального градиентов из обоймы CSS3, без использования дополнительных изображений.

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

Конечно, сейчас в интернетах предостаточно всевозможных онлайн-генераторов CSS3, с помощью которых, неособо заморачиваясь, в пару-тройку кликов, можно забабахать любую симпатишную кнопку, прикрутить тень к тексту или блоку, а также залить красками. Но мало какой генератор, сможет воспроизвести полномасштабные фоновые . Поэтому, включив воображение и используя градиенты мы сделаем это самостоятельно.

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

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Саша:

    шикарно!

    Ответить
  2. Думаю, такая реализация фона будет грузиться гораздо быстрее, нежели при использовании стандартных графических изображений. В плане оптимизации скорости сайта подход классный.

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru