Một Vài Thủ Thuật CSS Hay

Hôm nay, mình sẽ chia sẻ với các bạn về một vài thủ thuật CSS hay rất hữu ích trong quá trình phát triển Frontend.



1. Image rendering:
Thuộc tính này khá hữu ích trong việc hiển thị mã QR và các thumbnails, giúp tăng chất lượng ảnh của chúng.

img.QRcode { image-rendering: pixelated; }

2. Check empty:

Ẩn phần tử khi không có nội dung bên trong. Trả về khoảng trắng thay cho phần nội dung bị khuyết.

element:empty { display: none; }

3. Tạo độ cong cho 

text:p { shape-outside: polygon(0 0, 0 200px, 300px 600px); }
Thuộc tính này giúp phần content bao quanh bên ngoài sẽ có hình dạng cong.

4. Plain SVG như 

background:element { background-image: url('data:image/svg+xml;utf8,...'); }

Use như một css background mà không cần convert sang base64.

5. Vô hiệu hoá các tương tác:

[data-untouchable] { pointer-events: none; }
Vô hiệu hoá tất cả các tương tác của người dùng, thậm chí cả các sự kiện css chỉ bằng một thuộc tính.


6. Kiểm tra nếu input có giá trị:

.Note { opacity: 0; transition: opacity 200ms ease-out; } input:not(:placeholder-shown) + .Note { opacity: 1; }
Pseudo class này sẽ cho phép kiểm tra xem input có giá trị nào không.

7. Lặp lại gradients:

.RepeatLinear { background: repeating-linear-gradient( 45deg, lime, lime 10px, pink 10px, pink 20px ); } .RepeatRadial { background: repeating-conic-gradient( circle at 0 0, tomato, limegreen 50px ); }

Có thể sử dụng lặp lại gradient thay vì bị rối loạn với mixins.

8. Float dựa theo hướng:

img { float: inline-start; /* ...or inline-end */ }

Float một phần tử dựa theo hướng một văn bản

(right-to-left hoặc left-to-right)

9. Target mặc định đến một phần tử trong form:

input:default { opacity: 0.2; }

Target đến phần input mặc định được selected. Xem ví dụ

10. Import css khi cần:

@import url('portrait.css') screen and (orientation: portrait); 

Có thể import css theo cách trên như khi sử dụng trong thẻ .


11. Ngăn việc over-scroll:

.ScollingContent { overscroll-behavior: contain; }

Ngăn việc over-scroll khi scroll đến điểm cuối của phần tử.

---

NHÀ CUNG CẤP DỊCH VỤ CHUYÊN NGHIỆP PHÁT TRIỂN WEBDESIGN - HOSTING - DOMAIN Website: Phattrien.net - Phattrien.info - Trangvangdichvu.com - Trangvangmuaban.com Hotline: 0931 435 998 Zalo: @PhatTriennet CỬA HÀNG CAMERA Chuyên: Camera IP WiFi, Camera IP, Camera CVI, Camera AHD, Camera Analog, Đầu ghi Camera, Máy Bộ Đàm, Bộ camera quan sát Địa chỉ: 537 Đường Phan Văn Trị, P.Kim Dinh, Tp. Bà Rịa, BR-VT Hotline: 0931 435 998 Zalo: @WinTech Website: CuaHangCamera.com - CửaHàngCamera.vn - Nhaphanphoicamera.net - CareCam.Pro