Web Design

Material Design CSS Bài 1: Nền, giao diện card và hiệu ứng đổ bóng

Nếu bạn đã đọc qua bài trước, thì đã có cái nhìn khá tổng quan về Material Design. Ngoài việc có thể áp dụng vào ứng dụng Android và iOS, Material Design còn có thể được sử dụng để làm Web nữa. Thực tế thì Google có cung cấp Polymer để bạn dùng xây dựng Web theo ngôn ngữ Material Design, và điều tuyệt vời nhất chính là bạn không cần viết CSS, mọi thứ đã được thực hiện sẵn trong nền cho bạn. Tuy nhiên, trong trường hợp bạn làm một trang Web, dù là trang nội dung thuần hay có hướng ứng dụng, có quy mô nhỏ, chủ yếu viết bằng HTML, thì bạn có thể dùng CSS để “Material Design hóa” giao diện mà không cần dùng Polymer. Loạt bài này được thực hiện dưới mục đích đó.

MD

Yêu cầu của loạt bài này là bạn phải có kiến thức, chí ít cũng là cơ bản, về HTML và CSS, chứ không hướng tới đối tượng “mới học”. Vì vậy, nếu bạn chưa biết gì về HTML, CSS và JS, bạn vui lòng “tu luyện” ở các trung tâm, YouTube hay w3school.com trước. Còn nếu bạn đã có đủ kiến thức rồi thì xin mời bạn đọc tiếp. Hãy mở trang https://material.io/guidelines/material-design/introduction.html#introduction-principles trong một tab mới để dễ dàng theo dõi.

1. Màu nền (background):

Tất nhiên, điều này cũng không quá gò bó. Như tôi đã nói trong bài trước, quan trọng là sự tiếp nhận của người dùng hơn là việc bạn đã tuân thủ được bao nhiêu tiêu chuẩn của MD. Giống như Android, thì bạn cũng có hai lựa chọn về nền: Nền tối, và nền sáng. Google đưa ra các gợi ý tại https://material.io/guidelines/style/color.html#color-themes và nhiệm vụ của bạn chỉ là cóp pát các mã màu đem gán cho các elements là được. Về phần này, tôi sẽ dừng ở đây vì nó quá cơ bản.

Tuy nhiên, nếu bạn có sử dụng card (bên dưới) thì tốt nhất, màu nền đừng nên để là #FFFFFF nếu bạn dùng nền sáng. Thay vào đó, bạn cho nó hơi xám một chút, chẳng hạn #F5F5F5, thì mỗi card sẽ nổi bật hơn nhiều, và người dùng sẽ ít bị phân tâm khi nhìn vào trang web của bạn. Tuy nhiên, mọi thứ cũng mang tính tương đối thôi. Bạn dùng màu gì mà bản thân bạn thấy vừa mắt, hợp lí, thì cứ thoải mái mà dùng.

2. Giao diện card:

Trên trang color-themes vừa rồi, bạn hãy để ý cái element số 4. Nó chính là một thẻ (card). Không dừng lại ở việc được dùng làm Dialog, các cards còn được sử dụng để làm mỗi item trong một danh sách, tức là mỗi tag <li> nằm bên trong <ul> hoặc <ol>, hay nó là hẳn một division với thẻ <div>. Dù là gì, thì giao diện card rất phổ biến và là một nét đặc trưng trong ngôn ngữ Material Design mà các ngôn ngữ khác như Metro hay Aqua đều không có hoặc không đẹp bằng.

Thực tế thì việc dùng nền tối cho card sẽ không có lí cho lắm, đặc biệt là dùng trên máy tính. Nên nếu có thể thì bạn nên dùng card trắng trên nền tối thì sẽ hay hơn. Tuy nhiên, một lần nữa, mọi thứ còn phụ thuộc vào ý tưởng của bạn, nên nếu bạn thấy nền card tối đúng đắn hơn thì đừng bận tâm tới dòng bên trên, cứ triển khai vô tư.

