CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Share code Đăng nhập với HTML5 và CSS Đẹp và Chuyên nghiệp

Admin* RoSino18k *
* 28-04-2016

Nhiều trang web hiện nay rất đau đầu cho việc lựa chọn code Đăng Nhập sao cho vừa nhẹ vừa Đẹp vừa phù hợp thì bây giờ Cú Đêm Việt Nam xin chia sẻ một bộ Login Form rất chuyên nghiệp và khá là Đẹp chắc chắn nhiều bạn sẽ cảm thấy hài lòng.
Chỉ với một chút hiệu ứng từ CSS và HTML nhẹ nhàng bạn đã có thể tạo một trang login khá mượt

Share code Đăng nhập với HTML5 và CSS Đẹp và Chuyên nghiệp
[Tải ảnh]


Copy mã HTML và CSS sau dán vào website của bạn


Code HTML:
<form>
<h1>Login</h1>
<input placeholder="Username" type="text" required="">
<input placeholder="Password" type="password" required="">
<button>Submit</button>
</form>

Code CSS:
form {
box-sizing: border-box;
width: 260px;
margin: 100px auto 0;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding-bottom: 40px;
border-radius: 3px;
}
form h1 {
box-sizing: border-box;
padding: 20px;
}

input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
button {
border: none;
background: #1abc9c;
cursor: pointer;
border-radius: 3px;
padding: 6px;
width: 200px;
color: white;
margin-left: 25px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
}

Chúc các bạn thành công!
Nguồn: Tý K - CodeSEO.Net
↓ Tập tin Đính kèm ↓
↑↑ Lượt xem: 1357
score
Đánh giá: 4.5/ 5, 1357 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-1357]

XtGem Forum catalog