Chào các bạn, trong bài hướng dẫn này chúng tôi sẽ hướng dẫn các bạn tạo một form đăng nhập bằng CSS3.

Hướng dẫn tạo form Đăng nhập bằng CSS3

Tạo HTML

<form class="form">
    <p class="field">
        <input type="text" name="login" placeholder="Username or email">
        <i class="icon-user icon-large"></i>
    </p>
        <p class="field">
        <input type="password" name="password" placeholder="Password">
        <i class="icon-lock icon-large"></i>
    </p>       
    <p class="submit">
        <button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
    </p>
</form>

Bây giờ chúng ta bắt đầu tạo CSS cho form đăng nhập:

.form {
    /* Size & position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* For the submit button positioning */
 
    /* Styles */
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.3),
        0 3px 7px rgba(0, 0, 0, 0.3),
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: linear-gradient(#eeefef, #ffffff 10%);
}
 
.form .field {
    position: relative; /* For the icon positioning */
}

.form .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;
 
    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
 
    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

Tạo input và button bằng css3

.form input[type=text],
.form input[type=password] {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
 
    /* Size and position */
    width: 100%;
    padding: 10px 18px 10px 45px;
 
    /* Styles */
    border: none; /* Remove the default border */
    box-shadow:
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0.3s ease-out;
}
 
.form input[type=text] {
    margin-bottom: 10px;
}

.form input[type=text]:hover ~ i,
.form input[type=password]:hover ~ i {
    color: #52cfeb;
}
 
.form input[type=text]:focus ~ i,
.form input[type=password]:focus ~ i {
    color: #42A2BC;
}
 
.form input[type=text]:focus,
.form input[type=password]:focus,
.form button[type=submit]:focus {
    outline: none;
}

.form .submit {
    /* Size and position */
    width: 65px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: -25px;
    padding: 10px;
    z-index: 2;
 
    /* Styles */
    background: #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 2px rgba(0,0,0,0.1),
        0 3px 2px rgba(0,0,0,0.1),
        inset 0 -3px 2px rgba(0,0,0,0.2);
}

.form .submit:after {
    /* Size and position */
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    left: 30px;
 
    /* Styles */
    background: #ffffff;
     
    /* Other masks trick */
    box-shadow: 0 62px white, -32px 31px white;
}

.form button {
    /* Size and position */
    width: 100%;
    height: 100%;
    margin-top: -1px;
 
    /* Icon styles */
    font-size: 1.4em;
    line-height: 1.75;
    color: white;
 
    /* Styles */
    border: none; /* Remove the default border */
    border-radius: inherit;
    background: linear-gradient(#52cfeb, #42A2BC);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.35),
        inset 0 3px 2px rgba(255,255,255,0.2),
        inset 0 -3px 2px rgba(0,0,0,0.1);
 
    cursor: pointer;
}

Cuối cùng, chúng ta tạo hiệu ứng hover và focus:

.form button:hover,
.form button[type=submit]:focus {
    background: #52cfeb;
    transition: all 0.3s ease-out;
}
 
.form button:active {
    background: #42A2BC;
    box-shadow:
        inset 0 0 5px rgba(0,0,0,0.3),
        inset 0 3px 4px rgba(0,0,0,0.3);
}
  • HTML/CSS
  • June 21, 2013
  • 0 comment
  • 108 views

Recent posts

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tính năng tìm kiếm AI của Google có mặt tại Việt Nam

Tuần này, Google AI Overviews bắt đầu triển khai đến hơn 100 quốc gia, bao gồm Việt Nam và hỗ […]

Apple trình làng bộ tính năng AI đầu tiên trên iPhone, iPad và Mac cao cấp

Apple trình làng bộ tính năng AI đầu tiên trên iPhone, iPad và Mac cao cấp

Giám đốc điều hành Apple Tim Cook chia sẻ Apple Intelligence không chỉ đơn thuần là AI tạo sinh, mà […]

Apple phát hành iOS 18.1 đưa Apple Intelligence lên iPhone

Apple phát hành iOS 18.1 đưa Apple Intelligence lên iPhone

Bản cập nhật iOS 18.1 được Apple phát hành ngày 28/10, đưa một số tính năng AI của Apple Intelligence […]

Apple sắp phát hành iOS 18.1

Apple sắp phát hành iOS 18.1

Dự kiến, iOS 18.1 sẽ chính thức được phát hành cho các mẫu iPhone tương thích vào tuần tới. Hiện, […]

Xuất hiện thêm lỗi nghiêm trọng trên iPhone 16

Xuất hiện thêm lỗi nghiêm trọng trên iPhone 16

Một số người dùng vừa nâng cấp lên iPhone 16 phản ánh rằng thiết bị của họ gặp phải tình […]

© 2021 Tạp Chí CNTT. Mr Hoang