Efeito vidro em relevo

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

Resolvido Efeito vidro em relevo

Mensagem por nejibyakugan em 25/11/13, 01:46 pm

Qual é minha questão:
Pessoal é o seguinte minha dúvida é essa:

Spoiler:


Tão vendo no spoiler acima?Onde eu escrevi AQUI?

Eu coloquei esse código para que o efeito ficasse daquele jeito?

Código:
.pun {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000000;
}
Então o que eu queria era preencher aquele espaço transparente,com uma cor azul fraca,suave,e transparente,de forma que fique azul,mas que dê pra ver a imagem do fundo,ou pelo menos distinguir.

Como faço isso?

OBS-Eu retirei o código acima do meu CSS por enquanto.

Endereço do meu fórum:
http://pokemondemais.forumeiros.com

Versão do fórum:
PUNBB


Última edição por nejibyakugan em 27/11/13, 11:24 am, editado 1 vez(es)
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

Ver perfil do usuário http://pokemonmq.forumeiros.com/forum

Resolvido Re: Efeito vidro em relevo

Mensagem por First em 25/11/13, 11:42 pm

Olá,

Senhor, não entendi poderia ser mais especifico? E deixe o código ativo em vosso fórum até que seja solucionado a sua dúvida.


Até mais,
Passar bem. Piscada 
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com//victor.jagata

Resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan em 26/11/13, 10:10 am

Reativei o código de bordas.


Percebam que envolta da area onde fica o logo,tem uma margem preta fina arredondada,eu queria que o fundo dentro dessa margem ficasse preenchido da cor azul,só que transparente,dando o efeito que um vidro na frente do fundo,mas atrás do logo e menu.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

Ver perfil do usuário http://pokemonmq.forumeiros.com/forum

Resolvido Re: Efeito vidro em relevo

Mensagem por First em 26/11/13, 03:29 pm

Olá,

Peço que acede à 'Folha de estilo CSS':
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores :seta2: Folha de estilo CSS
Código:
.pun {
border: 1px solid transparent;
}
#pun-intro {
background: #0085FF;
border: 1px solid #000;
border-radius: 20px;
}
Valide.


Até mais,
Passar bem. Piscada 
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com//victor.jagata

Resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan em 26/11/13, 05:54 pm

Você acertou em cheio o que eu quero,mas só errou na cor.

Eu quero um azul bem fraquinho,de forma que dê pra ver o fundo atrás,por isso o nome,efeito vidro.

Pra que pareça um vidro azul que está em relevo sobre o fundo.

O código que está certo,só adicione o efeito acima.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

Ver perfil do usuário http://pokemonmq.forumeiros.com/forum

Resolvido Re: Efeito vidro em relevo

Mensagem por First em 26/11/13, 06:17 pm

Olá,

Senhor, substitua o código por este:
Código:
.pun {
border: 1px solid transparent;
}
#pun-intro {
background: rgba(0, 173, 255, 0.61);
border: 1px solid #000000;
border-radius: 20px;
}
rgba(0, 173, 255, 0.61) Aqui é a cor. Você pode modificar para ficar em seu gosto.


Até mais,
Passar bem. Piscada 
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com//victor.jagata

Resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan em 26/11/13, 06:20 pm

O azul ainda tá meio forte,o azul que quero é tipo esse da forumeiros sabe?Esse que aparece no fundo de onde a gente escreve mensagem,que é bem fraquinho mas visivel.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

Ver perfil do usuário http://pokemonmq.forumeiros.com/forum

Resolvido Re: Efeito vidro em relevo

Mensagem por First em 27/11/13, 09:41 am

Olá,

Senhor, como eu disse mais você trocar o conteúdo depois de background:
Substitua o código por este:
Código:
.pun {
border: 1px solid transparent;
}
#pun-intro {
background: #DCEAF5;
border: 1px solid #000000;
border-radius: 20px;
}

Até mais,
Passar bem. Piscada 
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com//victor.jagata

Resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan em 27/11/13, 10:41 am

Deixa que eu ajusto a cor,mas como é definido a cor desse código? :
Código:
.pun {
border: 1px solid transparent;
}
#pun-intro {
background: rgba(0, 173, 255, 0.61);
border: 1px solid #000000;
border-radius: 20px;
}
Isto é,como sei qual cor irá se formar ao alterar o valor?
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

Ver perfil do usuário http://pokemonmq.forumeiros.com/forum

Resolvido Re: Efeito vidro em relevo

Mensagem por First em 27/11/13, 11:11 am

Olá,

Senhor, você pode pesquisar no google sobre cores RGB e HTML, vou deixar um exemplo de como você pode alterar a sua cor:



Até mais,
Passar bem. Piscada 
avatar

First
Membro do Fórum

Masculino
Inscrito dia : 12/07/2013
Mensagens : 1287
Pontos Ativos : 1843

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com//victor.jagata

Resolvido Re: Efeito vidro em relevo

Mensagem por UsuarioX em 27/11/13, 11:20 am

Ola ,

Bem Amigo Rgba e Meio dificil de se explicar no google tem . veja la . enquanto a cor e extremente facil . pelo programa que o nosso amigo first proporcionou acima . Copie a caixa de texto do lado ' Hex ' que e o codigo da cor e adicione em :


.pun {
border: 1px solid transparent;
}
#pun-intro {
background: rgba(0, 173, 255, 0.61);
border: 1px solid #000000;
border-radius: 20px;
}
Vermelho : Onde adicona o codigo
Verde : E o Rgb .

Enquanto ja tiver Achado como e o RGBA ( ele ira ajustar toda a cor dela . ) e so editar onde ta o verde .
avatar

UsuarioX
Usuário destaque

Masculino
Inscrito dia : 03/01/2012
Mensagens : 713
Pontos Ativos : 918

Ver perfil do usuário http://www.zonetoony.net/

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