Tổng hợp các đoạn mã css hay dùng

3 năm trước, HTML/CSS, Thủ thuật hay, Thủ thuật web, 680 Lượt xem

Trong quá trình code theme wordpress thì cũng đã có khá nhiều vẫn đề, bài này mình sẽ tổng hợp 1 số đoạn css hay dùng để code web chuẩn hơn, đỡ phải search google nhiều lần thôi ạ! hihi

Đoạn mã css responsive mobile

@media only screen and (max-width: 800px) {
  //code    
}

object-fit Cố định hình ảnh đẹp

Khi các bạn muốn hình ảnh hiển thị trong khung hình ảnh kích thước chỉ định thì có thể sẽ dùng đến object-fit

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}

Màu nền chia theo tỷ lệ % linear-gradient

Cách để chia backgound của bạn chạy 2 nền 1 lúc, code bên dưới là 1 bên màu trắng và 1 bên màu xanh, tỷ lệ 50% trái phải

header {
    position: relative;
    background: linear-gradient(to left, #ffffff 50%, #014681 50%);
    /* background: #fff; */
    -webkit-box-shadow: 0 5px 7px 0 rgb(50 50 50 / 33%);
    -moz-box-shadow: 0 5px 7px 0 rgba(50, 50, 50, 0.33);
    box-shadow: 0 5px 7px 0 rgb(50 50 50 / 33%);
}

Hover vào hình ảnh zoom lớn hình hiệu ứng đẹp

.relative.fix-images img {
    transition: .3s ease-in-out;
    position: relative;
}

.relative.fix-images img {
    border-radius: 10px;
    width: 100%;
    height: 185px;
    object-fit: cover;
}

.relative.fix-images img:hover {
    transform: scale(1.05);
}

Bài viết mới cập nhập

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    1 năm trước, 440 Lượt xem

    Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

  • Backup Yandex Mail

    Backup Yandex Mail

    2 năm trước, 286 Lượt xem

    Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
Chủ đề liên quan theo Tag
, , ,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)