Bài viết này sẽ hướng dẫn tạo Login Form trong suốt bằng HTML và CSS. Tuy nhiên đây chỉ là phần giao diện, các phần logic có phần đăng nhập sẽ không có ở đây. Các bạn có thể xem bài viết Tạo trang đăng nhập đăng ký đơn giản bằng php mysql nếu muốn tạo một trang đăng nhập hoàn chỉnh.
Tài nguyên cần thiết:
Source sử dụng font Oxygen được nhúng thông qua Google Font, các thông số font được để mặc định:
- Oxygen
- Thêm dòng này vào file CSS:
@import url('https://fonts.googleapis.com/css?family=Oxygen');và thuộc tính sau vào thẻ body trong file CSS:
font-family: 'Oxygen', sans-serif;
Hướng dẫn tạo form:
- Các bạn tạo lần lượt các file index.html, main.css, và một file ảnh bg.jpg làm background cho trang đăng nhập, các file này để cùng một thư mục:
- Trong file index.html các bạn chỉnh như sau:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Login Form Design</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> <section> <div class="container"> <div class="form_content"> <h2>What is Lorem Ipsum</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex qui alias assumenda officia soluta, sapiente eaque similique explicabo in repellat dolor incidunt consectetur nam temporibus culpa illo harum rem aspernatur?</p> <a href="#">Read More</a> </div> <div class="login_form"> <h1>Sign In</h1> <form action=""> <input type="text" name="" required="" placeholder="Username"> <input type="password" name="" required="" placeholder="Password"> <input type="submit" name="" value="Login"> </form> <a href="#">Forget Password</a> </div> </div> </section> </body> </html> - Trong file main.css:
@import url('https://fonts.googleapis.com/css?family=Oxygen'); body{ margin: 0; padding: 0; font-family: 'Oxygen', sans-serif; letter-spacing: 1px; } section{ width: 100%; height: 100vh; background: url(bg.jpg); background-size: cover; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 350px; background: rgba(103, 58, 183, 0.7); } .container .form_content, .container .login_form{ position: relative; width: 50%; height: 350px; float: left; box-sizing: border-box; } .container .form_content{ padding: 40px; color: #fff; } .container .form_content a{ display: inline-block; padding: 10px 20px; color: #fff; background: #ff0057; border-radius: 25px; text-decoration: none; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .container .login_form{ background: #fff; height: 380px; top: -15px; box-shadow: -20px 0 15px rgba(0, 0, 0, 0.2); padding: 30px; } .container .login_form h1{ color: #262626; } .container .login_form input{ display: block; width: 100%; padding: 10px; box-sizing: border-box; margin-bottom: 20px; border: 2px solid #ccc; border-radius: 25px; outline: none; font-size: 15px; } .container .login_form input:hover{ border: 2px solid #673ab7; } .container .login_form input[type="submit"]{ color: #fff; background: #673ab7; font-size: 16px; transition: 0.5s; } .container .login_form input[type="submit"]:hover{ background: #ff0057; border: 2px solid #ff0057; } .container .login_form a{ text-decoration: none; font-weight: bold; } - Như vậy các bạn đã hoàn thành trang đăng nhập với form trong suốt. Các bạn có thể xem thêm bài viết ở đầu bài để hoàn thiện phần login cho form.
Video hướng dẫn chi tiết các bước cụ thể:
Các bạn có thể xem demo và download tại đây.