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, 562 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

    10 tháng trước, 338 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

    12 tháng trước, 229 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)