Mẹo CSS

Tổng hợp những mẹo ít thấy trong các tutorial khác

• Hiệu ứng gõ chữ (con trỏ nhấp nháy)

• Bộ lọc drop-shadow()

• scroll-behavior: smooth; cuộn mượt

• Căn giữa

• Con trỏ ảnh/emoji

• Cắt ngắn văn bản

• -webkit-line-clamp: cắt văn bản theo số dòng cụ thể

• ::selection

• resize: both; cho phép thay đổi kích thước mọi thứ

• Tạo modal bằng :target

• calc()

• Bộ chọn :empty

• Thanh cuộn tùy chỉnh

• position: sticky;

• CSS Scroll Snap

• Tooltip động dùng attr()

• Đổi màu con trỏ bằng caret-color

• ::in-range, ::out-of-range

• Dùng background-clip để tạo chữ tiêu đề với nền đẹp mắt

[alstjr7375]

Hiệu ứng gõ phím là thứ mình chưa biết, nhưng khá hữu ích.

[xguru]

Dạo này căn giữa trong bài viết thì là 3 dòng.. nhưng hóa ra cũng làm được chỉ với 2 dòng như thế này.

.center {

  display: grid;

  place-items: center;

}