Вопрос или проблема
gtk.css – Как добавить эффект размытого фона?
Как добавить эффект мутного стекла в темы? (CSS3 поддерживает гауссово размытие с помощью blur(1px); во многих браузерах)
Когда я уменьшаю прозрачность, я получаю такой результат:
Но я хочу эффект размытия, подобный этому:
В дополнение для понимания эффекта размытия:
Спасибо!
Я также недавно задавался этим вопросом, и, судя по всему, на данный момент gtkcss не поддерживает фильтры.
Метод, который я использовал, заключался в добавлении шейдерного эффекта к актору clutter (mutter) через glsl шейдер.
Мне удалось добиться хорошего эффекта размытия, пример, с которым я работал, – это расширение GNOME под названием blyr.
Мой файл glsl и код для моего проекта можно найти здесь, для справки.
И вы можете вызвать glsl в коде и применить его к актеру с помощью чего-то вроде
var shaderEffectVer = new Clutter.ShaderEffect(Clutter.ShaderType.FRAGMENT_SHADER);
var wallpaper_actor = new GtkClutter.Actor ();
shaderEffectVer.set_shader_source("shader.glsl"));
shaderEffectVer.set_uniform_value("dir", 1.0);
shaderEffectVer.set_uniform_value("width", g_width);
shaderEffectVer.set_uniform_value("height", g_height);
shaderEffectVer.set_uniform_value("radius", 10.0);
shaderEffectVer.set_uniform_value("brightness", 0.98);
wallpaper_actor.add_effect_with_name("blur",shaderEffectVer);
Надеюсь, это вам поможет.
Я знаю, что это довольно старая информация, но мне было бы правильно хотя бы коротко ответить.
Что касается желания использовать подмножество CSS для ‘background-filter’:
То, что могут делать браузеры, и то, что может делать операционная система, – это совершенно разные вещи. Некоторые ОС поддерживают нативные функции размытия, некоторые нет. CSS, предлагаемый вне веба, такой как pango и gtk, обычно будет подмножеством CSS. Это может меняться, поэтому это может быть уже не так.
В основном, если вы хотите размытие фона, вам понадобится композитор для этого, но, вероятно, потребуется его настроить. Я думаю, что Compton имеет такую возможность, но, как я уже сказал, это требует некоторых усилий и не является чем-то, что можно просто вставить в тему.
Также вы можете обратить внимание на Compiz/Fusion (они теперь одно), это довольно круто, и, если я правильно помню, там можно делать интересные вещи с размытиями и даже больше. Плюс, он был быстрее и меньше, чем KWin в прошлый раз, когда я его пробовал. Если вам нужна абсолютная эффективность, то, вероятно, стоит остаться с Compton.
Если вы просто хотите размытие терминала
Сейчас существует множество хакерских инструментов, которые это выполняют. Новые менеджеры имеют это встроенным, так что с этим все просто. Пользователи Windows могут подождать дольше. У пользователей Mac и Linux это уже есть.
Ответ или решение
Чтобы добавить эффект размытия фона в темах GTK, стоит отметить несколько важных моментов. На данный момент стандартные возможности CSS, используемые в GTK, не поддерживают некоторые свойства, такие как фильтры для размытия (например, backdrop-filter), которые доступны в веб-браузерах.
Давайте рассмотрим возможные методы достижения желаемого эффекта.
Использование GLSL-шадеров
Одним из способов создания эффекта размытия фона является использование OpenGL ES через GLSL-шадеры. Это можно сделать, добавив шадерный эффект к актеру Clutter. Для этого вам понадобится:
-
Создание GLSL шадера: напишите свой шейдерный код для эффекта размытия. Пример можно взять из GNOME расширения blyr.
- Применение шадера к актеру: после создания шейдера примените его в своем коде. Вот пример того, как это можно сделать:
var shaderEffectVer = new Clutter.ShaderEffect(Clutter.ShaderType.FRAGMENT_SHADER);
var wallpaper_actor = new GtkClutter.Actor();
shaderEffectVer.set_shader_source("shader.glsl");
shaderEffectVer.set_uniform_value("dir", 1.0);
shaderEffectVer.set_uniform_value("width", g_width);
shaderEffectVer.set_uniform_value("height", g_height);
shaderEffectVer.set_uniform_value("radius", 10.0);
shaderEffectVer.set_uniform_value("brightness", 0.98);
wallpaper_actor.add_effect_with_name("blur", shaderEffectVer);Использование композиторов
Если вы хотите достичь эффекта размытия фона без написания шейдеров, вам потребуется использовать композитор, который поддерживает размытие.
-
Compiz или Compton: Эти композиторы позволяют настраивать эффекты размытия. Напоминаем, что это может потребовать дополнительных настроек.
- GNOME Shell: Современные менеджеры окон, такие как GNOME Shell, имеют встроенные функции для создания эффекта размытия, однако настройки могут быть ограничены.
Если ваша цель состоит в том, чтобы добавить размытие в терминале или в приложении GTK, ознакомьтесь с доступными инструментами для вашего дистрибутива Linux, которые могут предлагать эти функции.
Ограничения GTK и CSS
К сожалению, на данный момент, насколько мне известно, GTK и CSS не поддерживают фильтры, как это делает CSS в вебе. Поэтому вам придется полагаться на дополнительные инструменты и библиотеки для достижения желаемого результата. Методы, описанные выше, предоставляют некоторые способы, но они зависят от требований вашего проекта и настроек системы.
В заключение, добавление эффекта размытия в темы GTK может быть непростой задачей, и лучшее решение зависит от вашей конкретной среды рабочего стола и доступных инструментов. Если вы хотите полностью использовать возможности вашей ОС и предоставляемые шейдеры, помните о необходимости в дополнительном программировании и настройках.