Ir para conteúdo
Venaxmyth

Página em construção com um efeito em cima do site todo.

Recommended Posts

Boa noite amigos.
Estou começando brincar com css e tenho uma página feita certo, rodando com um vídeo do youtube como background. Mas o site não está pronto, eu queria colocar em construção por cima dele tipo uma tela meio transparente que bloqueasse o conteúdo do fundo, o pessoal iria ver ele, mas essa tela que iria sobrepor diria que estaria em construção, mas mostrando no fundo o site normal.


Como eu poderia fazer isso?

 

meu site está assim:

 

VRu9NP5.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

CSS:

Citar

.nomequalquer {

    width: 100%;

    height: 1000%;

    position: fixed;

    left: 0;

    top: 0;

    background-color: rgba(255,255,255,.5); /* RGB - branco com alpha em 50% (metade transparente )*/

    z-index: 1 /* Esse valor deve ser maior que qualquer outro que esteja em seu css */

}

 

É só adicionar no index <div class="nomequalquer"></div>

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Perfeito amigo é isso mesmo.
Só outra dúvida, consigo colocar tipo um grid fraquinho por cima também?

E escrever algo em cima?

 

Obrigado por enquanto amigo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá amigão, no meu entendimento você quer colocar uma box transparente?

Utilize a propriedade opacity e determine a densidade no seu código CSS.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 horas atrás, Venaxmyth disse:

Perfeito amigo é isso mesmo.
Só outra dúvida, consigo colocar tipo um grid fraquinho por cima também?

E escrever algo em cima?

 

Obrigado por enquanto amigo.

 

Sim tudo que colocar internamente a tag dessa div vai herdar suas propriedades.

 

Citar

.nomequalquer {
    width: 100%;
    height: 1000%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,.5);
    z-index: 1
}

.interna {
    width: 20rem;
    height: 20rem;
    margin-left: calc(50% - 20rem);
    background-color: #000000
}

 

Citar

<div class="nomequalquer">
    <div class="interna"></div>
</div>

 

  • Gostei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: