Tạo modal, đăng nhập, đăng ký

Luxubu

17/09/2023

1 View 0

SaveSavedRemoved 0

Tạo modal cho website

Cấu trúc html modal

<div class="modal">
        <div class="modal__overlay"></div>
        <div class="modal__body"></div>
</div>

Tạo thẻ div với tên class=”modal” để chiếm hết màn hình
Tạo thẻ div với tên class=”modal__overlay” lớp phủ nhìn xuyên qua giúp nhìn thấy được giao diện web vừa giúp người dùng hiểu đang tương tác với những lớp bên trên lớp phủ này tức làm nổi phần trọng tâm giúp trông thấy đẹp và chuyên nghiệp hơn.
Tạo thẻ div với tên class=”modal__body” để viết nội dung sau này như Đăng nhập, Đăng ký,…

Css cho phần modal

Đoạn css sau được thêm vào file base.css

.modal{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    animation: fadeIn linear 0.1s;
}

Định vị và cố định model vào trình duyệt
Xác định các thông số bằng 0 để phủ hết màn hình
Trình bày theo dòng để dễ margin phần tử
Tạo chuyển động cùng tốc độ trong 0.1 giây

Nội dung css chop phần modal__overlay

Đoạn css sau được chèn vào file base.css

.modal__overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

Lấy thẻ gần nhất có position làm góc tọa độ
Cho chiều rộng 100% thẻ cha để phủ hết màn hình
Màu phủ trong suốt

Css cho phần modal_body

Đoạn css sau được chèn vào file base.css

.modal__body{
    --growth-from: 0.7;
    --growth-to: 1;
    margin: auto;
    position: relative;
    z-index: 1;
    animation: growth linear 0.1s;
}

Đặt biến cho chuyển động từ giá trị 0.7 đến 1
Đặt auto để canh giữa khối
Lấy chính nó làm góc tọa độ
Cho khối modal body lên trên cùng
Chuyển động đều 0.1s

Nội dung html đăng ký trong phần body

Tạo class=”auth-form” để bao phần đăng ký
Tạo class=”auth-form__container” chứa phần đăng ký
Tạo phần đầu form với class=”auth-form__header”
Tạo class=”auth-form__form” bao form trường nhập dữ liệu
Tạo class=”auth-form__group” danh sách nhập dữ liệu
Tạo thẻ input với class=”auth-form__input” nhập email
Tạo thẻ input với class=”auth-form__input” nhập password
Tạo thẻ input với class=”auth-form__input” nhập lại mật khẩu
Tạo thẻ div với class=”auth-form__aside” bao nội dung chính sách
Tạo thẻ p với class=”auth-form__policy-text” chứa đoạn text chính sách
Tạo 2 thẻ a với tên class=”auth-form__text-link” để link nội dung chính sách
Tạo class=”auth-form__controls” bao phần nút
Tạo thẻ button với 3 tên class=”btn auth-form__controls-back btn–normal” cho nút TRỞ LẠI
Tạo thẻ buttton với 2 tên class=”btn btn–primary” cho nút ĐĂNG KÝ
Tạo class=”auth-form__socials” bao phần mạng xã hội
Tạo thẻ a với class=”auth-form__socials–facebook btn btn–size-s btn–with-icon” với class chung cho nút, class cho kích thước, class cho icon mạng xã hội
Chèn class “auth-form__socials-icon” vào thẻ i của font awesome phần kết nối facebook
Tạo thẻ span với class=”auth-form__socials-title” để tạo nội dung phần kết nối facebook
Tương tự tạo thẻ a với class=”auth-form__socials–google btn btn–size-s btn–with-icon” với class chung cho nút, class cho kích thước, class cho icon kết nối google
Chèn class “auth-form__socials-icon” vào thẻ i của font awesome phần kết nối google
Tạo thẻ span với class=”auth-form__socials-title” để tạo nội dung phần kết nối google

