Хаки и Скрипты Next Generation CMS : CSS : Фоны для сайта на чистом CSS

irbees2008 Опубликовано - 26 - мая CSS

Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет, ну понадобился мне фон для сайта , ну и решил поискать интересный фон на 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 градиентов подходящих для сайтов детской, женской и строительной тематик.

Можешь почитать и вот эту статейку "Стильные CSS3 hover эффекты"

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

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