Efeito vidro em relevo

3 participantes

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

Tópico resolvido Efeito vidro em relevo

Mensagem por nejibyakugan 25.11.13 15:46

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 13:24, editado 1 vez(es)
nejibyakugan

nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por First 26.11.13 1:42

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 
First

First
Super Membro

Membro desde : 13/07/2013
Mensagens : 1313
Pontos : 1884

http://www.ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan 26.11.13 12:10

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.
nejibyakugan

nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por First 26.11.13 17:29

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 
First

First
Super Membro

Membro desde : 13/07/2013
Mensagens : 1313
Pontos : 1884

http://www.ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan 26.11.13 19:54

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.
nejibyakugan

nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por First 26.11.13 20:17

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 
First

First
Super Membro

Membro desde : 13/07/2013
Mensagens : 1313
Pontos : 1884

http://www.ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan 26.11.13 20:20

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.
nejibyakugan

nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por First 27.11.13 11:41

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 
First

First
Super Membro

Membro desde : 13/07/2013
Mensagens : 1313
Pontos : 1884

http://www.ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por nejibyakugan 27.11.13 12:41

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?
nejibyakugan

nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por First 27.11.13 13:11

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 
First

First
Super Membro

Membro desde : 13/07/2013
Mensagens : 1313
Pontos : 1884

http://www.ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito vidro em relevo

Mensagem por UsuarioX 27.11.13 13:20

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 .
UsuarioX

UsuarioX
Membro

Membro desde : 03/01/2012
Mensagens : 713
Pontos : 916

http://www.zonetoony.net/

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