Criando um Formulário de Login de Efeito de Papel Empilhado

Este artigo faz parte do nosso "Série de tutoriais HTML5 / CSS3" - dedicado a ajudar a torná-lo um melhor designer e / ou desenvolvedor. Clique aqui para ver mais artigos da mesma série.

Formulários de login são uma parte essencial de qualquer site dinâmico. Eles fornecem um mecanismo para os usuários do site acessarem conteúdo restrito. Neste tutorial, exploraremos vários recursos do CSS3, como text-shadow, box-shadow, gradientes lineares e transições para criar um formulário de login simples e elegante com uma aparência de papel empilhada..

A imagem acima mostra uma prévia do formulário de login que estaremos criando. Pronto para mergulhar? Vamos começar!

1. Marcação HTML básica

A marcação HTML que usaremos é muito simples, depois da declaração do Documento HTML5, temos a e </code> Tag. Dentro do <code><body></code> tag, temos um <code><section></code> tag com uma classe de 'empilhados'. este <code><section></code> tag é usada para definir a largura da caixa de conteúdo e para alinhá-la ao centro da página. Também usaremos o nome da classe dessa tag para segmentar essa tag usando CSS. UMA <code><form></code> tag segue <code><section></code> tag. A tag de formulário não possui um valor válido para o atributo 'action', pois é usado apenas para fins de demonstração. Dentro do campo de formulário estão as declarações para os rótulos de email e senha e o campo de entrada, seguidos por um botão de envio. O ponto importante a ser observado aqui é que usamos um campo de entrada com um tipo de 'email'. Isto é fornecido para nós pela declaração HTML5 e degrada-se elegantemente para um campo de entrada de texto regular em navegadores mais antigos.</p> <p>Aqui está toda a marcação HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Formulário de Login Simples

  Entrar
   O email  
   Senha

     E aqui está uma prévia do que criamos até agora:
  
 2. Adicionando Estilos Básicos
 Crie um novo arquivo css chamado master.css e adicione um link para este arquivo no seu arquivo HTML principal. Vamos iniciar nosso arquivo CSS com uma redefinição rápida para obter uniformidade em diferentes navegadores. Vamos também adicionar uma imagem de fundo legal à nossa página. A imagem que eu usei foi tirada de Padrões Subtis. Sinta-se à vontade para navegar pelo site e encontrar uma imagem de fundo que se adapte ao seu gosto. Podemos adicionar a imagem de fundo com a ajuda da seguinte declaração. Observe também que estou usando o Open Sans fonte do Google Web Font para o corpo do texto.
  / * -------- Estilos Base --------- * / body, html margin: 0; preenchimento: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") deixou a repetição superior; fonte: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margem: 80px auto; 
 3. Efeito de Papel Empilhado
 Agora que temos o layout básico em funcionamento, vamos começar a criar o formulário. Para obter o efeito de papel empilhado, faremos uso do :depois de e :antes pseudo-elementos. Esses pseudo-elementos são usados principalmente para adicionar efeitos visuais a qualquer seletor. 
 o :antes pseudo-elemento é usado para adicionar conteúdo antes do conteúdo do seletor e :depois de pseudo-elemento para depois do conteúdo de um seletor. 
 Vamos começar dando a seção, com uma classe de 'empilhados', uma largura de 400px e uma altura de 300px. Além disso, daremos a esta caixa uma cor de fundo de # f6f6f6 e uma borda de 1 pixel de espessura com a cor #bbb. As principais coisas a serem observadas aqui são a declaração border-radius e a declaração box-shadow. Aqui, os prefixos de navegador "-moz-" e "-webkit-" foram usados para garantir que isso funcione nos navegadores baseados no gecko e no webkit.. 
 A declaração border-radius é muito simples e é usada para criar cantos arredondados, com 3px representando a curvatura. A sintaxe da declaração box-shadow pode parecer complicada, mas vamos dividi-la em partes menores para entender melhor. 
  / * -------- Raio da borda --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; raio de fronteira: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, 0,2); -moz-box-shadow: 0 0 3px rgba (0,0,0, 0,2); box-shadow: 0 0 3px rgba (0,0,0, 0,2);
 Os dois primeiros zeros indicam o deslocamento xeo deslocamento yeo 3px indica o desfoque. Em seguida é a declaração de cores. Eu usei valores de rgba aqui; rgba significa azul verde vermelho e alfa (opacidade). Assim, os 4 valores dentro do parêntese indicam a quantidade de vermelho, verde, azul e seu alfa (opacidade).
  .empilhado segundo plano: # f6f6f6; border: 1px solid #bbb; altura: 300 px; margem: 50px auto; posição: relativa; largura: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, 0,2); -moz-box-shadow: 0 0 3px rgba (0,0,0, 0,2); box-shadow: 0 0 3px rgba (0,0,0, 0,2); -webkit-border-radius: 3px; -moz-border-radius: 3px; raio de fronteira: 3px; 
 Agora que criamos a caixa delimitadora básica para o formulário, vamos começar com o :depois de e :antes pseudo-elementos. 
  .empilhado: depois, .stacked: before background: # f6f6f6; borda: 1px sólido #aaa; fundo: -8px; conteúdo: "; altura: 250px; esquerda: 2px; posição: absoluto; largura: 394px; z-índice: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, 0,2); moz-box-shadow: 0 0 3px rgba (0,0,0, 0,2); box-shadow: 0 0 3px rgba (0,0,0, 0,2); -webkit-fronteira-raio: 3px; moz-border-radius: 3px; raio-da-fronteira: 3px; .stacked: before bottom: -14px; left: 5px; largura: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; border-radius: 3px; -webkit-box-shadow: 0 0 rpp 15px (0,0,0,0,5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5); caixa -sombra: 0 0 15px rgba (0,0,0,0,5);
 O código para: after e: before pseudo-elements é quase exatamente semelhante ao da caixa delimitadora discutida acima. A única coisa importante a notar aqui é que esses pseudo-elementos são posicionados absolutamente em relação à caixa delimitadora. Cada um dos pseudo-elementos é progressivamente reduzido por alguns pixels para dar uma aparência de papel empilhada.
 4. Campos de Entrada
 Na marcação HTML, adicionamos uma classe de "entrada de texto" ao campo de e-mail e ao campo de senha para nos permitir segmentar facilmente esses elementos com nossas declarações de CSS. Aqui está a declaração CSS que é aplicada a ambos os campos de entrada.
  Formulário de entrada da ficha contorno: 0; display: bloco; largura: 330px; preenchimento: 8px 15px; borda: 1px cinza sólido; tamanho da fonte: 16px; font-weight: 400; -webkit-border-radius: 25 px; -moz-border-radius: 25 px; raio de fronteira: 25 px; box-shadow: inserção 0 2px 8px rgba (0,0,0,0,3); 
 Aqui, novamente, fizemos uso das declarações border-radius e box-shadow. No caso de campos de texto, o raio da borda recebe um valor mais alto para garantir mais curvatura. No caso de declaração de sombra de caixa, a inserção de palavra-chave foi usada para especificar que a sombra estará dentro do campo de texto. Aqui, o deslocamento vertical para a sombra é 2px e tem um borrão de 8px, a cor sendo declarada usando o formato rgba.
 Para adicionar alguma interatividade aos campos de entrada, alteraremos a propriedade box-shadow para o campo de entrada no estado 'hover'. A nova declaração box-shadow tem zero deslocamentos xey y, mas tem um desfoque de 5px, com a cor sendo declarada no formato rgba.
 5. Botão Enviar
 A parte final deste formulário que temos que completar é o botão de envio. Semelhante ao campo de entrada, daremos ao botão de envio um raio de 25px usando a propriedade border-radius. Uma propriedade shadow-box com um deslocamento y de 1px também foi adicionada para dar ao botão “sombra interior” efeito.
  input do formulário [type = 'submit'] float: right; preenchimento: 10 px 20 px; display: bloco; cursor: ponteiro; tamanho da fonte: 16px; font-weight: 700; cor: #fff; text-shadow: 0 1px 0 # 000; cor de fundo: # 0074CC; borda: 1px sólido # 05C; -webkit-border-radius: 25 px; -moz-border-radius: 25 px; raio de fronteira: 25 px; background-image: -moz-linear-gradient (superior, # 08C, # 05C); background-image: -ms-linear-gradient (superior, # 08C, # 05C); background-image: -webkit-linear-gradient (topo, # 08C, # 05C); background-image: gradiente linear (topo, # 08C, # 05C); -webkit-box-shadow: inserção 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: inserção 0 1px 0px rgba (255, 255, 255, 0,5); box-shadow: inserção 0 1px 0px rgba (255, 255, 255, 0,5); 
 O importante a observar aqui é a declaração para adicionar o gradiente a este botão. Gradientes CSS3 é um tema bastante grande e só vamos arranhar a superfície. Para este botão de envio, adicionaremos um gradiente linear entre # 08C e # 05C. Como com todas as outras propriedades CSS3 que usamos até agora, estaremos adicionando os prefixos de fornecedores "-moz", "-webkit" e "-ms" para garantir que o gradiente funcione em diferentes navegadores.
 6. Demo e Download
 Nosso formulário de login está agora completo. Confira a demonstração para ver como o formulário preenchido parece. Se você está perdido a qualquer momento ou não conseguiu acompanhar o tutorial, não se preocupe, basta fazer o download dos arquivos para a sua área de trabalho e mexer com o código CSS existente para entender como ele funciona.
 Espero que tenha gostado desse tutorial. Fique à vontade para experimentar esses recursos e não se esqueça de compartilhar seus pensamentos.
 Demonstração
 Baixar arquivos
 
Nota do editor: Este post foi escrito por Bharani M para Hongkiat.com. Bharani é um designer / desenvolvedor de Nova Delhi, na Índia. Ele está atualmente trabalhando em Resumonk.com - um construtor de currículo on-line que ajuda você a criar um currículo profissional e bonito em minutos. Também confira seu projeto paralelo - Quotescube.com - sua dose diária de cotações.