폼 관련 가상클래스를 활용한 로그인 화면
<span>Email</span>
span에 display:block 또는 div로 해도 됨
체크박스는 왼쪽float a태그는 오른쪽float
부모요소에 overflow: hidden 필요
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<form action="" class="login">
<span>Email</span>
<input type="email" placeholder="Email Address">
<span>Password</span>
<input type="password" placeholder="Password">
<p>
<label>
<input type="checkbox"> Keep me logged in
</label>
<a href="" class="btn-forgot">Forgot Your Password</a>
</p>
<button>Log in</button>
</form>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
body {
margin: 0;
line-height: 1.5em;
font-weight: normal;
/* 중앙정렬 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #222;
}
a {
color: #222;
}
.login {
width: 800px;
padding: 25px;
box-sizing: border-box;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.205);
background-color: #f5f5f5;
border: 1px solid #eee;
border-radius: 5px;
}
.login span {
display: block;
font-weight: bold;
margin-top: 20px;
}
.login input[type=email],
.login input[type=password] {
width: 100%;
padding: 15px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
transition: 0.3s;
padding-left: 50px;
}
.login input[type=email]:hover,
.login input[type=password]:hover {
border: 1px solid dodgerblue;
box-shadow: 0 0 5px dodgerblue;
}
.login input[type=email] {
background: #fff url(../img/icon-email.png) no-repeat center left 10px;
}
.login input[type=password] {
background: #fff url(../img/icon-lock.png) no-repeat center left 10px;
}
.login input[type=email]::placeholder,
.login input[type=password]::placeholder {
opacity: 1;
transition: 0.3s;
}
/* 클릭했을 때 placeholder 없애기 :
visibility: hidden; 만 있어도 되지만 트랜지션을 넣고싶으면 opacity 이용 */ .login input[type=email]:focus::placeholder,
.login input[type=password]:focus::placeholder {
visibility: hidden;
opacity: 0;
}
/* p : 부모
자식요소가 float -> 부모요소의 높이값 잃는다. 부모 오버플로우 히든 필요 */
.login p {
/* border: 1px solid red; */
overflow: hidden;
}
.login p label {
float: left;
cursor: pointer;
}
.login p .btn-forgot {
float: right;
}
.login p .btn-forgot:hover {
text-decoration: underline;
}
.login button {
width: 300px;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 24px;
cursor: pointer;
background-color: #2991b1;
color: #fff;
transition: 0.3s;
}
.login button:hover {
background-color: #2c778e;
}
|
cs |
'Web > HTML CSS 퍼블리싱' 카테고리의 다른 글
| login form #2 (0) | 2021.07.21 |
|---|---|
| 크롬 확장 프로그램 추천 (0) | 2021.07.20 |
| full screen 검색창 (0) | 2021.07.06 |
| 프로필 카드 ui #1 hover effec (0) | 2021.07.06 |
| custom checkbox #2 커스텀 라디오 버튼, 체크박스 (폰트어썸 아이콘) (0) | 2021.07.04 |