Содержание
Please complete the security check to access codepen.io
Why do I have to complete a CAPTCHA?
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 5576aece1a4ed70d • Your IP : 91.146.8.87 • Performance & security by Cloudflare
Please complete the security check to access codepen.io
Why do I have to complete a CAPTCHA?
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 5576aecf08269808 • Your IP : 91.146.8.87 • Performance & security by Cloudflare
Анимируем CSS-градиенты
Как известно, градиенты не любят анимироваться.
Если быть точным, положение и размер градиента анимируются успешно (как и любого другого фона):
Но попытка манипулировать цветами, составляющим градиент, терпит крах:
В FF цвета в примере не будут меняться вообще, в Хроме — будут, но резко, без плавного перехода.
UPD: В Webkit с помощью Sass можно сделать имитацию плавной смены цветов, но код получается неприличных размеров. Пример: codepen.io/yoksel/pen/gBDFj. На момент правки демо не работает в Firefox (27.0.1), анимация просто игнорируется.
В некоторых случаях при необходимости сделать градиент с плавной сменой цветов можно использовать box-shadow , который прекрасно анимируется. Тест:
Фоновый цвет в данном случае является частью градиента.
Тень задается с параметром inset (внутреняя тень), с большим радиусом размытия (в примере 100px ), чтобы сымитировать градиент, и с большими отрицательными отступами ( -120px ) — чтобы от обычной внутренней тени была видна только нижняя часть. Почитать подробнее про тени можно тут.
Сложные градиенты делаются несколькими тенями:
Код конечно получается большим и неудобным, но он вполне решает задачу.
Способ придумался когда мне захотелось сделать демо CSS-анимации, в котором надо было менять цвет неба в зависимости от времени суток:
Тени отлично справились. Я думаю, что способ может быть полезен в некоторых случах и вполне имеет право на сущестование.