Ý tưởng ở đây là tưởng tượng ba lớp xếp chồng lên nhau, trong đó lớp trên cùng được sử dụng để cắt một hình dạng trong lớp thứ hai để hiển thị lớp thứ ba.
Nếu văn bản ở lớp trên cùng của sơ đồ trên là hình dạng mà chúng ta đang cắt ra khỏi lớp thứ hai, thì hình ảnh sau đây minh họa khái niệm văn bản loại trực tiếp.
Đoạn mã SVG
Đây là đoạn mã thiết lập lớp dưới cùng ( .knockout) mà văn bản loại trực tiếp sẽ hiển thị, lớp giữa ( .knockout-text-bg) mà chúng ta đang cắt bỏ và lớp trên cùng ( .knockout-text) chứa văn bản SVG sẽ hoạt động như một mặt nạ để cắt ra lớp thứ hai.
Knock Out Text Các tọa độ là hoàn toàn tùy ý trong ví dụ này và có thể được điều chỉnh để phù hợp với kích thước thực tế và vị trí của văn bản được thêm vào.
Lưu ý rằng filllớp thứ hai là màu đen và filllớp trên cùng là màu trắng. Đó là cách mặt nạ hoạt động: màu trắng là sự tương phản hoàn hảo với màu đen và sẽ ẩn các phần màu đen. Chúng ta có thể làm cho lớp trên cùng có một màu hoàn toàn khác và nó sẽ không hoàn toàn che đi màu đen, nhưng cho phép một số trong số đó lọt qua.
Tạo kiểu CSS
Phần còn lại là tạo kiểu CSS. Ví dụ: chúng ta có thể thêm một gradient nền vào lớp dưới cùng và thiết lập kích thước phông chữ để có thêm hiệu ứng ấn tượng.
.knockout ( /* Ensure the bottom layer is full screen */ height: 100vh; width: 100%; /* Add a colorful texture and cutom font-styling */ background-image: linear-gradient(to left, #ff4e50 , #f9d423); text-transform: uppercase; ) /* Knockout text font sizing for each line */ text:nth-child(2) ( font-size: 5em; ) text:nth-child(3) ( font-size: 5.1em; ) text:nth-child(4) ( font-size: 15em; )Xem Pen SVG Knock Out Text của Geoff Graham (@geoffgraham) trên CodePen.