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

4 tháng trước, HTML/CSS, Thủ thuật hay, Thủ thuật web, 213 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

  • Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    2 ngày trước, 640 Lượt xem

    Cổng mặc định cho SSH trên hệ thống Linux là 22. Có một vài lý do khiến bạn có thể muốn thay đổi cổng này thành một số khác. Nếu nhiều máy…

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

Đ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)