870
- 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;
Можешь почитать и вот эту статейку "Jquery плагин галереи PrettyPhoto"
Это тоже интересно
- 18.04.193D карусель на bootstrap
- 29.05.21Многие помнят теле заставку
- 21.05.20Переехал на UTF-8
- 26.05.21Фоны для сайта на чистом CSS
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.