CSS3 15 – User Interface trong CSS3

0
86

Xin chào các bạn, bài hôm nay, mình sẽ giới thiệu cho các bạn thuộc tính User Interface trong CSS3, cho phép các bạn thay đổi bất kỳ phần tử nào vào 1 trong các phần tử user interface chuẩn.

Bảng dưới liệt kê 1 số thuộc tính thường được sử dụng trong User Interface trong CSS3:

Giá trịMiêu tả
appearanceCho phép người dùng làm cho các phần tử như là các phần tử UI
box-sizingCho phép người dùng cố định các phần tử trên một khu vực
iconĐược sử dụng để cung cấp Icon trên một khu vực
resizeĐược sử dụng để resize kích cỡ của phần tử trên một khu vực
outline-offsetĐược sử dụng để vẽ đằng sau Outline
nav-downĐược sử dụng để di chuyển xuống khi người dùng nhấn nút mũi tên trỏ xuống trên bàn phím
nav-leftĐược sử dụng để di chuyển sang trái khi người dùng nhấn nút mũi tên trỏ sang trái trên bàn phím
nav-rightĐược sử dụng để di chuyển sang phải khi người dùng nhấn nút mũi tên trỏ sang phải trên bàn phím
nav-upĐược sử dụng để di chuyển lên khi người dùng nhấn nút mũi tên trỏ lên trên bàn phím

Chú ý: Thuộc tính Resize và outline-offset là các thuộc tính quan trọng nhất của giao diện người dùng CSS.

Sau đây mình sẽ đi vào 1 vài ví dụ với 1 vài thuộc tính kể ở bảng trên để các bạn hiểu hơn về User Interface và tác dụng của chúng. Nếu muốn tìm hiểu sâu hơn thì các bạn cần phải làm từng ví dụ cụ thể với tất cả các thuộc tính trên nhé.

Thuộc tính resize trong CSS3

Thuộc tính resize có 3 giá trị thường được sử dụng là:

  • horizontal: để thay đổi kích cỡ chiều rộng của một phần tử
  • vertical: để thay đổi kích cỡ chiều cao của một phần tử
  • both (horizontal & vertical): để thay đổi kích cỡ chiều rộng và chiều cao của một phần tử

Ví dụ sử dụng giá trị both trong thuộc tính resize trong CSS3 UI như sau:

Thuộc tính outline-offset trong CSS3

Outline nghĩa là vẽ một đường bên ngoài đường viền bao quanh phần tử. Thuộc tính outline-offset được sử dụng để thêm khoảng cách giữa đường viền với phần tử chứa nội dung.

Sự khác nhau giữa outline và border ở những điểm sau (cho chúng ta không nhầm lẫn giữa hai cái vì thoạt nhìn nó cũng có công dụng na ná):

  • Thứ nhất, outline và viền vòng quanh element và nằm phía bên ngoài của border
  • Thứ hai, outline không chiếm khoảng trống như border, nếu đó được giãn ra quá rộng thì nó sẽ đè lên text của chúng ta luôn.

Như đã nói ở trên, outline không chiếm khoảng trống, nên nếu ta chỉnh outline-offset quá lớn thì nó sẽ đè lên text của chúng ta luôn. Ví dụ:

User Interface trong CSS3

Ví dụ sau minh họa cách sử dụng thuộc tính outline-offset trong CSS3:

Trình duyệt hỗ trợ

Thuộc tínhChrome IE Firefox Safari Opera
resize4.0Không hỗ trợ5.04.0 -moz-15.04.0
outline-offset4.0Không hỗ trợ5.04.0 -moz-9.54.0

Kết luận

Như vậy là mình đã giới thiệu xong cho các bạn về CSS3 User Interface rồi, nó sẽ giúp các bạn thay đổi kích thước các thành phần, phần tử HTML trên website. Hẹn các bạn trong các bài học tiếp theo nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây