# 066: Chụp ảnh chân trang, Phần 1 - Thủ thuật CSS

Anonim

Chúng tôi bắt tay vào cuộc hành trình tuyệt vời đó là chân! CSS-Tricks luôn có một footer lớn và đẹp mắt và thiết kế này cũng không ngoại lệ. Nó không hoàn toàn là vô cớ. Chúng tôi có rất nhiều thứ thực sự xứng đáng với ít nhất là một liên kết trên trang web (ví dụ: liên kết mạng xã hội, liên kết liên hệ, các dự án khác mà tôi đang làm, v.v.) và footer là một nơi hoàn hảo cho những thứ đó.

Chúng tôi kết hợp biểu tượng dấu hoa thị CSS-Tricks cổ điển ở dưới đó thay vì tiêu đề đủ bận. Nhưng trước tiên, chúng tôi thiết lập footer với một loại hiệu ứng bóng tối và đổ bóng để thiết lập nó khỏi khu vực trên cùng.

Cuối cùng, chúng tôi sử dụng hình dạng của dấu hoa thị làm mặt nạ để hiển thị ảnh của chính tôi bên dưới nó. Chúng tôi bôi đen và trắng ảnh của tôi và sử dụng công cụ của Photoshop để làm điều đó có thể tạo ra kết quả đen trắng đẹp hơn nhiều so với việc chỉ xóa thông tin màu sắc. Sau đó, chúng tôi áp dụng một bộ lọc ảnh có màu thương hiệu rất nặng lên trên cùng để mở rộng thương hiệu và tính nhất quán của thiết kế.