Tạo một biểu mẫu đăng nhập hiệu ứng xếp chồng

Bài viết này là một phần của chúng tôi "Loạt bài hướng dẫn HTML5 / CSS3" - dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Bấm vào đây để xem thêm các bài viết từ cùng một bộ.

Các hình thức đăng nhập là một phần thiết yếu của bất kỳ trang web động. Họ cung cấp một cơ chế cho người dùng trang web truy cập nội dung bị hạn chế. Trong hướng dẫn này, chúng ta sẽ khám phá rất nhiều tính năng CSS3 như bóng văn bản, bóng hộp, độ dốc tuyến tính và chuyển tiếp để tạo ra một hình thức đăng nhập đơn giản và thanh lịch với giao diện xếp chồng lên nhau.

Hình ảnh trên cho thấy một bản xem trước của mẫu đăng nhập mà chúng tôi sẽ xây dựng. Sẵn sàng để lặn trong? Băt đâu nao!

1. Đánh dấu HTML cơ bản

Đánh dấu HTML mà chúng tôi sẽ sử dụng rất đơn giản, sau khi khai báo HTML5 Doctype, chúng tôi có và </code> thẻ. Trong <code><body></code> thẻ, chúng tôi có một <code><section></code> gắn thẻ với một lớp 'xếp chồng'. Điều này <code><section></code> thẻ được sử dụng để xác định chiều rộng của hộp nội dung và căn chỉnh nó vào giữa trang. Chúng tôi cũng sẽ sử dụng tên lớp của thẻ này để nhắm mục tiêu thẻ này bằng CSS. Một <code><form></code> thẻ theo sau <code><section></code> nhãn. Thẻ biểu mẫu không có giá trị hợp lệ cho thuộc tính 'hành động', vì nó chỉ được sử dụng cho mục đích trình diễn. Bên trong trường biểu mẫu là các khai báo cho nhãn email và mật khẩu và trường nhập, theo sau là nút gửi. Điểm quan trọng cần lưu ý ở đây là chúng tôi đã sử dụng trường nhập liệu với một loại 'email'. Điều này được cung cấp cho chúng tôi bởi khai báo HTML5 và nó biến đổi một cách duyên dáng thành trường nhập văn bản thông thường trong các trình duyệt cũ hơn.</p> <p>Đây là toàn bộ đánh dấu HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Mẫu đăng nhập đơn giản

  Đăng nhập
   E-mail  
   Mật khẩu

     Và đây là bản xem trước những gì chúng tôi đã tạo cho đến nay:
  
 2. Thêm kiểu cơ bản
 Tạo một tệp css mới được gọi là master.css và thêm một liên kết đến tệp này trong tệp HTML chính của bạn. Chúng tôi sẽ bắt đầu tệp CSS của mình bằng cách đặt lại nhanh để có được sự đồng nhất trên các trình duyệt khác nhau. Chúng ta cũng hãy thêm một hình ảnh nền đẹp vào trang của chúng tôi. Hình ảnh mà tôi đã sử dụng được lấy từ Các mẫu tinh vi. Hãy duyệt trang web để tìm một hình ảnh phù hợp với sở thích của bạn. Chúng ta có thể thêm hình nền với sự trợ giúp của khai báo sau. Cũng lưu ý rằng tôi đang sử dụng Mở Sans phông chữ từ Google Web Font cho văn bản cơ thể.
  / * -------- Kiểu cơ sở --------- * / body, html lề: 0; đệm: 0;  body nền: url ("https://assets.hongkiat.com/uploads/stack-apers-login-form/bg.png") lặp lại trên cùng bên trái; phông chữ: 16px / 1.5 "Mở Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; lề: tự động 80px; 
 3. Hiệu ứng xếp chồng giấy
 Bây giờ chúng ta có bố cục cơ bản và chạy, hãy bắt đầu với việc thiết kế biểu mẫu. Để có được hiệu ứng xếp chồng lên nhau, chúng tôi sẽ sử dụng :sau và :trước yếu tố giả. Các phần tử giả này chủ yếu được sử dụng để thêm hiệu ứng hình ảnh vào bất kỳ bộ chọn nào. 
 Các :trước phần tử giả được sử dụng để thêm nội dung trước nội dung của bộ chọn và :sau phần tử giả cho sau nội dung của bộ chọn. 
 Chúng tôi sẽ bắt đầu bằng cách đưa ra phần, với một lớp 'xếp chồng', chiều rộng 400px và chiều cao 300px. Hơn nữa, chúng tôi sẽ cung cấp cho hộp này màu nền là # f6f6f6 và viền dày 1 pixel với màu #bbb. Những điều quan trọng cần lưu ý ở đây là khai báo bán kính đường viền và khai báo bóng hộp. Ở đây, tiền tố trình duyệt "-moz-" và "-webkit-" đã được sử dụng để đảm bảo rằng tiền tố này hoạt động trong các trình duyệt dựa trên tắc kè và webkit. 
 Khai báo bán kính đường viền rất đơn giản và được sử dụng để tạo các góc tròn, với 3px đại diện cho độ cong. Cú pháp cho khai báo bóng hộp có thể trông phức tạp, nhưng chúng ta hãy chia nó thành các phần nhỏ hơn để hiểu rõ hơn về nó. 
  / * -------- Border Radius --------- * / -webkit-Border-radius: 3px; -moz-viền-bán kính: 3px; bán kính đường viền: 3px; / * -------- Bóng hộp --------- * / -webkit-box-bóng: 0 0 3px rgba (0,0,0, .2); -moz-box-bóng: 0 0 3px rgba (0,0,0, .2); hộp bóng: 0 0 3px rgba (0,0,0, .2);
 Hai số 0 đầu tiên biểu thị độ lệch x và độ lệch y và 3px biểu thị độ mờ. Tiếp theo là khai báo màu. Tôi đã sử dụng các giá trị rgba ở đây; rgba là viết tắt của màu xanh đỏ và xanh alpha (độ mờ đục). Do đó, 4 giá trị bên trong dấu ngoặc đơn cho biết lượng màu đỏ, lục, lam và alpha (độ mờ) của nó.
  .xếp chồng nền: # f6f6f6; viền: 1px solid #bbb; chiều cao: 300px; lề: tự động 50px; vị trí: tương đối; chiều rộng: 400px; -webkit-box-bóng: 0 0 3px rgba (0,0,0, .2); -moz-box-bóng: 0 0 3px rgba (0,0,0, .2); hộp bóng: 0 0 3px rgba (0,0,0, .2); -webkit-Border-radius: 3px; -moz-viền-bán kính: 3px; bán kính đường viền: 3px; 
 Bây giờ chúng tôi đã tạo hộp giới hạn cơ bản cho biểu mẫu, hãy bắt đầu với :sau và :trước yếu tố giả. 
  .xếp chồng: sau, .stacked: trước nền: # f6f6f6; viền: 1px solid #aaa; dưới cùng: -8px; nội dung: "; height: 250px; left: 2px; vị trí: perfect; width: 394px; z-index: -10; -webkit-box-Shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-Shadow: 0 0 3px rgba (0,0,0, .2); box-Shadow: 0 0 3px rgba (0,0,0, .2); -webkit-Border-radius: 3px; - moz-Border-radius: 3px; Border-radius: 3px; .stacked: before bottom: -14px; left: 5px; width: 388px; -webkit-Border-radius: 3px; -moz-Border-radius: 3px ; Border-radius: 3px; -webkit-box-Shadow: 0 0 15px rgba (0,0,0,0,5); -moz-box-Shadow: 0 0 15px rgba (0,0,0,0,5); -shadow: 0 0 15px rgba (0,0,0,0,5);
 Mã cho: after và: trước các phần tử giả gần như chính xác với mã của khung giới hạn được thảo luận ở trên. Điều quan trọng duy nhất cần lưu ý ở đây là các yếu tố giả này được định vị tuyệt đối với hộp giới hạn. Mỗi phần tử giả được giảm dần xuống một vài pixel để tạo cho nó một cái nhìn xếp chồng lên nhau.
 4. Trường nhập liệu
 Trong đánh dấu HTML, chúng tôi đã thêm một lớp 'nhập văn bản' vào cả trường email và trường mật khẩu để cho phép chúng tôi dễ dàng nhắm mục tiêu các yếu tố này bằng các khai báo CSS. Đây là khai báo CSS được áp dụng cho cả hai trường đầu vào.
  biểu mẫu input.text-input phác thảo: 0; hiển thị: khối; chiều rộng: 330px; đệm: 8px 15px; viền: 1px màu xám; cỡ chữ: 16px; trọng lượng phông chữ: 400; -webkit-Border-radius: 25px; -moz-viền-bán kính: 25px; bán kính đường viền: 25px; hộp bóng: in 0 2px 8px rgba (0,0,0,0.3); 
 Ở đây, một lần nữa chúng ta đã sử dụng các khai báo bán kính đường viền và bóng hộp. Trong trường hợp các trường văn bản, bán kính đường viền được cho giá trị cao hơn để đảm bảo độ cong hơn. Trong trường hợp khai báo bóng hộp, phần tử từ khóa đã được sử dụng để chỉ định rằng bóng sẽ nằm trong trường văn bản. Ở đây, phần bù dọc cho bóng là 2px và nó có độ mờ 8px, màu được khai báo bằng định dạng rgba.
 Để thêm một số tương tác vào các trường đầu vào, chúng tôi sẽ thay đổi thuộc tính bóng hộp cho trường đầu vào ở trạng thái 'di chuột'. Khai báo bóng hộp mới có độ lệch x và y nhưng có độ mờ 5px, với màu được khai báo ở định dạng rgba.
 5. Nút gửi
 Phần cuối cùng của mẫu đơn này mà chúng tôi phải hoàn thành là nút gửi. Tương tự như trường đầu vào, chúng tôi sẽ cung cấp cho nút gửi bán kính 25px bằng cách sử dụng thuộc tính bán kính đường viền. Thuộc tính bóng hộp có độ lệch y là 1px cũng đã được thêm vào để cung cấp cho nút “bóng trong” hiệu ứng.
  hình thức nhập [type = 'submit'] float: right; phần đệm: 10px 20px; hiển thị: khối; con trỏ: con trỏ; cỡ chữ: 16px; trọng lượng phông chữ: 700; màu: #fff; bóng văn bản: 0 1px 0 # 000; màu nền: # 0074CC; viền: 1px solid # 05C; -webkit-Border-radius: 25px; -moz-viền-bán kính: 25px; bán kính đường viền: 25px; hình nền: -moz-linear-gradient (trên cùng, # 08C, # 05C); hình nền: -ms-linear-gradient (trên cùng, # 08C, # 05C); hình nền: -webkit-linear-gradient (trên cùng, # 08C, # 05C); hình nền: tuyến tính-gradient (trên cùng, # 08C, # 05C); -webkit-box-Shadow: in 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-bóng: chèn 0 1px 0px rgba (255, 255, 255, 0.5); hộp bóng: chèn 0 1px 0px rgba (255, 255, 255, 0.5); 
 Điều quan trọng cần lưu ý ở đây là khai báo để thêm gradient vào nút này. Độ dốc CSS3 là một chủ đề khá lớn và chúng ta sẽ chỉ làm trầy xước bề mặt. Đối với nút gửi này, chúng tôi sẽ thêm một gradient tuyến tính đi từ # 08C đến # 05C. Như với tất cả các thuộc tính CSS3 khác mà chúng tôi đã sử dụng cho đến nay, chúng tôi sẽ thêm các tiền tố nhà cung cấp "-moz", "-webkit" và "-ms" để đảm bảo rằng gradient hoạt động trên các trình duyệt khác nhau.
 6. Demo và Tải xuống
 Mẫu đăng nhập của chúng tôi đã hoàn tất. Kiểm tra bản demo để xem hình thức hoàn thành trông như thế nào. Nếu bạn bị mất bất cứ lúc nào hoặc không thể theo dõi hướng dẫn, đừng lo lắng, chỉ cần tải các tệp xuống máy tính để bàn của bạn và sửa lại mã CSS hiện có để hiểu cách thức hoạt động của nó.
 Hy vọng bạn thích hướng dẫn này. Hãy thử nghiệm các tính năng này và đừng quên chia sẻ suy nghĩ của bạn.
 Bản giới thiệu
 Tải tập tin
 
Ghi chú của biên tập viên: Bài này được viết bởi Bharani M cho Hongkiat.com. Bharani là một nhà thiết kế / nhà phát triển đến từ New Delhi, Ấn Độ. Anh ấy hiện đang làm việc trên Resumonk.com - một người xây dựng sơ yếu lý lịch trực tuyến giúp bạn tạo ra một bản lý lịch chuyên nghiệp và đẹp mắt trong vài phút. Ngoài ra hãy xem dự án phụ của anh ấy - Báo giá - báo giá hàng ngày của bạn.