Thủ thuật CSS (P2)

Trần Đức Lĩnh


Mục lục.

1) Đưa hình ảnh ra giữa

Đưa ảnh ra giữa không thể sử dụng display:block, chỉ cần phần div ngoài chuyển về thuộc tính text-align:center, thẻ img bên trong đưa về display: inline-block.

<div class="img"><img src="picture.jpg"></div>
.img{
 text-align: center;
}
.img img {
 display: inline-block;
}

2) Gradient cho chữ.

Thuộc tính background-image sẽ tiếp nhận dải màu sắc. Sau đó -webkit-background-clip: text; sẽ được chỉ định ghép vào đoạn văn bản.

<p class="text">Gradient</p>
.text{
    color: #ffa400;
    font-size: 100px;
    font-weight: bold;
}
@supports (-webkit-background-clip: text){
    .text {
        color: transparent;
        background-image: linear-gradient(red, blue);
        -webkit-background-clip: text;
    }
}
  • Sử dụng @supports để trình duyệt kiểm tra thuộc tính css có hỗ được hỗ trợ hay không.

    • Nếu trình duyệt hỗ trợ sẽ thực thi ngay các thuộc tính ghi đè trước đó.

3) Font không hiển thị đúng.

Có những thẻ sẽ ghép theo đúng dạng font mà trình duyệt đã định sẵn, không thông qua thẻ body.

input,
button,
select,
textarea {
 font-family: "some font", sans-serif;
}

4) Image bị biến dạng.

Hình ảnh có kích thước vuông (chiều rộng = chiều cao) thì bức ảnh đó sẽ không có ảnh hưởng gì đến khả năng biến dạng.

Nhưng bức ảnh đó là hình chữ nhật (chiều rộng </> chiều cao) thì kích thước bị thay đổi, hiển thị sẽ không như ý muốn. Muốn xử lý trường hợp này thì dùng thuộc tính.

img {
    object-fit: cover;
}

5) Xử lý đoạn văn bản hoặc liên kết dài vượt quá độ dài quy định chứa nó.

Khi các đoạn văn bản vượt quá độ dài mà thẻ ngoài bao bọc chứa nó, lúc này giao diện sẽ hiển thị scroll ngang, nhưng bây giờ muốn các đoạn văn bản tự động xuống hàn thì phải làm như thế nào?

p{
    word-break: break-all;
}

adsdfadfsdfksasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdqweqwetryh5tr.8521479824571778415864123789465123845641254186748hgkdjxfhvgxcvjkbhdfgkljsdhfgkljdsfghdflkgjhdbjkcvbnxm,ncvbdfkjhjhjkh

6) Thay thế cách đặt chỉ số cho Border.

Khi các phần tử có chứa thuộc tính border với dòng code border: 1px solid #000, một vài trình duyệt sẽ bị mất đường viền ở bên trái hoặc ở phía dưới cùng, trương hợp này xử lý luôn luôn với 1px = thin.

.block {
    border: thin solid #000;
}

7) Hiển thị dấu ... khi nội dung quá dài.

Khi muốn hiện nội dung trên một hàng duy nhất và xuất hiện dấu (...) trong layout.

.text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Muốn hiển thị nội dung với nhiều hàng và xuất hiện dấu (...) trong layout.

.text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Số dòng muốn hiển thị = 3 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

8) Responsive video, iframe.

Các website cần có tính thích ứng khi gặp các loại màng hình với kích thước khác nhau. Video, iframe cũng phải thế.

<div>
    <ifame src="https://...">
</div>
div {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 khi đó 9/16=0.5625 */
    height: 0;
}

div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

(Còn nữa...)