Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Сниппеты » 11 Фоновых рисунков с помощью градиентов CSS3

11 Фоновых рисунков с помощью градиентов CSS3

11 Фоновых рисунков с помощью градиентов CSS3

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

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

Смотрите на результат, на фарш кода CSS и те кому оно надо, можете смело копировать или скачивать архив с исходниками, чтобы в дальнейшем использовать в своих проектах.
 

1. Мелкие клеточки по диагонали

Фоновый рисунок в виде пересекающихся разноцветных линий по диагонали, в результате чего визуально получается текстура в мелкую клеточку, или квадраты, если хотите. Достигается с помощью свойства repeating-linear-gradient() — бесконечно повторяющийся линейный .
 

html,
body {
    height: 100%;
}
body {
    margin: 0;
    --c: rgba(255, 255, 255, 0.7);
    --t: transparent;
    background-image: repeating-linear-gradient(45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0), repeating-linear-gradient(-45deg, var(--c) 0, var(--c) 20px, var(--t) 20px, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 68px, var(--t) 80px, var(--c) 0), linear-gradient(to bottom right, #FC354C, #0ABFBC);
}

 

2. Переплетение диагональных линий

в виде переплетённых линий по диагонали, создаётся некая иллюзия плетения, достигается всё с помощью того же свойства repeating-linear-gradient() — бесконечно повторяющийся линейный градиент.
 

html,
body {
    height: 100%;
}
body {
    margin: 0;
    --c: rgba(255, 255, 255, 0.7);
    --t: transparent;
    background-image: repeating-linear-gradient(45deg, var(--t) 0, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 0), repeating-linear-gradient(-45deg, var(--t) 0, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 0), linear-gradient(to bottom left, #FC354C, #0ABFBC);
}

 

3. Точки на тёмном фоне

Фоновый рисунок в виде сетки светлых точек расположенной на более тёмном базовом фоне, достигается с помощью использования повторяющихся линейных градиентов linear-gradien() и согласно заданным размерам в свойстве background-size (масштабирует фоновое изображение).
 

body {
    background: -webkit-linear-gradient(left, #474752 20px, transparent 1%) center, -webkit-linear-gradient(#474752 20px, transparent 1%) center, #636363;
    background: linear-gradient(90deg, #474752 20px, transparent 1%) center, linear-gradient(#474752 20px, transparent 1%) center, #636363;
    background-size: 22px 22px;
}

 

4. Повторяющиеся вертикальные тонкие линии

Фоновый рисунок в виде повторяющихся тонких линий расположенных вертикально. Используем бесконечно повторяющийся линейный градиент repeating-linear-gradient(), образуя тем самым фоновый узор, в котором цвета последовательно сменяют друг друга.
 

body {
    background: repeating-linear-gradient(90deg, rgb(255, 0, 99), black 1px, snow 0, red 2px, blue 0, snow 3px);
}

 

5. Широкие вертикальные полосы в тёмных тонах

Фоновый рисунок в виде широких чередующихся полос в тёмных тонах, расположенных вертикально,
 

body {
    -webkit-perspective: 1000px;
          perspective: 1000px;
    -webkit-perspective-origin: center center;
          perspective-origin: center center;
    overflow: hidden;
    background: #000;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.025) 50%, transparent 30%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 50%, transparent 30%);
    background-size: 2rem 100%;
}

 

6. Сетка крупных точек на светлом фоне

Фоновый рисунок в виде сетки крупных точек расположенных на светлом базовом фоне и соединённых пунктирной линией. Используем повторяющиеся радиальные (radial-gradient) и линейные (linear-gradient) градиенты в сочетании с заданными размерами (background-size) и начальным положением фонового изображения (background-position)
 

body {
    background: 
    radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
    #fff;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

 

 

7. Плетение разноцветных ромбиков

Фоновый рисунок в виде переплетения разноцветных ромбиков и диагональных линий. Задействуем повторяющиеся линейные градиенты розового и черного оттенков.
 

body {	
    background-color: hsl(55,45%,90%);
    background-image:
    /* Розовые линии */
    linear-gradient(
    -116deg,
    transparent 40%,
    hsl(0,80%,80%) 0,
    hsl(0,80%,80%) 42%,
    transparent 42%
    ),
    linear-gradient(
    116deg,
    transparent 41%,
    hsl(0,80%,80%) 0,
    hsl(0,80%,80%) 43%,
    transparent 43%
    ),
    /* Чёрные линии */
    linear-gradient(
    -116deg,
    transparent 40%,
    hsl(0,0%,40%) 0,
    hsl(0,0%,40%) 42%,
    transparent 42%
    ),
    linear-gradient(
    116deg,
    transparent 41%,
    hsl(0,0%,40%) 41%,
    hsl(0,0%,40%) 43%,
    transparent 43%
    ),
    /* Чёрные ромбы */
    linear-gradient(
    -115deg,
    hsl(0,0%,40%) 16.5%,
    transparent 0
    ),
    linear-gradient(
    -65deg,
    hsl(0,0%,40%) 16.5%,
    transparent 0
    ),
    linear-gradient(
    115deg,
    hsl(0,0%,40%) 16.5%,
    transparent 0
    ),
    linear-gradient(
    65deg,
    hsl(0,0%,40%) 16.5%,
    transparent 0
    ),
    /* Розовые ромбы */
    linear-gradient(
    -115deg,
    hsl(0,80%,80%) 16.5%,
    transparent 0
    ),
    linear-gradient(
    -65deg,
    hsl(0,80%,80%) 16.5%,
    transparent 0
    ),
    linear-gradient(
    115deg,
    hsl(0,80%,80%) 16.5%,
    transparent 0
    ),
    linear-gradient(
    65deg,
    hsl(0,80%,80%) 16.5%,
    transparent 0
    );
    background-size: 
    /* Розовые линии */
    8em 8em,
    8em 8em,
    /* Чёрные линии */
    8em 8em,
    8em 8em,
    /* Чёрные ромбы */
    8em 8em,
    8em 8em,
    8em 8em,
    8em 8em,
    /* Розовые ромбы */
    8em 8em,
    8em 8em,
    8em 8em,
    8em 8em;
    background-position: 
    /* Розовые линии */
    3em -8em,
    -3em -8em,
    /* Чёрные линии */
    -9em 8em,
    9em 8em,
    /* Чёрные ромбы */
    0, 0, 0, 0,
    /* Розовые ромбы */
    4em, 4em, 4em, 4em;
}

 

8. Пересекающиеся диагональные линии в светло-голубых тонах

Фоновый рисунок в виде пересекающихся диагональных линий в светло-голубых тонах, образующих визуальный эффект клетчатой ткани.
 

html {
    height: 100%;
    background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.6) 0, rgba(192, 235, 250, 0.2) 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.4) 0, rgba(192, 235, 250, 0.1) 2em), #FFF;
    background-blend-mode: multiply;
}

 

9. Узор на скатерти

Фоновый рисунок в виде пересекающихся горизонтальных и вертикальных линий, в результате получаем вполне себе приличное подобие скатерти ))) Как и в других случаях используем разнообразные вариации повторяющихся линейных градиентов.
 