<div class="auth-form">
                <div class="auth-form__container">
                    <div class="auth-form__header">
                        <h3 class="auth-form__heading">Đăng ký</h3>
                        <span class="auth-form__switch-btn">Đăng nhập</span>
                    </div>
                    <div class="auth-form__form">
                        <div class="auth-form__group">
                            <input type="text" class="auth-form__input" placeholder="Email của bạn">
                        </div>
                        <div class="auth-form__group">
                            <input type="password" class="auth-form__input" placeholder="Mật khẩu của bạn">
                        </div>
                        <div class="auth-form__group">
                            <input type="password" class="auth-form__input" placeholder="Nhập lại mật khẩu">
                        </div>
                    </div>
                    <div class="auth-form__aside">
                        <p class="auth-form__policy-text">
                            Bằng việc đăng ký, bạn đã đồng ý với chính sách của chúng tôi
                        <a href="" class="auth-form__text-link">Điều khoản dịch vụ</a> &
                        <a href="" class="auth-form__text-link">Chính sách bảo mật</a>
                        </p>
                    </div>
                    <div class="auth-form__controls">
                        <button class="btn auth-form__controls-back btn--normal">TRỞ LẠI</button>
                        <button class="btn btn--primary">ĐĂNG KÝ</button>
                    </div>
                </div>
                <div class="auth-form__socials">
                    <a href="" class="auth-form__socials--facebook btn btn--size-s btn--with-icon">
                        <i class="fa-brands fa-square-facebook auth-form__socials-icon"></i>
                        <span class="auth-form__socials-title">
                            Kết nối với facebook
                        </span>
                    </a>
                    <a href="" class="auth-form__socials--google btn btn--size-s btn--with-icon">
                        <i class="fa-brands fa-google auth-form__socials-icon"></i>
                        <span class="auth-form__socials-title">
                            Kết nối với Google
                        </span>
                    </a>
                </div>
            </div>

Tạo css cho nút

Đoạn css được viết vào file base.css

.btn{
    min-width: 124px;
    height: 36px;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    font-size: 1.4rem;
    padding: 0 12px;
    outline: none;
    cursor: pointer;
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    line-height: 1.6rem;

}

Chiều rộng nút tối thiểu 142px, chiều cao 36px
Xóa rạch chân, xóa border, bo viền 2px, font 14px
Đêm trên dưới 0px hai bên 12px, xóa outline
Đặt con trỏ chuột biểu tượng có thể click
Màu văn bản là màu text chính
Trình bày row, nội dung canh giữa, canh giữa phần tử, màu nền trắng

.btn.btn--normal:hover{
    background-color: rgba(0, 0, 0, 0.05);
}
.btn.btn--primary{
    color: var(--white-color);
    background-color: var(--primary-color) ;
}
.btn.btn-disabled{
    color: #949494;
    cursor: default;
    background-color: #c3c3c3;
}
.btn.btn--size-s{
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
}

Khi ghê chuột vào nút thông thường thì đổi màu nền
Khi ghê chuột vào nút chính thì đổi màu nền và màu chữ
Đặt màu nền và màu chữ và con trỏ mang màu sắc như bị vô hiệu hóa
Đặt kích nút size s cao 32px, font 12px, đệm trên dưới là 0px hai bên 8px.

Css cho phần chuyển động

@keyframes fadeIn{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes growth{
    from {
        transform: scale(var(--growth-from));
    }
    to {
        transform: scale(var(--growth-to));
    }
}

Nội dung css đăng ký trong phần body

.auth-form{
    width: 500px;
    background-color: var(--white-color);
    border-radius: 5px;
    overflow: hidden;
}
.auth-form__container{
    margin: 0 32px;
    background-color: var(--white-color);
}

Đặt chiều rộng form 500px
Màu nền trắng
Viền bo tròn 5px
Overflow là ẩn không cho phần con tràn ra ngoài
Canh trên dưới là 0px hai bên 32px

.auth-form__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    margin-top: 10px;
}
.auth-form__heading{
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--text-color);
}

Phần đầu trình bày row
Phần tử canh giữa
Phần tử dạt về 2 bên
Đặt thông số về font, độ đậm, màu

.auth-form__switch-btn{
    font-size: 1.6rem;
    color: var(--primary-color);
    font-weight: 400;
    cursor: pointer;
}

.auth-form__input{
    width: 100%;
    height: 40px;
    margin-top: 16px;
    padding: 0 12px;
    font-size: 1.4rem;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    outline: none;
}

Đặt các thông số size, màu, độ đậm, biểu tượng con trỏ
Chiều rộng bằng thẻ chứa nó, cao 40px, top 16px, đệm trên dưới 0px trái phải 12px, font 14px, viền bo tròn 2px, border 1px kiểu liền màu theo phần chung css, xóa outline.

