Como desfocar o fundo atrás de uma classe?

5 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly 14.05.16 1:21

Detalhes da questão


Endereço do fórum: http://forumvenda.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá meus amigos. Eu gostaria de saber como eu faço para desfocar o fundo atrás de um elemento.

Exemplos:
-search_menu sem desfoque de fundo
-search_menu com desfoque de fundo(montagem feita com Gimp)


Última edição por Star Butterfly em 19.05.16 0:15, editado 1 vez(es)
Star Butterfly

Star Butterfly
**

Membro desde : 24/10/2015
Mensagens : 70
Pontos : 121

http://forumvenda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por APOllO 16.05.16 4:34

Boa Noite! da uma olhadinha neste site é veja se entenda: http://tableless.com.br/css-filters-aplicando-filtros-em-imagens-com-css/

Até Mais! Thumbleft
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly 16.05.16 5:15

Eu já conheço esses recursos, só não entendi como os uso para desfocar os elementos abaixo sem desfocar o próprio elemento.
Star Butterfly

Star Butterfly
**

Membro desde : 24/10/2015
Mensagens : 70
Pontos : 121

http://forumvenda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por APOllO 17.05.16 4:43

Entendo, tentei fazer alguns testes mais falhos, meus conhecimentos em css são bem básicos. Aguarde um outro usuario auxilialo com sua dúvida.

Até mais! Feliz
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Shek 18.05.16 4:54

Olá!

Eu não sei como eles ensinariam, mas, quando eu quero fazer algo do gênero citado na sua imagem, eu preciso criar duas DIVs. No seu caso, pelo que percebi na imagem, já as tem.

A primeira DIV será uma DIV nula. Ou seja, ela conterá apenas o fundo preto. Exemplo:
Código:
<div id="ColorShek_black"></div>
CSS:
Código:
#ColorShek_black {
background-color: #000;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
opacity; 0.5px;
z-index: 1;
-webkit-filter: contrast(5);
filter: contrast(5);
}

Já com a DIV que contém o seu conteúdo, você só precisa colocar então:
Código:
.elemento {
z-index: 2 !important;
}
No lugar do elemento, você colocaria o nome da sua DIV. Se ela for Class, então, tem que atribuir um ponto antes do nome da div. Se for um ID, deve se colocar um jogo da velha # antes da div.

Como estes efeitos de desfoque são usados em CSS3, é complicado de funcionarem, perfeitamente para todo navegador. Eu aconselho então, usar o opacity nestes casos.

Como citei no código de exemplo acima, é só trocar o valor 0.5 do opacity, que a tela de fundo ficará mais clara ao ponto desejável.

Atenciosamente,
Shek King
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly 18.05.16 10:54

Eu não estou conseguindo encontrar nos templates onde fica o id search_menu
Star Butterfly

Star Butterfly
**

Membro desde : 24/10/2015
Mensagens : 70
Pontos : 121

http://forumvenda.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Shek 18.05.16 12:58

Mas... Ela é correspondente a quê, exatamente?
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly 18.05.16 13:16

Ao menu de pesquisa, que está nos links do primeiro post.
Star Butterfly

Star Butterfly
**

Membro desde : 24/10/2015
Mensagens : 70
Pontos : 121

http://forumvenda.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Cepheus 18.05.16 16:57

A maneira que encontrei para fazer isso foi através de JS:
Código:
$(document).ready(function() {
    /**
     * Title: Desfocamento
     * Créditos: Cepheus  
     */
    var blur = '5';
    var cpBusca = jQuery('.conteneur_container_IE');
    jQuery('.overview.row3#search_menu').detach().prependTo(cpBusca);
    $('body').append(
        '<style>' +
        '#search_menu[style$="px;"] + #wrap {' +
        'background-color: rgba(255, 255, 255, 0.41);' +
        '-webkit-filter: blur(' + blur + 'px);' +
        '-moz-filter: blur(' + blur + 'px);' +
        '-o-filter: blur(' + blur + 'px);' +
        '-ms-filter: blur(' + blur + 'px);' +
        'filter: blur(' + blur + 'px); ' +
        '}' +
        '</style>'
    );
});


Repare em: var blur = '5';
O numero 5, quanto maior mais desfocado ficará, ajuste ao desfocamento que achar mais adequado,
por padrão deixei 5.


Última edição por Cepheus em 18.05.16 17:02, editado 1 vez(es)
Cepheus

Cepheus
Membro

Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085

http://www.bestskins.net/

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Shek 18.05.16 17:01

@Cepheus, só pra tirar uma dúvida a respeito. No caso, por exemplo, a forma nativa não é mais efetiva do que um script? Qual é sua opinião a respeito?

É que na verdade, o @JScript sempre nos ensinou que o uso de JS deve ser opcional, e que devemos sempre procurar meios mais... digamos, nativos sem o uso de JS. O que você acha? Muito feliz Foi interessante seu código, e não sabia que existia o .blur na biblioteca do jQuery. Eu amo você

Thanks.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Cepheus 18.05.16 17:40

Realmente é mais efetiva, de principio tentei fazer sem uso de js, o problema que encontrei foi:
A busca é gerada automaticamente no menu de navegação: {GENERATED_NAV_BAR}
Então pensei em manipular a div #wrap com css para desfocar, porem ele desfoca tudo que está dentro dela, ou seja todo o conteúdo inclusive a div #search_menu.

Então com ajuda de JS, o que eu faço é remover a div #search_menu e adiciona-la fora da div #wrap, assim eu posso desfocar todos os elementos da div principal, sem que a div #search_menu tenha algum efeito.

Essa foi a unica maneira que encontrei.
Cepheus

Cepheus
Membro

Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085

http://www.bestskins.net/

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Hancki 18.05.16 20:46

Olá!

Experimente este aqui!
Adicione-o numa página Javascript, investida em todas as páginas!
Código:
$(document).ready(function() {
    // var caixaTop = $('.overview.row3#search_menu').offset().top;
    // var caixaLeft = $('.overview.row3#search_menu').offset().left;

    $('body').prepend('<div id="blurHancki" style="display:none"></div>');

    $('a.mainmenu[href="/search"]').click(function() {
        var divBlur = $('#blurHancki');
        if (divBlur.css('display') == 'none') {
            $('head').prepend('<style>#blurHancki { z-index: 500 !important; position: fixed; width: 100% !important; height: 110% !important; background-color: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4); } #wrap { -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); }</style>');
            $('.overview.row3#search_menu').detach().prependTo('.conteneur_container_IE');
            $('#blurHancki').css('display', 'block');
        }
    });
    $('#blurHancki').click(function() {
        var divBlur = $('#blurHancki');
        if (divBlur.css('display') == 'block') {
            $('head').find('style:first').remove();
            $('#blurHancki').css('display', 'none');
            $('#search_menu').css('display', 'none');
        }
    });
});

Esta é a minha tentativa Mostrando a lingua
Para fechar o menu de busca, basta clicar em qualquer espaço "desfocado".

Hancki
Hancki

Hancki
Membro Entusiasta
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8190
Pontos : 12245

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly 19.05.16 0:13

Funcionou. Obrigado a todos pela ajuda.


Depois eu estudo um pouco de código JavaScript.
Como desfocar o fundo atrás de uma classe? DBSufFb
Star Butterfly

Star Butterfly
**

Membro desde : 24/10/2015
Mensagens : 70
Pontos : 121

http://forumvenda.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos