Old school Swatch Watches

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: 1409
score
Đánh giá: 4.5/ 5, 1409 bình chọn
- Chia sẻ:G  T
BBCode:

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

[Tổng hợp] Share filelist TWIG tiaxgame v3.5 bản hoàn chỉnh Mod và Fix

+

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

+

Tổng hợp Filelist Tsukuyomi (AiChat) không timeout, data vô hạn kèm tool post, leech, auto leech đầy đủ

+

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

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