Material Design Cards
Material Design Cards

Một điều tương đối quan trọng là bạn không sử dụng border cho các card, thay vào đó là sử dụng bóng (shadow) mà tôi sẽ nói bên dưới, để phân định “ranh giới” của các cards và các elements khác. Một điều quan trọng khác là bạn tuyệt đối không sử dụng gradient cho các card. Màu nền của card phải là solid hoàn toàn, và phải tương phản với các chữ, ví dụ nền đậm thì chữ phải nhạt, và ngược lại. Đương nhiên rồi, nếu màu nền gần giống màu chữ thì ai mà đọc cho được!

Material Design Cards
Material Design Cards

Các border-radius của các card nên để mặc định là 0 (không), hoặc nếu muốn bo một chút cho mềm mại thì chỉ vài ba pixels mà thôi. Bạn tránh truyền số lượng pixels lớn hay dùng %, vì mỗi card là một sự thể hiện của một mảnh giấy vuông vức, nên việc bo tròn quá mức sẽ làm mất chất MD đi đáng kể.

3. Bóng (shadow):

Đổ bóng cũng là một hiệu ứng mang tính nổi bật và khác biệt của MD. Nó thể hiện sự phân tầng trong các lớp giao diện. Các thành phần trong MD đều phẳng, nhưng chúng không nằm chung trong một mặt phẳng như Metro/Modern hay Aqua. Vì chịu ảnh hưởng của ánh sáng, phần bóng đối với các elements khác độ cao (elevation) cũng khác nhau. Đối tượng nằm ở tầng trên, không những che khuất (clip) các đối tượng ở tầng bên dưới, mà bóng của chúng cũng rộng hơn.

Về sau thì các ngôn ngữ thiết kế khác như Modern và Aqua cũng có sử dụng shadow. Tuy nhiên, shadow của MD mang tính đặc trưng và rõ rệt cũng như được ứng dụng rộng rãi hơn nhiều so với shadow của Modern và Aqua.

Nếu bạn dùng thuộc tính android.support.v7.cardview:cardElevation hay CardView#setCardElevation(float elevation) trên Android, thì với HTML/CSS, bạn sẽ dùng thuộc tính là box-shadow, với nội dung của nó là:

Trong đó, horizontal_shadow nghĩa là độ dài bóng theo chiều ngang, vertical_shadow là độ dài bóng theo chiều dọc, blur là độ mờ tính từ trung tâm ra, spread là kích thước và shadow_color là màu bóng. Trong tuyệt đại đa số trường hợp thì bóng là màu xám, hoặc đen. Elevation của một element càng cao, thì bóng của nó càng lớn. Đặc biệt, bạn có thể kết hợp với hover event để làm giao diện trở nên sinh động hơn, chẳng hạn khi rê chuột lại một đối tượng thì elevation của nó sẽ tăng, tạo cảm giác cái item đang được chọn được đẩy cao lên qua việc bóng của nó trở nên đậm và rộng hơn. Ví dụ:

Khi sử dụng Javascript, thì bạn sẽ gọi style từ đối tượng. Chẳng hạn:

Bây giờ là lúc bạn thực hành, làm một mớ card với hiệu ứng shadow như trên, nhưng với thông số của bạn để có cái nhìn cụ thể hơn. Tuy nhiên, như tôi đã nói, đây chỉ là việc bạn vận dụng CSS thuần để thiết kế trang web đơn giản của bạn sao cho giống với phong cách Material Design. Đối với những trang web phức tạp, mang tính “web app” hơn thì bạn nên sử dụng các công cụ khác, chẳng hạn như Angular Material nếu bạn đang viết web bằng Angular, như vậy sẽ đỡ phải thiết lập từng đối tượng.

Sang bài tiếp theo, tôi sẽ giới thiệu về Toolbar cũng như phần Input. 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.