Перелив цвета в бэкграунде сайта

Автор Тема: Перелив цвета в бэкграунде сайта  (Прочитано 3663 раз)

Оффлайн DogicaАвтор темы

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 441
  • Сообщений: 1314
  • Карма: 36
  • Пол: Мужской
  • www.dogica.com
  • Награды SEO-специалист
    • Просмотр профиля
    • DOGICA

Оффлайн DogicaАвтор темы

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 441
    • Сообщений: 1314
    • Карма: 36
    • Пол: Мужской
    • www.dogica.com
    • Награды SEO-специалист
      • Просмотр профиля
      • DOGICA
1
Очень хочется узнать как создан плавно изменяющий цвета бэкграунд
без картинок на заднем плане - просто сама смена цвета
Знания не позволяют - можете пожалуйста взглянуть в источник?

https://clipchamp.com/transcode

Спасибо заранее за ваше время !  :)
« Последнее редактирование: 15-04-2016, 20:56:52 от Dogica »
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)


Оффлайн ProtectYourSite

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 253
  • Сообщений: 619
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

  • Ветеран
  • *****
Re: Перелив цвета в бэкграунде сайта
« Ответ #1 : 16-04-2016, 09:37:35 »
Насколько понимаю, это может помочь:
http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient

Оффлайн DogicaАвтор темы

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 441
  • Сообщений: 1314
  • Карма: 36
  • Пол: Мужской
  • www.dogica.com
  • Награды SEO-специалист
    • Просмотр профиля
    • DOGICA

Оффлайн DogicaАвтор темы

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 441
    • Сообщений: 1314
    • Карма: 36
    • Пол: Мужской
    • www.dogica.com
    • Награды SEO-специалист
      • Просмотр профиля
      • DOGICA
Re: Перелив цвета в бэкграунде сайта
« Ответ #2 : 16-04-2016, 13:35:14 »
спасибо!
но там все в статике.. нужна функция которая создает перелив цвета, а не просто его выдачу на экран
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)

Оффлайн Старый

  • Бизнес оценка: (9, 100%)
  • Мастер
  • *****
  • СПАСИБО: 1703
  • Сообщений: 5529
  • Карма: 159
  • Ищу работу постоянную, удалённую с окладом.
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Старый

  • Мастер
  • *****
  • Доп. информация
    • Бизнес оценка: (9, 100%)
    • СПАСИБО: 1703
    • Сообщений: 5529
    • Карма: 159
    • Ищу работу постоянную, удалённую с окладом.
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
Re: Перелив цвета в бэкграунде сайта
« Ответ #3 : 16-04-2016, 14:02:55 »
В своё время, у Лебедева стащил.  ::)
Нужно было для сайта.

(нажмите чтобы показать/скрыть)

Потом подкорректировал цвета и скорость.  ;)

Оффлайн ProtectYourSite

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 253
  • Сообщений: 619
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

  • Ветеран
  • *****
Re: Перелив цвета в бэкграунде сайта
« Ответ #4 : 16-04-2016, 14:03:04 »
Добавить
http://xiper.net/manuals/css/keyframes на свое усмотрение и будет динамика, или брать JS


Оффлайн DogicaАвтор темы

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 441
  • Сообщений: 1314
  • Карма: 36
  • Пол: Мужской
  • www.dogica.com
  • Награды SEO-специалист
    • Просмотр профиля
    • DOGICA

Оффлайн DogicaАвтор темы

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 441
    • Сообщений: 1314
    • Карма: 36
    • Пол: Мужской
    • www.dogica.com
    • Награды SEO-специалист
      • Просмотр профиля
      • DOGICA
Re: Перелив цвета в бэкграунде сайта
« Ответ #5 : 16-04-2016, 19:26:26 »
надо как во время создания нового профиля на виндоус 8 - знаете?
там где он пишет "Installing apps... Getting the things done" и на заднем фоне меняются цвета сами без нажатий - идет плавный переход палитры
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)

Оффлайн ProtectYourSite

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 253
  • Сообщений: 619
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

  • Ветеран
  • *****
Re: Перелив цвета в бэкграунде сайта
« Ответ #6 : 16-04-2016, 20:24:37 »
Ну так тут без нажатия, в виде анимации, прописываешь время смены цветов и сами цвета,можно даже несколько функций запускать...
или модифицировать типо такого, готовых решений наврядли будет
http://www.03www.ru/1000e/2012-2-03.html
« Последнее редактирование: 16-04-2016, 20:31:22 от ProtectYourSite »

Онлайн Fullf

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 58
  • Сообщений: 132
  • Карма: 4
  • Пол: Мужской
    • Просмотр профиля

Онлайн Fullf

  • Постоялец
  • ***
Re: Перелив цвета в бэкграунде сайта
« Ответ #7 : 19-04-2016, 19:33:43 »
Первый сервис из списка http://wordsmall.ru/servisyi/generatory-css-gradientov.html генератор анимированого background
WordPress статьи - http://wordsmall.ru/

Оффлайн DogicaАвтор темы

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 441
  • Сообщений: 1314
  • Карма: 36
  • Пол: Мужской
  • www.dogica.com
  • Награды SEO-специалист
    • Просмотр профиля
    • DOGICA

Оффлайн DogicaАвтор темы

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 441
    • Сообщений: 1314
    • Карма: 36
    • Пол: Мужской
    • www.dogica.com
    • Награды SEO-специалист
      • Просмотр профиля
      • DOGICA
Re: Перелив цвета в бэкграунде сайта
« Ответ #8 : 19-04-2016, 21:27:29 »
спасибо!
хороший генератор и способ безотказный.. но вот нашел такой CSS ход
он делает то что нужно

http://css.yoksel.ru/animation-for-gradients/


Добавлено: 19-04-2016, 22:38:09

Воплотить в жизнь оказалось 2 строчки.. может быть кому то пригодится
вот бесконечный переход с белого бэкграунда на слабый фиолетовый и обратно
можно поменять и добавить все цвета радуги

body {background: #B89AFE;animation: background 30s infinite alternate;}
@keyframes background {50% {background: white;}}


Добавлено: 19-04-2016, 22:38:28

пример на сайте в подписе
« Последнее редактирование: 19-04-2016, 22:38:28 от Dogica »
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

  • Ветеран
  • *****
Re: Перелив цвета в бэкграунде сайта
« Ответ #9 : 24-04-2016, 22:26:16 »

Воплотить в жизнь оказалось 2 строчки.. может быть кому то пригодится

body {background: #B89AFE;animation: background 30s infinite alternate;}
@keyframes background {50% {background: white;}}


Две строчки если использовать для самых новых браузеров, и точно знать цвет. Для более старых браузеров есть еще префиксы.
Поддержку браузерами можно посмотреть на W3C.
Проще и быстрее воспользоваться готовым инструментом, так как можно менять направление, скорость анимации, количество цветов.

Например здесь: генератор css - анимация градиента


 

Похожие темы

  Тема / Автор Ответов Последний ответ
16 Ответов
4771 Просмотров
Последний ответ 16-11-2010, 18:49:38
от boriskin
24 Ответов
5940 Просмотров
Последний ответ 07-03-2011, 22:51:03
от [Константин]
7 Ответов
2353 Просмотров
Последний ответ 22-08-2012, 20:27:12
от Ragnos
9 Ответов
3193 Просмотров
Последний ответ 12-03-2013, 22:26:25
от remind4me
12 Ответов
3635 Просмотров
Последний ответ 02-11-2013, 18:53:13
от Lena-Miha