Хаки и Скрипты Next Generation CMS

Фоны для сайта на чистом CSS

  1. Главная страница
  2. CSS
irbees2008 irbees2008 Опубликовано - 26 - мая CSS
4038 - 0
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

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

Представленные ниже CSS-паттерны просты про структуре. Их можно применять как исходники для написания своего собственного фона. Можно легко менять расцветки и размеры в рисунке фона. Как правило цвет и размеры подгоняются через панель разработчика в браузере .

В исходниках кода я опускаю CSS-класс для атрибутов, оставляя только стили.
Выглядит он вот так:


А вот его CSS код:
Код:
background-color: #269;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
background-image:
 -webkit-linear-gradient(white 2px, transparent 2px),
 -webkit-linear-gradient(0, white 2px, transparent 2px),
 -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
 -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image:
 -moz-linear-gradient(white 2px, transparent 2px),
 -moz-linear-gradient(0, white 2px, transparent 2px),
 -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
 -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image:
 linear-gradient(white 2px, transparent 2px),
 linear-gradient(90deg, white 2px, transparent 2px),
 linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);

Горизонтальные линии
Фон из цветных горизонтальных линий, сделанный на CSS
CSS :
Код:
background-size: 50px 50px;
background-color: #3d5762;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

Вертикальные линии
Так же можем расположить линии вертикально:

CSS
Код:
background-size: 50px 50px;
background-color: #726144;
background-image: -webkit-linear-gradient(0deg, #5a4e39 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, #5a4e39 50%, transparent 50%, transparent);
background-image: linear-gradient(90deg, #5a4e39 50%, transparent 50%, transparent);

Сетка
Своеобразный гибрид из вертикальных и горизонтальных линий. В примере применены цвета с прозрачностью, что при пересечении линий образует в сетке квадратики более тёмного цвета:

CSS
Код:
background-size: 50px 50px;
background-color: #ddd;
background-image: -webkit-linear-gradient(transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5)),
                  -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5));
background-image: -moz-linear-gradient(transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5)),
                  -moz-linear-gradient(0deg, transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5));
background-image: linear-gradient(transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5)),
                  linear-gradient(90deg, transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5));

Наклонные линии
Так же возможности CSS позволяют сделать линии с уклоном:

CSS
Код:
background-size: 50px 50px;
background-color: #740064;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);


Наклонённые линии на CSS
Без труда можем повернуть наклон линий в другую сторону и изменить цвет:

CSS
Код:
background-size: 50px 50px;
background-color: #0c6e12;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);

Шахматная клетка
А вот фон на CSS в виде шахматной клетки из чёрно-белых квадратов:

CSS
Код:
background-color: #eee;
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);


Клетка по диагонали
Можно клетку повернуть под углом:

CSS
Код:
background-color: #eee;
background-size: 60px 60px;
background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -moz-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black);

Мелкий градиент
Мутный мелкий градиент, но очень часто встречающийся на сайтах:

CSS
Код:
background: linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%), linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em, radial-gradient(at 50% 0, #484847, #090909);
background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%;

Фон - Звёздочки на CSS
Фон на CSS из звёздочек

CSS
Код:
background: -webkit-linear-gradient(126deg, #232927 4%,   transparent 4%) -70px 43px,
            -webkit-linear-gradient( 54deg, #232927 4%,   transparent 4%) 30px 43px,
            -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
            -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
            -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
            -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
            -webkit-linear-gradient(126deg, #232927 4%,   transparent 4%) -20px 93px,
            -webkit-linear-gradient( 54deg, #232927 4%,   transparent 4%) 80px 93px,
            -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
            -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
            -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
            -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: -moz-linear-gradient(126deg, #232927 4%,   transparent 4%) -70px 43px,
            -moz-linear-gradient( 54deg, #232927 4%,   transparent 4%) 30px 43px,
            -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
            -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
            -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
            -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
            -moz-linear-gradient(126deg, #232927 4%,   transparent 4%) -20px 93px,
            -moz-linear-gradient( 54deg, #232927 4%,   transparent 4%) 80px 93px,
            -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
            -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
            -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
            -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
            linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
            linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
            linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
            linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
            linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
            linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
            linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
            linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
            linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
            linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
            linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;

Лесенка

CSS
Код:
background-color: #FF7D9D;
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
                     0px 36px, 4px 2px, 29px 6px, 33px 30px;
background-image: -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px),
                  -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
                  -moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -moz-linear-gradient(295deg, #C90032 10px, transparent 10px),
                  -moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
                  -moz-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: linear-gradient(335deg, #C90032 23px, transparent 23px),
                  linear-gradient(155deg, #C90032 23px, transparent 23px),
                  linear-gradient(335deg, #C90032 23px, transparent 23px),
                  linear-gradient(155deg, #C90032 23px, transparent 23px),
                  linear-gradient(335deg, #C90032 10px, transparent 10px),
                  linear-gradient(155deg, #C90032 10px, transparent 10px),
                  linear-gradient(335deg, #C90032 10px, transparent 10px),
                  linear-gradient(155deg, #C90032 10px, transparent 10px);

Плетёнка
CSS паттерн со структурой похожей на плетёнку.

CSS
Код:
background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
            -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
            -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
            -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
            -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
            -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
            -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
            -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
            -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
            -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
            -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
            linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
            linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
            linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
            linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
            linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-size: 20px 20px;
background-color: #131313;

Линейный градиент

CSS
Код:
background-color: #026873;
background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
                  -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
                  -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
                  -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
                  -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
                  -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
                  -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
                  linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
                  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
                  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);


Я надеюсь что вам будет полезна данная сборка и вскоре сделаю подобную подборку CSS градиентов подходящих для сайтов детской, женской и строительной тематик.

Можешь почитать и вот эту статейку "Выводим блоки для определенных групп пользователей"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Популярное

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Ссылки

Обновленное

Архив

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4411 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 662
  • Онлайн всего: [2]
  • Гости: [1]
  • Поисковики: [1] Google
  • Были сегодня : [4] Google, dankeanke, Яндекс, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.328сек
  • Потребление памяти: 5.214 Mb 
  •   Яндекс.Метрика