# 012: CSSing Header / Logo - Thủ thuật CSS

Anonim

Cho đến nay trang web thực tế trông không giống với thiết kế Photoshop của chúng tôi. Trong video màn hình này, chúng tôi chỉ làm điều đó, bắt đầu từ đầu với khu vực tiêu đề và biểu trưng của chúng tôi. Thật tuyệt khi có một chút khởi đầu “thực tế” về việc xây dựng trang web một cách trực quan.

Chúng tôi sử dụng Frank DeLoupe làm công cụ chọn màu, được tích hợp độc đáo với Photoshop (nó làm cho màu bạn chọn thành màu hoạt động trong Photoshop, cũng như được sao chép vào khay nhớ tạm của bạn).

Tại một thời điểm, chúng tôi thay đổi cấu hình Sass / Compass để biên dịch CSS :expanded thay vì :compressedđể xem CSS thực tế đang được tạo vì lý do gỡ lỗi.

Chúng ta phải sử dụng bộ não của mình một chút về cách mọi thứ sẽ được đặt và phản ứng với tính chất linh hoạt của cửa sổ trình duyệt. Ví dụ: nhật ký phải luôn chạm vào góc trên bên trái.

Chúng tôi thực hiện rất nhiều thao tác di chuyển xung quanh các giá trị để có được mọi thứ vừa phải, cũng như thêm các chi tiết nhỏ ở đây và ở đó để làm cho mọi thứ trông đẹp hơn, như thêm bóng nhẹ vào hiệu ứng xếp giấy.