CSS AVANÇADO
ESTILIZANDO FORMULÁRIOS
DICAS E EXERCÍCIOS
ESTILIZANDO FORMULÁRIOS COM CSS
Construindo uma tela de Login
CSS EXTERNO
Para usarmos css externo chamamos da seguinte forma:
<link rel=“stylesheet” hre=“arquivo.css”/>
CONSTRUINDO NOSSA TELA DE LOGIN
1º Passo construir o formulário com o html
CONSTRUINDO NOSSA TELA DE LOGIN
1º Passo construir o formulário com o html
<form class="formLogin">
<h1>Login</h1>
<p>Digite os seus dados de acesso no campo abaixo.</p>
<label for="email">E-mail</label>
<input type="email" placeholder="Digite seu e-mail" autofocus="true"
/>
<label for="password">Senha</label>
<input type="password" placeholder="Digite seu e-mail" />
<a href="/">Esqueci minha senha</a>
<input type="submit" value="Entrar" class="btn" />
</form>
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Adicione em head o css externo.
<link rel=”stylesheet” href=”estilo.css”>
E vamos começar a estilizar…
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Adicione em head o css externo.
<link rel=”stylesheet” href=”estilo.css”>
E vamos começar a estilizar…
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
color: #023047
}
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Dimensionar e colocar o fundo na página
.page { display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: #480ca8; }
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Centralizar e estilizar o form
.formLogin {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 7px;
padding: 40px;
box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.4);
gap: 5px
}
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Centralizar e estilizar o form
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Estilizando H1 e P
.formLogin h1 { padding: 0;
margin: 0;
font-weight: 500;
font-size: 2.3em; }
.formLogin p { display: inline-block;
font-size: 14px;
color: #666;
margin-bottom: 25px; }
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Estilizando H1 e P
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Estilizando caixas de texto o evento focus
.formLogin input { padding: 15px;
font-size: 14px;
border: 1px solid #ccc;
margin-bottom: 20px;
margin-top: 5px;
border-radius: 4px;
transition: all linear 160ms;
outline: none; }
.formLogin input:focus { border: 1px solid #f72585; }
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Estilizando a label, o botão e o link
.formLogin label { font-size: 14px; font-weight: 600; }
.formLogin a { display: inline-block;
margin-bottom: 20px;
font-size: 13px;
color: #555;
transition: all linear 160ms; }
.formLogin a:hover { color: #f72585; }
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
Estilizando o botão e seu evento hover.
.btn { background-color: #f72585;
color: #fff;
font-size: 14px;
font-weight: 600;
border: none !important;
transition: all linear 160ms;
cursor: pointer; margin: 0 !important; }
.btn:hover { transform: scale(1.05);
background-color: #ff0676; }
CONSTRUINDO NOSSA TELA DE LOGIN
2º Estilizando o nosso formulário.
EXERCÍCIOS
Seguindo o mesmo layout, adiciona opção para criar nova conta de utilizador e para
redefinir senha.
Neste caso o projecto terá 3 páginas.
