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

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

irbees2008 irbees2008 Опубликовано - 26 - мая CSS
217 - 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 градиентов подходящих для сайтов детской, женской и строительной тематик.

Можешь почитать и вот эту статейку "Теги menu "

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 3458 дней
  • Новостей: 553
  • Комменты: 254
  • Зарегистрированно : 583
  • Онлайн всего: [5]
  • Гости: [5]
  • SQL запросов: 29
  • Генерация страницы: 0.641сек
  • Потребление памяти: 5.192 Mb 
  •   яндекс.ћетрика