.auth-form__input:focus{
    border-color: #888;
}
.auth-form__aside{
    margin-top: 18px;
}
.auth-form__policy-text{
    font-size: 1.2rem;
    line-height: 1.8rem;
    text-align: center;
    padding: 0 10px;
}

Khi đặt trỏ chuột vào trường nhập dữ liệu thì màu là 888
Lề top 18px
Nội dung thông số cho phần chính sách

.auth-form__text-link{
    color: var(--primary-color);
    text-decoration: none;
}
.auth-form__controls{
    display: flex;
    justify-content: flex-end;
    margin-top: 80px;
}

Đặt màu sắc cho phần link chính sách, xóa rạch chân
Trình bày nút theo row
Đảo ngược chiều phần tử
Lề top 80px

.auth-form__controls-back{
    margin-right: 8px;
}
.auth-form__socials{
    background-color: #f5f5f5;
    padding: 16px 36px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

Lề phải cho nút back 8px
Màu nền nút mạng xã hội, đệm trên dưới trái phải
Trình bày row, nội dung về hai bên, lề top 20px

.auth-form__socials-icon{
    font-size: 1.8rem;
}
.auth-form__socials--facebook{
    background-color: #3a5a98;
    color: var(--white-color);
}
.auth-form__socials--facebook
.auth-form__socials-icon{
    color: var(--white-color);
}
.auth-form__socials--google{
    color: #666;
    background-color: var(--white-color);
}
.auth-form__socials-title{
    margin: 0 36px;
}

Cỡ font icon là 18px
Nền và màu Nút facebook
Màu icon
Nền và màu Nút Google
Lề tiêu chữ trên dưới 0px trái phải 36px

Nội dung html của đăng nhập trong phần body modal

div class="auth-form">
        <div class="auth-form__container">
            <div class="auth-form__header">
                <h3 class="auth-form__heading">Đăng nhập</h3>
                <span class="auth-form__switch-btn">Đăng ký</span>
            </div>
            <div class="auth-form__form">
                <div class="auth-form__group">
                    <input type="text" class="auth-form__input" placeholder="Email của bạn">
                </div>
                <div class="auth-form__group">
                    <input type="password" class="auth-form__input" placeholder="Mật khẩu của bạn">
                </div>
            </div>
            <div class="auth-form__aside">
                <div class="auth-form__help">
                    <a href="" class="auth-firn__help-link auth-form__help-forgot">Quên mật khẩu</a>
                    <span class="auth-form__help-separate"></span>
                    <a href="" class="auth-firn__help-link">Cần trợ giúp?</a>
                </div>
                
            </div>
            <div class="auth-form__controls">
                <button class="btn auth-form__controls-back btn--normal">TRỞ LẠI</button>
                <button class="btn btn--primary">ĐĂNG NHẬP</button>
            </div>
        </div>
        <div class="auth-form__socials">
            <a href="" class="auth-form__socials--facebook btn btn--size-s btn--with-icon">
                <i class="fa-brands fa-square-facebook auth-form__socials-icon"></i>
                <span class="auth-form__socials-title">
                    Kết nối với facebook
                </span>
            </a>
            <a href="" class="auth-form__socials--google btn btn--size-s btn--with-icon">
                <i class="fa-brands fa-google auth-form__socials-icon"></i>
                <span class="auth-form__socials-title">
                    Kết nối với Google
                </span>
               
            </a>


        </div>
    </div>

Sao chép nội dung html của Đăng ký
Thay “Đăng nhập” thành “Đăng ký”
Xóa phần nhập lại mật khẩu
Thêm class=”auth-form__help
Tạo thẻ a với class=”auth-firn__help-link auth-form__help-forgot” nội dung “Quên mật khẩu”
Tạo vạch ngân cách bằng thẻ span với class=”auth-form__help-separate”
Thêm thẻ a với class=”auth-firn__help-link” nội dung “Cần trợ giúp?”

Nội dung css của đăng nhập trong phần body modal

.auth-form__help{
    display: flex;
    justify-content: flex-end;
}
.auth-firn__help-link{
    font-size: 1.4rem;
    text-decoration: none;
    color: #939393;
}
.auth-form__help-separate{
    display: block;
    height: 22px;
    margin: 0 16px 2px 16px;
    border-left: 1px solid #eaeaea;
}
.auth-form__help-forgot{
    color: var(--primary-color);
}