Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Templates dos tópicos
Hoje à(s) 10:31 por Cream

» Pedido de Rank (Moderador)
Hoje à(s) 5:57 por -xGabriel..

» Sub-fóruns personalizados
Hoje à(s) 1:56 por Cream

» Personalizar perfil do fórum
Hoje à(s) 1:37 por Cream

» Tooltip no título dos tópicos
Hoje à(s) 1:35 por Cream

» Criar tags BBcode
Hoje à(s) 1:01 por Cream

» Perfis em mensagens privadas
Hoje à(s) 0:28 por Cream

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
Cream
 
while
 
Shek
 
Holkis
 
Mr.Probz
 
-xGabriel..
 
GollD
 
Nean
 
lavinnia
 
sandra51
 

Quem está conectado
61 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 59 Visitantes :: 1 Motor de busca

luuuiiiz, while

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Como desfocar o fundo atrás de uma classe?

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

Resolvido Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly em Sab 14 Maio 2016 - 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 Qui 19 Maio 2016 - 0:15, editado 1 vez(es)

Star Butterfly
Nível 6

Masculino
Inscrito dia : 24/10/2015
Mensagens : 69
Pontos Ativos : 458

http://forumvenda.forumeiros.com/

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Apollo em Seg 16 Maio 2016 - 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
Usuário destaque

Masculino
Inscrito dia : 08/12/2014
Mensagens : 754
Pontos Ativos : 1749

http://suportedesign.forumeiros.com https://www.facebook.com/https://www.facebook.com/arthur.martins.10420 https://twitter.com/@ApolloCray

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly em Seg 16 Maio 2016 - 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
Nível 6

Masculino
Inscrito dia : 24/10/2015
Mensagens : 69
Pontos Ativos : 458

http://forumvenda.forumeiros.com/

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Apollo em Ter 17 Maio 2016 - 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
Usuário destaque

Masculino
Inscrito dia : 08/12/2014
Mensagens : 754
Pontos Ativos : 1749

http://suportedesign.forumeiros.com https://www.facebook.com/https://www.facebook.com/arthur.martins.10420 https://twitter.com/@ApolloCray

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Shek em Qua 18 Maio 2016 - 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


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14653
Pontos Ativos : 21681

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly em Qua 18 Maio 2016 - 10:54

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

Star Butterfly
Nível 6

Masculino
Inscrito dia : 24/10/2015
Mensagens : 69
Pontos Ativos : 458

http://forumvenda.forumeiros.com/

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Shek em Qua 18 Maio 2016 - 12:58

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


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14653
Pontos Ativos : 21681

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly em Qua 18 Maio 2016 - 13:16

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

Star Butterfly
Nível 6

Masculino
Inscrito dia : 24/10/2015
Mensagens : 69
Pontos Ativos : 458

http://forumvenda.forumeiros.com/
  • 0

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Cepheus em Qua 18 Maio 2016 - 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 Qua 18 Maio 2016 - 17:02, editado 1 vez(es)

Cepheus
Usuário avançado

Masculino
Inscrito dia : 21/03/2014
Mensagens : 344
Pontos Ativos : 1624

http://www.bestskins.net/
  • 0

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Shek em Qua 18 Maio 2016 - 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.


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 14653
Pontos Ativos : 21681

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif
  • 0

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Cepheus em Qua 18 Maio 2016 - 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
Usuário avançado

Masculino
Inscrito dia : 21/03/2014
Mensagens : 344
Pontos Ativos : 1624

http://www.bestskins.net/
  • 0

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Hancki em Qua 18 Maio 2016 - 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
Desenvolvedor
Desenvolvedor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 7997
Pontos Ativos : 14508

http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://twitter.com/https://www.facebook.com/djtomoficial

Resolvido Re: Como desfocar o fundo atrás de uma classe?

Mensagem por Star Butterfly em Qui 19 Maio 2016 - 0:13

Funcionou. Obrigado a todos pela ajuda.


Depois eu estudo um pouco de código JavaScript.

Star Butterfly
Nível 6

Masculino
Inscrito dia : 24/10/2015
Mensagens : 69
Pontos Ativos : 458

http://forumvenda.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5