body {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 93%, rgba(192, 204, 171, 0.5) 93%, rgba(192, 204, 171, 0.5) 100%), linear-gradient(90deg, rgba(232, 222, 103, 0.4) 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0)), linear-gradient(rgba(232, 222, 103, 0.4) 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0) 90%, rgba(229, 113, 82, 0.2) 90%, rgba(229, 113, 82, 0.2) 100%), linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 239, 195, 0.4) 35%, rgba(255, 239, 195, 0.4) 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(232, 222, 103, 0.4) 55%, rgba(232, 222, 103, 0.4) 70%, rgba(255, 255, 255, 0) 70%), linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 239, 195, 0.4) 35%, rgba(255, 239, 195, 0.4) 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(232, 222, 103, 0.4) 55%, rgba(232, 222, 103, 0.4) 70%, rgba(255, 255, 255, 0) 70%), linear-gradient(rgba(255, 255, 255, 0) 55%, rgba(255, 239, 195, 0.4) 55%, rgba(255, 239, 195, 0.4) 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, rgba(255, 255, 255, 0) 55%, rgba(255, 239, 195, 0.4) 55%, rgba(255, 239, 195, 0.4) 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(192, 204, 171, 0.5) 20%, rgba(192, 204, 171, 0.5) 80%, rgba(255, 255, 255, 0) 80%), linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(229, 113, 82, 0.2) 20%, rgba(229, 113, 82, 0.2) 80%, rgba(255, 255, 255, 0) 80%), linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(232, 222, 103, 0.4) 10%, rgba(232, 222, 103, 0.4) 35%, rgba(255, 255, 255, 0) 35%), linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(232, 222, 103, 0.4) 10%, rgba(232, 222, 103, 0.4) 35%, rgba(255, 255, 255, 0) 35%);
    background-size: 14em 14em;
    background-color: #FFEFC3;
}

 

10. Тёплый Плед

Фоновый рисунок создающий иллюзию мягкого, тёплого пледа.
 

html {
    height: 100vh;
    background-color: #000;
    background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,255,255, .25) 50px,rgba(0,255,255, .25) 100px), repeating-linear-gradient(90deg, rgba(0,255,255, .25), rgba(0,255,255, .25) 50px, transparent 50px, transparent 100px), repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px), repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px), repeating-linear-gradient(transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px,transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px), repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px,transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px);
}

 

11. Фоновый рисунок в клеточку

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

body {
    background-color: #269;
    background-image:
    linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

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

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

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

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

2 комментария
  1. Самые лучшие цвета для фона белый или серый, чтобы глаза не уставали 🙂

    Ответить
    • driver:

      Это понятно)), но ведь кому-то да нужно, да и не обязательно использовать такие текстуры именно для фона сайта.

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

Отправляя к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