Fazer login com efeito por cima da tela

[Marcos Coelho2 2]

Estou querendo fazer login parecido com esse site http://www.centauro.com.br/

Se alguem souber onde posso encontrar sobre ou souber como fazer.

 

é so abrir o site e clicar em fazer o login embaixo da logo.

 

Como posso fazer esse efeito.

[Diéssica 140]

É só trabalhar com o sobreposicionamento de elementos, que é feito com a propriedade position do CSS. Não tem mistério.

 

Perceba que a box do login foi trabalhada com a propriedade position:

.login-box {
background: white;
display: none;
padding: 5px;
padding-top: 47px;
position: absolute;
top: -8px;
(...)
}

:seta: http://www.w3schools.com/css/css_positioning.asp

:seta: http://www.w3schools.com/cssref/pr_class_position.asp

:seta: http://www.barelyfitz.com/screencast/html-training/css/positioning/

[leonardo WD 0]

Você vai criar a div com os dados do formulario para login e posicionar aonde você quer que ela apareça. Exemplo:

 

#loginUsuario{
  width: 200px;
  height auto;
  background-color: #fff;
  position: relative;
  z-index: 1; /*Na dúvida para não ocorrer de ter outros elementos sobrepostos a div mesmo colocando ela com position: relative. Caso isso ocorra é só aumentar o z-index. */
}

 

Link para abrir a div no HTML:

 

<a href="#" id="abrirLogin">Fazer Login</a>

 

<div id="loginUsuario">
<form action="login.php" method="post">
Login: <input type="text" name="usLogin" /><br/>
Senha: <input type="password" name="usPass" /><br/>
<input type="submit" value="Fazer Login" />
</form>
</div>

 

Na sua página faça um efeito básico de Jquery:

$(document).ready(function(){

  $("#loginUsuario").hide(); //Deixando a div escondida

  $("#abrirLogin").click(function(){

  $("#loginUsuario").slideToggle(); // A div irá aparecer com um 

efeito de slide

  });

});

 

Bom cara eu acho que isso deve te ajudar.

Abraço,

Leonardo.