10 (Thêm) Thủ thuật CSS mà bạn có thể bỏ qua
Có rất nhiều đoạn CSS mà các nhà phát triển web có thể sử dụng để đạt được kết quả nhất định và sau đó có các thủ thuật CSS mà bạn có thể sử dụng cho những việc như sắp xếp nội dung theo chiều dọc. Với CSS là một thực thể không ngừng phát triển, hết lần này đến lần khác chúng ta vấp phải những thủ thuật CSS thú vị rất thú vị để biết.
Trong bài viết hôm nay, tôi sẽ giới thiệu cho bạn Thêm 10 thuộc tính và thủ thuật CSS mà bạn có thể không biết.
1. Viết theo chiều dọc
Có một thuộc tính CSS được gọi là chế độ viết chấp nhận một trong ba giá trị này; ngang-tb, dọc-rl và dọc-lr.
ngang-tb là mặc định và nó gây ra luồng văn bản ngang trái sang phải điển hình trong một phần tử.
Các theo chiều dọc-* tuy nhiên, các giá trị dành cho luồng khối dọc, khiến các trình duyệt được viết từ trên xuống dưới bởi các trình duyệt. Trong dọc-rl, các dòng mới được thêm vào bên trái của các dòng trước và ngược lại cho dọc-lr.
Điều này rất hữu ích cho hiển thị các ngôn ngữ như tiếng Trung và tiếng Nhật thường được viết từ trên xuống dưới và cả khi bạn muốn hiển thị văn bản theo chiều dọc để tiết kiệm không gian ngang, như trong các tiêu đề bảng.
Chú thích: Nếu bạn muốn kiểm soát các hướng của từng chữ cái, bạn có thể sử dụng hướng văn bản xoay chúng thẳng đứng hoặc sang một bên, như mong muốn.
-webkit-write-mode: dọc-rl; -ms-Writing-mode: tb-rl; chế độ viết: dọc-rl;
2. Tái sử dụng giá trị màu
Từ khóa màu hiện tại mang giá trị của màu thuộc tính và có thể được sử dụng trong các thuộc tính khác chấp nhận giá trị màu như lý lịch.
div nền: tuyến tính-gradient (90deg, currentColor 50%, đen 50%); Màu sắc: # FFD700; / * currentColor là # FFD700 * /
3. Trộn nền
Một phần tử có thể có nhiều nền (một màu nền và nhiều ảnh nền). Các chế độ trộn nền trộn tất cả chúng lại với nhau theo chế độ hòa trộn đã cho. Hiện tại có tổng cộng 16 chế độ pha trộn.
chế độ trộn nền: sự khác biệt;
4. Pha trộn các yếu tố
chế độ trộn-trộn pha trộn nội dung và nền của các yếu tố chồng chéo. Chrome dường như không hỗ trợ tất cả các chế độ mặc dù Firefox không.
mix-Blend-mode: màu sắc;
Tôi lấy hai yếu tố, một img hiển thị hình ảnh của một bông hồng và một khoảng với nền đồ họa, xếp chồng chúng và áp dụng một vài chế độ hòa trộn.
5. Bỏ qua các sự kiện con trỏ
Bạn có thể làm cho một phần tử không biết đến bất kỳ sự kiện con trỏ nào bằng cách sử dụng một thuộc tính duy nhất được gọi là sự kiện con trỏ. Bằng cách cho sự kiện con trỏ giá trị của không ai trong một phần tử, điều này ngăn nó trở thành mục tiêu cho các sự kiện con trỏ. Bao gồm hỗ trợ IE11 +.
Trong bản demo sau, có một hộp kiểm bên dưới hai hình ảnh xếp chồng lên nhau. Cả hai hình ảnh mang sự kiện con trỏ: không có, cho phép chúng tôi nhấp vào hộp kiểm chôn dưới chúng. Dựa trên trạng thái đã chọn của hộp kiểm, hình ảnh mong muốn được hiển thị trong khi hình khác bị ẩn.
6. Trang trí hộp chia
Thông thường khi một hộp được phân chia (như khi một phần tử nội tuyến chứng kiến ngắt dòng), các cạnh của các phần được phân tách không có bất kỳ kiểu hộp nào và trông bị cắt. Để tránh điều đó, bạn có thể sử dụng hộp-trang trí-phá vỡ: bản sao.
Bây giờ để làm theo điều đó với một ví dụ và lời nhắc nhở "Giáng sinh ở đường chân trời" sớm, đây là danh sách tuần lộc của ông già Noel được gõ trong một khoảng! Hồ! Hồ! Hồ!
chú thích: Mặc dù IE hiện đại không hỗ trợ hộp trang trí-phá vỡ, ở rìa của đường viền phần tách, kết xuất không mượt mà và nền trông có vẻ bị cắt. Nhưng nó làm cho bóng hộp độc đáo, đó là lý do tại sao tôi sử dụng bóng hộp cho cả viền và nền. Cũng không có phần đệm nằm ngang trong các cạnh trong IE mà bạn có thể muốn lấp đầy khoảng trắng.
7. Thu gọn các thành phần bảng
tầm nhìn: sụp đổ là một thuộc tính được tạo chỉ cho các thành phần bảng, như các hàng và cột. Nếu được sử dụng trên bất cứ thứ gì khác, nó sẽ hoạt động như tầm nhìn: ẩn. Chrome mặc dù đối xử với nó như thế nào ẩn ngay cả đối với các yếu tố bảng.
Khi bạn chỉ định tầm nhìn: sụp đổ trên một phần tử bảng, nó bị ẩn và không gian của nó được lấp đầy bởi nội dung gần đó - giống như cách nó hoạt động khi sử dụng không trưng bày thay thế.
Nhưng không thích không trưng bày Điều chỉnh bố cục bảng sau khi loại bỏ khoảng trắng, bố cục vẫn giữ nguyên trong tầm nhìn: sụp đổ. Bạn có thể thấy nó hoạt động chi tiết hơn ở đây.
8. Tạo cột
Bạn có thể tạo bố cục cột cho nội dung của mình bằng cách sử dụng cột thuộc tính. Nó cho phép bạn chỉ định có bao nhiêu cột (số cột) và cách mỗi chiều rộng cột (chiều rộng cột) sẽ được kết xuất trong một phần tử.
Nếu nội dung không phải là văn bản, ví dụ như hình ảnh, thì bạn sẽ phải ghi nhớ chiều rộng của nó tương ứng với cột. Ví dụ sau, tôi chỉ sử dụng số cột để chỉ định có bao nhiêu cột tôi muốn.
-webkit-cột-đếm: 2; -moz-cột-đếm: 2; đếm cột: 2;
9. Làm cho các yếu tố có thể thay đổi
Một phần tử có thể được thay đổi kích thước (theo chiều dọc, chiều ngang hoặc cả hai) với thuộc tính CSS3 thay đổi kích thước . Khả năng phục hồi trong một văn bản có thể bị vô hiệu hóa bằng cách sử dụng tương tự.
thay đổi kích thước: dọc; Thay đổi kích thước: ngang; thay đổi kích thước: cả hai; thay đổi kích thước: không có;
10. Tạo mẫu
Có thể có nhiều độ dốc CSS3 (cả tuyến tính & xuyên tâm) cho một phần tử và chúng có thể được xếp chồng lên nhau để tạo các mẫu. Điều này cho phép chúng tôi tạo nền đẹp cho các yếu tố mà không cần sử dụng hình ảnh bên ngoài. Làm cho nó hoạt động có thể đòi hỏi một chút thực hành mặc dù.
