Приложение для рабочего стола HTML - Как: Размытый фон?

Я хотел бы снова начать работу с HTML Desktop Apps for Windows. Я еще не решил, на какой платформе я его буду строить, поэтому я довольно гибко отношусь к этому. Теперь ... есть одно требование, которое у меня есть: в двух из приложений, которые я хочу создать, я хочу иметь прозрачный фон, который не только прозрачен, но и размывает то, что находится под ним - похоже на эффект, который у вас есть над OSX Yosemite и последние IOSПриложение для рабочего стола HTML - Как: Размытый фон?

Здесь вы можете увидеть картину о том, что я примерно хочу достичь: https://d13yacurqjgara.cloudfront.net/users/107587/screenshots/1598097/vk_os_x_player_dribbble.png

Теперь же anyoneone знает, как добиться того, что в .. скажем .. AppJS или Chrome Упакованные приложения или TideSDK или веб-сайт узла?

Редактировать - Когда я пытаюсь сделать предлагаемый материал с помощью программы AppJS, я просто получаю черный фон. Не прозрачный. Я думаю, что я также знаю, как этого добиться, в браузере. Но не в приложении, которое должно работать на рабочем столе .

источник

2015-01-06 Escapado

Похож на градиент для меня. Но вы можете делать размытия, используя фильтры css. – xdhmoore

Этот вопрос был задан до: http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css – Chris

Хорошо уточнить: Я специально не спрашиваю, как добиться эффект в целом, но как его достичь на упакованном приложении. Например, если я попытаюсь сделать это с AppJS App, он просто не будет работать для окна приложения. Он не будет размывать мой оконный фон, он даже не станет прозрачным. В TideSDK это в основном та же проблема. Я не могу заставить его смазать приложения или рабочий стол за ним. – Escapado

#myDiv { 
-webkit-filter: blur(20px); 
-moz-filter: blur(20px); 
-o-filter: blur(20px); 
-ms-filter: blur(20px); 
filter: blur(20px); 
opacity: 0.4; 
}

источник

2015-01-06 16:52:31 Chris

Не могли бы вы добавить дополнительную информацию, может быть, еще более конкретный html, который будет сочетаться с этим CSS, который достигнет желаемого эффекта? –

Хотя это отлично работает, если этот div помещен поверх .. say .. и изображения, он не будет работать на фоне упакованного приложения, созданного с помощью AppJS или TideSDK. В этом случае фон просто черный или белый, и он не размывает что-либо позади него, а за ним я имею в виду мой рабочий стол Windows или какое-либо окно, которое я ставлю за ним. – Escapado

Если вы используете сплошной фон - вы не сможете увидеть размытие в действии. Возможно, вы можете добавить оттенок к цвету, чтобы окно все еще было видимым? – Chris

Windows имеет собственный метод, который принимает ручку окна и позволяет достичь размытия, которое вы ищете. См. this example о том, как использовать метод в C/C++. Если вы хотите, чтобы это можно было вызвать из кода узла-webkit, вам, скорее всего, понадобится использовать node-ffi, чтобы выполнить эту работу.

Даже с обоими этими вещами я никогда лично не пытался получить доступ к дескриптору окна для окна, созданного node-webkit, поэтому я даже не знаю, насколько это просто/сложно/возможно, на самом деле, но я надеюсь что это, по крайней мере, заставит вас начать.

источник

2015-01-17 06:16:29

Спасибо за трюк, но в комментарии к статье говорится, что он не будет работать с Windows 8. Поэтому я думаю, это не жизнеспособный для меня. На стороне: может ли этот эффект быть создан каким-то образом, считывая буфер кадра, затем размывая изображение, устанавливая нужный регион в качестве фона и обновляя это 60 раз в секунду или это будет проблемой производительности? – Escapado

Я никогда раньше не пытался создать эффект размытия таким образом, поэтому я действительно не могу сказать, будет ли это проблемой производительности или если он даже достигнет желаемого эффекта. –

Приложение для рабочего стола HTML - Как: Размытый фон?

ответ

Смежные вопросы