Parece que a sobreposição da Apple é mais do que apenas uma transparência. Alguma idéia de como obter esse efeito com CSS e possivelmente com JS?
javascript
css
user-interface
blur
Grumoso
fonte
fonte
Respostas:
É possível com CSS3:
Exemplo aqui => jsfiddle
fonte
-moz-filter: blur()
. Em vez disso, você precisa usar um filtro SVG, consulte minha resposta para obter detalhes.Você me fez querer tentar, então tentei, veja o exemplo aqui:
http://codepen.io/Edo_B/pen/cLbrt
Usando:
é isso aí.
Eu também acredito que isso poderia ser feito dinamicamente para qualquer tela se estiver usando a tela para copiar o domínio atual e desfocá-lo.
fonte
[Editar] No futuro (móvel) Safari 9, haverá
-webkit-backdrop-filter
exatamente isso. Veja esta caneta que fiz para mostrá-la.Pensei nisso nas últimas 4 semanas e criei esta solução.
Demonstração ao vivo
[Editar] Eu escrevi um post mais aprofundado sobre CSS-Tricks
Essa técnica está usando regiões CSS, portanto, o suporte ao navegador não é o melhor no momento. ( http://caniuse.com/#feat=css-regions )
A parte principal desta técnica é separar o conteúdo do layout usando a região CSS. Primeiro defina um
.content
elemento comflow-into:content
e, em seguida, use a estrutura apropriada para desfocar o cabeçalho.A estrutura do layout:
As duas partes importantes desse layout são
.header__background
e.phone__content
- esses são os contêineres para os quais o conteúdo deve fluir.Usando regiões CSS, é simples como
flow-from:content
(.content
está fluindo para a região nomeadacontent
)Agora vem a parte complicada. Queremos sempre transmitir o conteúdo através do
.header__background
arquivo porque essa é a seção em que o conteúdo será manchado. (usandowebkit-filter:blur(10px);
)Isto é feito através
transfrom:translateY(-$HeightOfTheHeader)
do.content
para garantir que o conteúdo vai fluir sempre que o.header__background
. Essa transformação sempre oculta algum conteúdo abaixo do cabeçalho. Corrigir isso é fácil adicionarpara acomodar a transformação.
Atualmente, ele está trabalhando em:
fonte
Agora isso é possível com o FireFox, graças ao atributo de estilo do elemento .
Esse atributo experimental permite usar qualquer conteúdo HTML como imagem de plano de fundo. Portanto, para criar o plano de fundo, você precisa de três sobreposições:
-moz-element
plano de fundo que define o conteúdo. Observe que o FX não suporta ofilter: blur()
atributo, portanto, precisamos de um SVG.Então, junte:
Filtro de desfoque SVG (funciona em FX, outros navegadores poderiam usar
filter:blur()
):Estilo de desfoque CSS:
Finalmente 3 camadas:
Então, para mudar isso, basta definir o
background-position
(exemplo em jQuery, mas você pode usar qualquer coisa):Aqui está como JS Fiddle, apenas FX.
fonte
Confira esta página de demonstração.
Esta demonstração usa html2canvas para renderizar documentos como uma imagem.
http://blurpopup.labs.daum.net/
fonte
Essa caneta que encontrei no outro dia parecia fazer muito bem, apenas um pouco de css e 21 linhas de javascript. Eu não tinha ouvido falar do comando cloneNode js até encontrar isso, mas funcionou totalmente para o que eu precisava, com certeza.
http://codepen.io/rikschennink/pen/zvcgx
Detalhe: A. Basicamente, ele analisa a sua div de conteúdo e chama um cloneNode para criar uma duplicata que, em seguida, coloca dentro do estouro: objeto de cabeçalho oculto localizado na parte superior da página. B. Em seguida, ele simplesmente escuta a rolagem para que ambas as imagens pareçam coincidir e desfoque a imagem do cabeçalho ... e anexe o BAM. Efeito alcançado.
Não é realmente totalmente capaz de executar CSS, até que eles tenham o mínimo de capacidade de script embutido na linguagem.
fonte
O exemplo está aqui:
http://versie1.com/TEST/ios7/
fonte
ontem fiz uma demonstração rápida que realmente faz o que você está falando. http://bit.ly/10clOM9 esta demo faz o paralaxe com base no acelerômetro, para que funcione melhor no próprio iPhone. Basicamente, apenas copio o conteúdo que estamos sobrepondo em um elemento de posição fixa que fica desfocado.
nota: deslize para cima para ver o painel.
(Eu usei ids css horríveis, mas você entendeu)
fonte
Não tenho muita certeza disso, acredito que o CSS não é capaz de fazer isso no momento
No entanto, Chris Coyier publicou um blog sobre uma técnica antiga com várias imagens para obter esse efeito, http://css-tricks.com/blurry-background-effect/
fonte
Verifique este http://codepen.io/GianlucaGuarini/pen/Hzrhf Parece que faz o efeito sem duplicar a imagem de plano de fundo do elemento em si. Veja os textos estão borrando também no exemplo.
Vague.js
fonte
Boas notícias
A partir de hoje, 11 de abril de 2020 , isso é facilmente possível com a
backdrop-filter
propriedade CSS, que agora é um recurso estável no Chrome, Safari & Edge.Eu queria isso em nosso aplicativo móvel híbrido, também disponível no Android / Chrome Webview e Safari WebView.
Exemplo de código:
Basta adicionar a propriedade CSS:
Exemplo 1 da interface do usuário
Veja-o trabalhando nesta caneta ou tente a demonstração:
Exemplo 2 da interface do usuário
Vamos dar um exemplo do aplicativo McDonald's, porque é bastante colorido. Tirei a captura de tela e a adicionei como pano de fundo no
body
aplicativo.Eu queria mostrar um texto em cima dele com o efeito brilhante. Usando
backdrop-filter: blur(20px);
a sobreposição acima, pude ver isso: 😍fonte
backdrop-filter
ainda não funciona automaticamente no Firefox. Duvido que os usuários ativem as opções para ativarbackdrop-filter
deliberadamente apenas para ver esse efeito.Eu tenho usado filtros svg para obter efeitos semelhantes para sprites
<feGaussianBlur stdDeviation="10"/>
exemplo de Keith .<image ...>
tag para aplicá-la a qualquer imagem ou até mesmo usar várias imagens.fonte
Isso pode ajudá-lo!
Isso muda dinamicamente o plano de fundo, apenas o IOS
fonte
Aqui está minha opinião sobre isso com o jQuery. A solução não é universal, o que significa que seria necessário ajustar algumas posições e outras coisas, dependendo do design real.
Basicamente, o que eu fiz foi: ao disparar clone / remova todo o plano de fundo (o que deveria estar desfocado) para um contêiner sem conteúdo desfocado (que, opcionalmente, oculta o estouro se não tiver largura total) e posicione-o corretamente. Advertência é que, no redimensionamento da janela, a divisão borrada não corresponderá ao original em termos de posição, mas isso pode ser resolvido com algumas funções de redimensionamento na janela (sinceramente, não posso me preocupar com isso agora).
Eu realmente aprecio sua opinião sobre esta solução!
obrigado
Aqui está o violino , não testado no IE.
HTML
CSS
jQuery
fonte