Efeito vidro em relevo

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

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.  

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.

Olá,

Peço que acede à 'Folha de estilo CSS':
Painel de Controle Visualização Imagens e Cores Cores 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.  

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.

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.  

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.

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.  

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?

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.  

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 .