Web Design

Material Design CSS Bài 3: Overflow menu, checkbox, radio inputs

Trong bài hướng dẫn này, chúng ta sẽ tìm cách “tự chế” các overflow menu, checkbox và radio inputs sao cho giống phong cách Material Design. Và một lần nữa, đây chỉ là cách “làm giả” chứ không phải là hướng dẫn chính thức của Google, thích hợp cho các trang web nhỏ, đơn giản và dễ duy trì. Nếu bạn muốn dùng hàng “chính chủ”, hãy tham khảo thư viện mã nguồn mở của Google.

MD

8. Checkbox và radio inputs:

Việc làm các checkbox và radio inputs không có gì quá phức tạp. Tuy nhiên, để “xì tai” hóa chúng cho đẹp là điều mà những người muốn thiết kế web cho đẹp đều phải tính tới, chứ ít ai dùng những style mặc định của chúng cả, dù người viết có theo hướng Material Design hay không. Tất nhiên, có khá nhiều thư viện hỗ trợ trên GitHub về các checkbox cũng như radio inputs theo phong cách MD, nhưng bạn cũng có thể tải các tập tin ảnh tĩnh về hai loại inputs trên cùng các Material Design icons khác ở tại https://materialdesignicons.com/, và áp dụng style cho chúng theo cách đơn giản nhất có thể: Bạn cho ẩn những cái checkbox và radio mặc định của HTML đi và thay các biểu tượng mới của bạn vào. Chẳng hạn:

Và bạn có thể làm tương tự đối với các checkboxes, cũng như thêm một số hiệu ứng khi con trỏ rê vào các checkboxes hay radio buttons, v.v… Bạn có thể thay đổi màu sắc hoặc tự thiết kế lại, biến tấu lại các icons mẫu kia để làm cho trang web của bạn đẹp hơn, thu hút hơn. Nhưng bạn cũng cần lưu ý một điều: Màu của checkbox và radio inputs khi được checked phải là màu accent hoặc chí ít cũng là màu primary chứ không nên sử dụng quá nhiều màu sắc tương phản quá mức gây khó chịu cho người xem.

9. Overflow menu:

Overflow menu là điều vô cùng quen thuộc khi bạn làm ứng dụng cho Android, và với các ứng dụng web, nếu bạn muốn áp dụng phong cách MD thì cũng hay gặp. Ở phần này, mặc dù cùng đều là “nhái” MD nhưng cũng có một số quan điểm khác nhau. Tất nhiên, cái nào mà bạn cảm thấy thích hợp nhất cho bản thân thì nên dùng. Riêng với tôi, thì tôi cũng coi các overflow menu là một card, với các options là các thẻ <li>. Chẳng hạn:

Và việc quan trọng nhất là position nó. Nó nằm ở vị trí nào trên trang? Cũng như Android, nó nằm ở toolbar nên nếu position của toolbar là absolute, sticky hay static thì position của overflow-menu cũng phải tương tự như vậy. Nếu bạn kết hợp với các animation như zoom hay translate thì mọi thứ nhìn sẽ sinh động hơn nhiều. Chúc các bạn thành công.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.