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

2 tuần trước, HTML/CSS, Thủ thuật hay, Thủ thuật web, 55 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ình luận trên facebook netweb.vn