Những điều rút ra từ CSS của thiết kế Facebook mới

 (ishadeed.com)
4 điểm bởi xguru 2020-04-03 | 4 bình luận | Chia sẻ qua WhatsApp

  • Dùng SVG cho Avatar để xử lý đổ bóng bên trong

  • Dùng div spacer thay cho margin

  • Áp dụng bộ lọc CSS cho hình ảnh

  • Dùng ảnh đổ bóng (2x14 px) thay vì box-shadow

  • Sử dụng nhiều biến CSS

  • Dùng Line Clamp để giới hạn số dòng cho văn bản nhiều dòng

  • Dùng .hover-div thay vì :hover

  • Tạo nền gradient động từ màu chủ đạo

  • Đổ bóng hộp nhiều lớp

Bài viết liên quan

4 bình luận

 
sduck4 2020-04-03

Dạo này có vẻ bạn cũng học khá nhiều về mảng thiết kế nhỉ. Thiết kế của GeekNews ngày càng được cải thiện.

Hôm nay hình như phông chữ đã được thay đổi.
 
xguru 2020-04-03

Chưa đến mức gọi là nghiên cứu.. haha

Tôi vốn định tránh dùng web font nếu có thể, nhưng vì font tiếng Hàn trên môi trường Windows quá xấu nên cuối cùng cũng đành đầu hàng và chuyển sang Noto Sans.
 
xguru 2020-04-03

Có vài chỗ khiến mình tự hỏi sao họ lại làm vậy, nhưng nhìn chung có khá nhiều thứ để tham khảo.

Chắc phải thử áp dụng Line Clamp xem sao.
 
xguru 2020-04-03

Để xử lý hình ảnh, có chỗ cần chỉ hiển thị một số dòng nhất định thì line-clamp đúng là quá chuẩn. Tôi rất thích.

Không thể hoạt động riêng lẻ, mà phải đi kèm với overflow: hidden.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;