Web Design

Material Design CSS Bài 2: Toolbar và Input

Sau phần đầu tiên về background, card và shadow, hôm nay chúng ta tiếp tục “style” các HTML elements theo phong cách Material Design “manually – thủ công”. Lưu ý là chúng ta đang cố gắng viết CSS từ mức độ “chưa có gì” (from scratch), và mục đích là áp dụng cho các trang web đơn giản, và không yêu cầu phải tuân thủ đầy đủ tiêu chuẩn MD. Nếu bạn đang làm một web app phức tạp và được sếp yêu cầu phải “giống hoàn toàn như Google” thì bạn nên sử dụng Polymer hoặc Material Angular, các HTML elements đã được “xì tai” sẵn và bạn chỉ cần lấy ra dùng thôi, vừa tiết kiệm được thời gian ngồi viết CSS, vừa khỏi “xoắn não”.

MD

4. Toolbar

Việc làm một division hay một navigation làm Toolbar khi viết HTML là điều vô cùng dễ dàng và không có gì bàn cãi. Tuy nhiên, ở đây bạn phải lưu ý một chút về các elements bên trong nó, chẳng hạn như phần Title và các icons bên trong nó. Theo tiêu chuẩn Material Design, phần title luôn nằm bên trái và sát cạnh cửa sổ, còn các icons được bố trí từ bên phải sang, tương tự như Toolbar trên Android vậy. Và cũng như Android, nếu màu nền của Toolbar là tối thì màu chữ phải tương phản lại, sẽ có màu trắng, còn khi màu nền Toolbar sáng thì chữ nên là màu đen, hoặc là màu chính cho dễ nhìn. Vd trong ảnh minh họa bên trên thì màu chữ của tôi là trắng, trên nền đỏ cam.

Kiểu chữ trên Toolbar nên là bold, còn nếu bạn dùng regular thì kích thước Toolbar nên lớn một chút. Phần width của Toolbar nên chiếm hết phần width của toàn bộ phần nội dung, trong khi height ít nhất cũng là 48px. Tất nhiên, bạn nên dùng box-shadow ở đây để nâng elevation của Toolbar lên cao một chút. Nếu height của Toolbar là 48px, thì height của title và các toolbar icons sẽ nên là 24px, tức là padding-bottom và padding-top của Toolbar sẽ là 12px. Tất nhiên, cũng có thể bạn sẽ thay đổi, gia tăng hoặc gia giảm sao cho trang web của mình nhìn đẹp mắt, tuy nhiên khoảng tăng giảm theo ý bạn cũng không vượt quá tiêu chuẩn mà tôi đã nói. Các padding-left và padding-right tương ứng là 24px.

Tất nhiên, nếu không có cái hamburger icon (tức icon 3 sọc ngang) thì Title sẽ bắt đầu từ vị trí sát bên trái và cách ra 24px theo padding-left.

Việc sử dụng animation khi con trỏ tiến lại gần các toolbar icons là điều được khuyến khích. Các toolbar icons là images dạng .PNG hoặc nếu có thể thì nên dùng <svg> với các paths để tránh ảnh bị vỡ trên các màn hình có chỉ số PPI (pixel-per-inch) thấp. Giả sử như Toolbar của tôi có id=’toolbar’ và các icons là imgs, thì tôi có thể style như sau:

Để Toolbar không “chạy tùm lum” thì bạn có thể dùng position cho nó với giá trị là sticky hoặc fixed tùy ý bạn. Còn về các icons và title, bạn nên hạn chế dùng float nhất có thể, Thay vào đó nên dùng absolute position và dùng right để dễ kiểm soát hơn.

5. Input trong Toolbar (tức search box)

Ở đây, tôi dùng input để làm SearchBox trong Toolbar. Đối với các thiết bị Android, SearchView sẽ nằm trong Toolbar và được kích hoạt khi người dùng nhấn vào search icon hình kính lúp. Tuy nhiên, đối với làm web thì SearchBox luôn phải được hiển thị trừ khi chiều rộng màn hình thiết bị không cho phép, chẳng hạn khi người dùng xem trang web của bạn bằng điện thoại. Lúc này bạn có 2 hướng: Hoặc cho Toolbar ẩn đi và cho nó hiện khi người dùng nhấn nút Tìm kiếm, hoặc vẫn giữ chiều dài nó, nhưng cho ẩn bớt các icons trên Toolbar đi. Tức là nếu chiều dài cửa sổ là đủ thì bạn nên cho hiện SearchBox.

Dù bạn đặt SearchBox ở đâu, thì bạn cũng nên có một placeholder cho cái input của bạn với ý nghĩa “Tìm kiếm” để người dùng biết đó là khung tìm kiếm. Màu của SearchBox nên nổi bật hơn so với màu của Toolbar để người xem dễ nhận diện. Về kích thước, thì phần height nên là 40px nếu kích thước Toolbar là 48px. Tuy nhiên, một lần nữa, các kích thước còn tùy vào cách thiết kế của bạn. Bạn làm sao thấy đẹp, ưng ý nhất thì cứ publish luôn. Nhưng quan trọng hơn hết là SearchBox nên có màu solid và nên hoặc có border đầy đủ, hoặc là hoàn toàn không có border.

6. Input nhập liệu

Ở đây thì có hai trường hợp. Đầu tiên là bạn muốn cái input của bạn giống như EditText của Android hay phần nhập mật khẩu của Google Auth, có cái gạch bên dưới. Để làm “giả” Material Design trong trường hợp này, bạn chỉ cần cho cái border-bottom là được. Chẳng hạn:

Tất nhiên, bạn cũng cần phải tùy biến lại màu của placeholder nếu cần thiết. Còn đối với input dạng “trống trải”, thì bạn tắt hết borders là xong. Đối với các trường hợp khác theo ý muốn của bạn, thì bạn cũng có thể style theo cách tương tự. Chẳng hạn, bình thường thì cái border là màu xám, nhưng khi con trỏ nhảy tới nó thì nó sẽ chuyển sang màu khác.

Như vậy, chúng ta đã có thể style thêm một số HTML elements theo hướng Material Design chỉ với CSS đơn giản. Tất nhiên, trong quá trình làm việc, thao tác, bạn sẽ có thể sẽ rút ra rất nhiều khi nghiệm, để vừa có thể style đẹp hơn, giống MD hơn mà lại bớt đi phần code đáng kể. Chúc các bạn code vui vẻ.

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.