Расширение свободного элементорного стекломорфизма: эффект матового стекла за один переключение
Стекломорфизм - это матовый стеклянный вид: полупрозрачная панель, которая размывает все, что находится за ней. бесплатное расширение Glassmorphism в Master Addons добавляет его на вкладку Advanced любого виджета, столбца, раздела или контейнера Elementor. включите его, установите размытие и прозрачный цвет фона, округляйте углы, и элемент станет стеклянной картой. Он подходит для наложений героев, ценовых карт, отзывов и липких заголовков.
Контроль размытия и оттенка стекла
Значение размытия работает от 0 до 100px и начинается с 20px. цвет фона задает оттенок стекла: выберите цвет RGBA и уменьшите его непрозрачность, чтобы содержимое позади все еще отображалось через. радиус границы огибает углы в px, % или em, а Ширина границы добавляет тонкий, полупрозрачный белый край до 10px.
- Значение размытия от 0 до 100px, 20px по умолчанию.
- Цвет фона RGBA для оттенка. цвет HEX или RGB преобразуется для вас в непрозрачность 30%.
- Радиус границы на угол плюс край стекла от 0 до 10 точек.
Исправьте переполнение, когда размытие не отображается
Размытие происходит из свойства фонового фильтра CSS, а переполнение: скрытое - самая распространенная причина его пропажи, переключатель Fix Overflow устанавливает переполнение элемента видимым, поэтому его можно исправить, не открывая таблицу стилей.
- Один переключатель на панели Glassmorphism, нет пользовательского CSS.
- Используйте его, когда эффект включен, но ничто не выглядит размытым.
- Также проверьте, что элемент сидит над фотографией, градиентом или другим занятым фоном. поверх простого белого нечего размывать.
Стекломорфизм CSS против расширения Glassmorphism
CSS-фильтры Elementor размывают сам элемент, включая текст. Вместо этого стеклянной карте нужен фоновый фильтр, который размывает только то, что находится за элементом, и Elementor не имеет над этим контроля. Написано от руки, CSS выглядит следующим образом:
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| Рукописный CSS | Расширение стекломорфизма | |
|---|---|---|
| Где ты его поставил | Специальное поле CSS или таблица стилей | Элементы управления на вкладке Дополнительно |
| Префикс Сафари | Добавьте -webkit-fackdrop-filter самостоятельно | Включено |
| Цвета HEX или RGB | Оставайтесь твердыми, если не добавите непрозрачности | Преобразовано в 30% непрозрачность |
| Размытие заблокировано переполнением: скрыто | Найдите и переопределите это сами | Исправить переключатель переполнения |
| Работает на | На что бы ни нацелился ваш селектор | Виджеты, столбцы, разделы и контейнеры |
фоновый фильтр работает в текущих Chrome, Edge, Safari и Firefox. старые браузеры показывают полупрозрачный фон без размытия. Стекло лучше всего смотрится поверх движения или цвета, поэтому попробуйте его поверх Частицы или ан Анимированный градиентный фон (Про).Для эффектов, которые панель не покрывает, добавьте свои собственные правила Пользовательские CSS.
Часто задаваемые вопросы по поводу стекломорфизма
Почему не проявляется мой эффект размытия?
Включите Исправить Переполнение в панели Glassmorphism Он устанавливает переполнение элемента видимым, чтобы фон-фильтр мог работать. также убедитесь, что за элементом есть изображение или красочный фон.
Могу ли я использовать однотонные цвета с эффектом стекла?
Да. цвет HEX или RGB преобразуется в RGBA при непрозрачности 30%, поэтому стекло остается прозрачным. Для точного контроля выберите цвет RGBA и установите непрозрачность самостоятельно.
Работает ли он с какой-либо темой?
Да. эффект установлен на элементах Elementor, поэтому он работает с любой темой, которая запускает Elementor. Посетителям нужен браузер, поддерживающий фоновый фильтр, который охватывает текущие версии Chrome, Edge, Safari и Firefox.
Расширение Glassmorphism бесплатное?
Да. Glassmorphism - одно из бесплатных расширений в Master Addons for Elementor.Включите его на панели управления Master Addons, и он появится на вкладке Advanced каждого элемента.
Изучите больше функций, которые помогут быстрее и разумнее проектировать
Зачем останавливаться на одном эффекте? пакет Master Addons предоставляет все остальное, что вам нужно: уникальные виджеты, более глубокая настройка и специализированные инструменты, которые работают без проблем вместе. Превратите Elementor в свой идеальный дизайнерский центр.
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
Прогресс-бар чтения
