Extensão de Glassmorphism de Elementor Livre: Efeito de vidro fosco em uma alternância
Glassmorphism é o visual de vidro fosco: um painel semitransparente que desfoca tudo o que fica atrás dele A extensão gratuita do Glassmorphism em Master Addons o adiciona à guia Avançado de qualquer widget, coluna, seção ou contêiner do Elementor. Ligue-o, defina o desfoque e uma cor de fundo transparente, contorne os cantos e o elemento se tornará um cartão de vidro. Ele combina com sobreposições de heróis, cartões de preços, depoimentos e cabeçalhos adesivos.
Controles de desfoque e tonalidade de vidro
O valor do desfoque vai de 0 a 100 px e começa em 20 px. A cor de fundo define a tonalidade do vidro: escolha uma cor RGBA e diminua sua opacidade para que o conteúdo atrás ainda apareça. Border Radius circunda os cantos em px, % ou em, e Border Width adiciona uma borda branca fina e semitransparente de até 10 px.
- Valor de desfoque de 0 a 100px, 20px por padrão.
- Cor de fundo RGBA para a tonalidade Uma cor HEX ou RGB é convertida em 30% de opacidade para você.
- Border Radius por canto, mais uma borda de vidro de 0 a 10 px.
Corrigir estouro quando o desfoque não aparece
O desfoque vem da propriedade CSS background-filter, e overflow: hidden é a razão mais comum pela qual ele desaparece O switch Fix Overflow define o estouro do elemento para visível, para que você possa corrigi-lo sem abrir uma folha de estilo.
- Um interruptor no painel Glassmorphism, nenhum CSS personalizado.
- Use-o quando o efeito estiver ativado, mas nada parecer desfocado.
- Verifique também se o elemento fica sobre uma foto, gradiente ou outro fundo ocupado Sobre branco liso não há nada para desfocar.
Glassmorphism CSS vs a extensão Glassmorphism
Os Filtros CSS da Elementor desfocam o próprio elemento, texto incluído Um cartão de vidro precisa de um filtro de fundo em vez disso, o que desfoca apenas o que fica atrás do elemento, e a Elementor não tem controle para ele Escrito à mão, o CSS se parece com isto:
.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 manuscrito | Extensão Glassmorphism | |
|---|---|---|
| Onde você o definiu | Um campo CSS personalizado ou sua folha de estilo | Controles na guia Avançado |
| Prefixo Safari | Adicione você mesmo -webkit-backdrop-filter | Incluído |
| Cores HEX ou RGB | Mantenha-se sólido, a menos que adicione opacidade | Convertido para 30% de opacidade |
| Desfoque bloqueado por estouro: oculto | Encontre e substitua-o você mesmo | Corrigir interruptor de transbordamento |
| Trabalha em | Quaisquer que sejam os alvos do seu seletor | Widgets, colunas, seções e contêineres |
o Filtro de pano de fundo funciona no atual Chrome, Edge, Safari e Firefox Os navegadores mais antigos mostram o fundo semitransparente sem o desfoque O vidro fica melhor em relação ao movimento ou à cor, então experimente em cima Partículas ou um Fundo de gradiente animado (Pro).Para efeitos o painel não cobre, adicione suas próprias regras com Css personalizado.
Perguntas frequentes sobre o Glassmorphism
Por que meu efeito de desfoque não está aparecendo?
Ligue o Fix Overflow no painel Glassmorphism Ele define o estouro do elemento para visível para que o filtro de fundo possa funcionar Também certifique-se de que haja uma imagem ou um fundo colorido por trás do elemento.
Posso usar cores sólidas com efeito de vidro?
Sim. Uma cor HEX ou RGB é convertida em RGBA com 30% de opacidade, para que o vidro permaneça transparente. Para controle exato, escolha uma cor RGBA e defina você mesmo a opacidade.
Funciona com algum tema?
Sim. o efeito é definido em elementos Elementor, por isso funciona com qualquer tema que execute Elementor Os visitantes precisam de um navegador que suporte o filtro de fundo, que cobre as versões atuais do Chrome, Edge, Safari e Firefox.
A extensão Glassmorphism é gratuita?
Sim. Glassmorphism é uma das extensões gratuitas em Master Addons para Elementor. Ligue-o no painel Master Addons e ele aparecerá na guia Avançado de cada elemento.
Explore mais recursos para criar de maneira mais rápida e projetar de maneira mais inteligente
Por que parar em um efeito? a suíte Master Addons fornece tudo o mais que você precisa: widgets exclusivos, personalização mais profunda e ferramentas especializadas que funcionam perfeitamente juntas Transforme o Elementor em sua potência de design definitiva.
Contêiner Extras
Padrões
Duplicador de postagem/página
Barra de progresso de leitura
