Khối ba chiều hai màu và văn bản - Thủ thuật CSS

Anonim

Chúng ta có thể sử dụng nhiều text-shadowbox-shadowgiá trị để tạo giao diện ba chiều cho các khối hoặc văn bản, như ảnh chụp màn hình này về chân trang của David DeSandro. Tuy nhiên trong ví dụ đó, phần "ba dimesional" là một màu đồng nhất.

Bằng cách xen kẽ các màu qua lại theo "thứ tự xếp chồng" của khai báo bóng hộp hoặc văn bản của chúng tôi, chúng tôi có thể mô phỏng hiệu ứng ba chiều / ánh sáng nhiều hơn.

text-shadow: 1px 0px #eee, 0px 1px #ccc, 2px 1px #eee, 1px 2px #ccc, 3px 2px #eee, 2px 3px #ccc, 4px 3px #eee, 3px 4px #ccc, 5px 4px #eee, 4px 5px #ccc, 6px 5px #eee, 5px 6px #ccc, 7px 6px #eee, 6px 7px #ccc, 8px 7px #eee, 7px 8px #ccc, 8px 8px #eee;

Thí dụ