gente como eu faço para criar dessa forma esse login ????

lucas pires · Junho 29, 2018

gente como eu faço para criar dessa forma esse login do site https://www.americanas.com.br/ das lojas americanas me ajudem ???? me ajudemmmmmm por favor

KaiqueLuanT · Junho 29, 2018

57 minutos atrás, lucas pires disse:

gente como eu faço para criar dessa forma esse login do site https://www.americanas.com.br/ das lojas americanas me ajudem ???? me ajudemmmmmm por favor

Ta muito vaga sua pergunta meu brother, você diz sobre a função executada ao clicar no icone igual a imagem abaixo?

image.png.dc66848b4d0a9bd867e5cc65c40cecd5.png

Ou um uma pagina de login igual a abaixo?

image.png.bcc0baa748b8a93440d3ef9a11abef8f.png

lucas pires · Junho 29, 2018

esse quadrinho, que quando se passa o mouse ele aparece. esse da ultima foto

dessa forma aqui.

Lifed · Julho 7, 2018

tente fazer com :hover, basta criar o formulário e depois dar um

opacity: 0;

em seguida basta colocar

opacity: 1;

no :hover

EX:

form{
	width: 300px;
	height: 20px;
	opacity: 0;
	transition: 2s;
}

form:hover{
	opacity: 1;
	transition: 1s;
}

Omar~ · Julho 8, 2018

<style>
  .filho {display:none}
  .pai:hover > filho {display:block}
</style>
<div class="pai">
  coloque o mouse em cima de mim
  <div class="filho">
    eu apareço quando o mouse está em cima do div.pai
  </div>
</div>

Se for a questão de exibir um elemento quando o mouse está por cima é assim.

Agora se for o caso de criar toda a estrutura do HTML/CSS para ser igual ou semelhante as imagens citadas a coisa é um pouco mais longa.

Spoiler


<style>
  .posicao {
    float: right;
  }
  .pai {
    position: relative
  }
  .icone {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    margin-right: 30px
  }
  .filho {
    display: none;
    position: absolute;
    right: 35px;
    margin-top: 15px;
    width: 200px;
    border: 1px solid #000000
  }
  .filho:after, .filho:before {
    bottom: 100%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
  }
  .filho:after {
    border-color: transparent;
    border-bottom-color: #ffffff;
    border-width: 15px;
    margin-left: -15px
  }
  .filho:before {
    border-color: transparent;
    border-bottom-color: #000000;
    border-width: 16px;
    margin-left: -16px
  }

  .pai:hover > .filho {display:block}
</style>
<div class="posicao">
  <div class="pai">
    <div class="icone"></div>
    <div class="filho">
    Em caminho de paca, tatú caminha dentro?
    </div>
  </div>
</div>

Lógico que isso é só um exemplo de como fazer pois nem testei, mas seguindo a regra, vai fazer algo similar ao esperado pois criei um ícone uma box com a ceta para cima, para simular a questão.

luisfeliperm2 · Julho 9, 2018

<!DOCTYPE html>
<html>
<head>
    <title>LUISFELIPERM</title>
</head>
<body>
<style>
*{box-sizing: border-box;font-family: Arial;}
    .menu{padding: 10px;position:relative;}
    .menu .link_login{color:#000;padding: 8px 16px;border:1px solid #999;text-decoration:none;}
    .menu .link_login:hover{background:#111;color:#fff;}
    .menu .login{display: none;
        width: 300px;
        border-left-width: 4px;background:#000;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.9);
        position: absolute;top:100%;
    }
    .menu .login:before{
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 20px;
        margin-left: -5px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }
    .menu .login form{width:90%;display:block;margin: 0px auto;}
    .menu .login form input{
        padding: 7px 12px;font-size: 16px;
        display: block;
        margin: 10px 0px;
        width: 100%;
        background: transparent;
        border: 1px solid #fff;color:#fff;outline:0;
    }
    .menu .login form button{display:block;width: 100%;padding:7px 16px;border: 1px solid #fff;font-size: 16px;cursor:pointer;background:#fff;}
    .menu .login form a{display:block;padding:8px 0px;color:#fff}
    .menu .link_login:hover + .login{display: block !important;}
</style>
<div class="menu">
    <div>
        <a href="#" class="link_login">Login</a>
        <div class="login">
            <form>
                <input type="text" name="" placeholder="Email">
                <input type="password" name="" placeholder="Senha">
                <button type="submit">Entrar</button>
                <a href="#">Cadastre-se</a>
            </form>
        </div>
    </div>
</div>


</body>
</html>

Entrar

Arquivado

gente como eu faço para criar dessa forma esse login ????

Recommended Posts

lucas pires 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

KaiqueLuanT 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas pires 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lifed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

luisfeliperm2 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante