6

tenho a imagem abaixo que mostra um form HTML. inserir a descrição da imagem aqui

Queria fazer esse efeito no form mas não consegui.

Alguém pode me ajudar?

Segue a minha tentativa.

body {
  font-family: 'Roboto', sans-serif;
  background-color: rgb(40, 22, 111);
}

.logon {
  position: relative;
  top: 50% - 150px;
  width: 300px;
  height: 220px;
  margin: 0 auto;
  border: 4px rgb(93, 138, 168) solid;
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
}

.logon * {
  display: block;
  margin: 5px auto;
}

.logon input,
.logon button {
  font-size: .7em;
  padding: 3px;
  border-top: 2px rgb(10, 10, 10) solid;
  border-right: 1px rgb(10, 10, 10) solid;
  border-left: 1px rgb(10, 10, 10) solid;
  border-bottom: 3px rgb(255, 255, 255) solid;
}

.logon h2 {
  width: 250px;
  height: 30px;
  text-align: center;
  color: rgb(0, 0, 0);
}

.logon input {
  width: 250px;
  height: 30px;
  background: rgba(10, 10, 10, .3);
  color: rgb(0, 0, 0);
}

.logon .lembra {
  width: 250px;
  height: 30px;
  color: rgb(0, 0, 0);
}

.logon button {
  width: 260px;
  height: 40px;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
<div class="logon">
  <h2>Acessar Sistema</h2>
  <input type="text" name="usuario" id="usuario" placeholder="usuário" />
  <input type="password" name="senha" id="senha" placeholder="senha" />
  <div class="lembra"></div>
  <button id="logar">LOGIN</button>
</div>

3
  • 1
    Carlos qual parte do efeito? Esse brilho branco nas bordas, ou essa linha diagonal no meio do form? Ou os dois? Qual é o nível aproximado de fidelidade aceitável para o código ficar igual a imagem 90%?
    – hugocsl
    2/01/2019 às 10:42
  • Então, Bom dia e feliz ano novo. Seria esse sombreamento preto no fundo do body e os brilho branco nas bordas . Esse elevado do corpo do form parece que é só mesmo um background mas estou tendo muita dificuldade. A barra não precisa 2/01/2019 às 10:46
  • Essa cor de fundo do form parece que não é sólida. Dá impressão que pegou-se o azul e encheu vários pixels internos com preto. Como se consegue esse feito em CSS? 2/01/2019 às 10:50

1 Resposta 1

8

Segue aqui uma opção.

inserir a descrição da imagem aqui

Estude bem os estilo do background do body, que nada mais é que um radial-gradient, que vai do meio mais claro, para a extremidade mais escura, dando esse efeito que vc comentou. Leia a documentação do radial-gradient aqui https://developer.mozilla.org/pt-BR/docs/Web/CSS/radial-gradient

E Atenção também com os estilos da classe .logon que é onde tem mais coisa. Além dos pseudos-elementos ::after e ::before que foi o que eu usei para fazer os brilhos na borda. Na borda do .logon, eu usei um gradiente, para isso precisei usar border-image e border-image-slice

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  background-image: radial-gradient(#ACCCC1 20%, #39594E);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logon {
  position: relative;
  width: 300px;
  height: 220px;
  margin: 0 auto;	
  box-shadow: inset 0 18px 32px 0px rgba(0,0,0, 0.1) ;
  border: 2px solid;
  border-image: linear-gradient(rgba(255,255,255, 0.5) 40%, rgba(255,255,255, 0.05) 60%);
  border-image-slice: 1;
  border-radius: 20px;
  background-image: linear-gradient(-10deg, rgba(255,255,255, 0.05) 49%, 
  rgba(255,255,255, 0.25) 50%), radial-gradient( rgba(57, 89, 78, 0.5), #ACCCC1);
}
.logon::after,
.logon::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgba(255,255,255, 0.5);
  filter: blur(2px);
  transform: scaleX(10);
  border-radius: 50%;
  top: -5px;
  left: 30%;

}
.logon::before {
  top: unset;
  left: unset;
  right: 30%;
  bottom: -5px;
}
.logon * {			
  display:block;
  margin: 5px auto;	
}		
.logon input,
.logon button{
  font-size: .7em;		
  padding: 3px;
  border-top: 2px rgba(10,10,10, 0.35) solid;
  border-right: 1px rgba(10,10,10, 0.05) solid;
  border-left: 1px rgba(10,10,10, 0.05) solid;
  border-bottom: 3px rgba(255,255,255, 0.35) solid;
  border-radius: 3px;
}
.logon h2{
  width: 250px;
  height: 30px;
  text-align: center;
  color: rgb(0,0,0);
}		
.logon input {
  width: 250px;
  height: 30px;
  background: transparent;
  color: rgb(0,0,0);
}
.logon .lembra {
  width: 250px;
  height: 30px;
  color: rgb(0,0,0);
}
.logon button{
  width: 260px;
  height: 40px;
  /* background-color: rgb(0,0,0); */
  border: none;
  color: #fff;
  background-color: #3A4644;
} 
<div class="logon">
  <h2>Acessar Sistema</h2>
  <input type="text" name="usuario" id="usuario" placeholder="usuário" />
  <input type="password" name="senha" id="senha" placeholder="senha" />
  <div class="lembra"></div>
  <button id="logar">LOGIN</button>
</div>

3
  • Muito obrigado, vou seguir teu conselho. Sou melhor em backend. Se eu puder ser util estou aqui. Agora vou pesquisar para colocar um ícone dentro do input 2/01/2019 às 11:46
  • @CarlosRocha normal, eu por minha vez não manjo nada de back rss, sobre o ícone no input já te adianto que input não aceita pseudo elemento, então pode ser que vc precise colocá-lo dentro de uma label. Mas qq duvida abre uma pergunta ai que te dou uma força
    – hugocsl
    2/01/2019 às 11:52
  • é, imaginei. Acho que vou fazer uma diva com um icon e um text em float left. Vou ver aqui 2/01/2019 às 11:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .