ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Фон сайта с эффектом градиент CSS

Фон сайта с эффектом градиент CSS

Фон сайта с эффектом градиент CSS
Кто то меняет фон сайта на изображение, здесь все будет иначе. А точнее с периодичностью меняется фон на оттенки градиента, что идет в нескольких оттенках. Здесь нет не какого скрипта, а одни стили, которые вы можете поставить в CSS или в низ сайта, но нужно их заключить в style, только тогда работать будет. Все просто, здесь представлен стиль для низ сайта, убираем в начале и конце style и тогда только в CSS можно прописывать.

Для полного понимание, вам предоставлена демонстрация,как ваш фон будет изначально смотреться и меняться. Что по градиенту, то цветовая гамма так на стилях красиво сделано, и не идет одним оттенком.



Источник: delaisait.ucoz.ru
17 Мая 2016 Просмотров: 3362 Комментариев: (2)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 2
FeStemBer
FeStemBer 17 Мая 2016 12:441
0
Но можно без всякого градиента сделать цвет. Просто его менять по прозрачности и поставить тот который вам нужен. С того как полагаю эти стили, но уже с полным оттенком. Установка точно такая как и на этом, все можно в CSS, но они большие и могут не влазит, тогда заключаем их в /style и в низ сайта или вверх. все равно они на всех страницах есть и значит будет этот эффект на всем сайте.

Код
<style>
body {
animation-name: colorbackground;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 60s;
animation-direction: alternate;
-moz-animation-name: colorbackground;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 60s;
-moz-animation-direction: alternate;
-webkit-animation-name: colorbackground;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 60s;
-webkit-animation-direction: alternate;
-o-animation-name: colorbackground;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-duration: 60s;
-o-animation-direction: alternate;
-ms-animation-name: colorbackground;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-duration: 60s;
-ms-animation-direction: alternate;
}
@-moz-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@-webkit-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@-o-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@-ms-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
</style>
feliksteg
feliksteg 18 Мая 2016 06:052
0
Но если на стилях, это хорошо, не так грузить будет, а точнее почти не заметно, а что градинндом еще сделали, так еще лучше. Здесь самому можно думаю как то под свой дизайн подобрать.
Войдите:
avatar