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

Ещё несколько фонов на чистом CSS

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

И снова всем привет, вот нашел еще несколько вариантов фонов для сайта, блоков сайта на чистом CSS без изображений.
Просто добавляем стили в нужный класс в файле css или в нужный блок используем style
1.вариант


Код:
background:radial-gradient(circle at 0% 50%,
rgba(96, 16, 48, 0) 9px,#613 10px,
rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%,
rgba(96, 16, 48, 0) 9px, #613 10px,
rgba(96, 16, 48, 0) 11px), #8a3;
background-size: 20px 20px;

2.вариант

Код:
background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;
background-size: 25px 25px;

2.вариант

Код:
background-color: #c0c0c0;
background-image: linear-gradient(335deg, #864735 23px, transparent 23px),
linear-gradient(155deg, #864735 23px, transparent 23px),
linear-gradient(335deg, #864735 23px, transparent 23px),
linear-gradient(155deg, #864735 23px, transparent 23px);
background-size: 58px 58px;	
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

3.вариант

Код:
background-color: #FFFFEF;
background-image: 
linear-gradient(90deg, transparent 98px, #ED82AD 98px, #ED82AD 100px, transparent 100px),
linear-gradient(#eee 1px, transparent 0px),
linear-gradient(90deg, #eee 1px, transparent 0px);
background-size:100% 100%, 20px 20px, 20px 20px;
background-position: 0 0, -1px -1px, -1px 1px;

4.вариант

Код:
background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

5.вариант

Код:
background:linear-gradient(#bbb, transparent 1px),
linear-gradient(90deg,#bbb, transparent 1px);
background-size: 10px 10px;
background-position: center center;

6.вариант

Код:
background:
radial-gradient(#000 15%, transparent 16%) 0 0,
radial-gradient(#000 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

7.вариант

Код:
background-color: #f0f2f3;
background: -webkit-radial-gradient(rgba(0, 0, 0, .1)1px, transparent 1px);
background: radial-gradient(rgba(0, 0, 0, 0.15)1px, rgba(216, 217, 219, 0.28) 1px);
-webkit-background-size: 8px 8px;
background-size: 8px 8px;

8.вариант

Код:
background:
linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 75%, #000 75%, #000) 0 0,
linear-gradient(-45deg, #000 25%, transparent 25%, transparent 75%, #fff 75%, #fff) 1em 1em,
linear-gradient(45deg, #000 17%, transparent 17%, transparent 25%, #000 25%, #000 36%, transparent 36%, transparent 64%, #000 64%, #000 75%, transparent 75%, transparent 83%, #000 83%) 1em 1em;
background-color: #fff;
background-size: 2em 2em;

9.вариант

Код:
background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;

10.вариант

Код:
background-color:#def;
background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
background-size:80px 80px;
background-position:0 0, 40px 40px;

11.вариант

Код:
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;

12.вариант

Код:
background:
linear-gradient(45deg, #343434 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #343434 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #343434 23px, transparent 23px, transparent 68px,#343434 68px,#343434 113px,transparent 113px,transparent 158px,#343434 158px);
background-color:#e1ebbd;
background-size: 128px 128px;

13.вариант

Код:
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image:
-ms-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-ms-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image:
-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image:
linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-color: #900;
background-position: 0 0, 0 0, 80px 50px, 80px 50px;
-moz-background-size: 160px 50px, 160px 50px,160px 50px, 160px 50px;
background-size: 160px 50px, 160px 50px,160px 50px, 160px 50px;

14.вариант

Код:
background: linear-gradient(90deg, #fff 1%,transparent 3%,transparent 80%,#fff 82%),
linear-gradient(0deg , #fff 1%,transparent 3%,transparent 80%,#fff 82%);
background-color: #118EC7;
background-size: 50px 50px;

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

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

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

Популярное

Опрос

Ваше мнение

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

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

Ссылки

Обновленное

Архив

Теги

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

Статистика

  • Caйту: 4612 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [21]
  • Гости: [21]
  • Были сегодня : [3] Google, Яндекс, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.361сек
  • Потребление памяти: 5.559 Mb 
  •   Яндекс.Метрика