Jump to content
4Unknow

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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Revivendo meu tópico, é que estou com um site aqui estou tentando aplicar isso mas ele fica todo bugado.
Se eu postar aqui .zip dele, será que conseguem me ajudar?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.