CSS User Interface properties
TIL
612
CSS3
52
White

Tấn Huy viết ngày 04/08/2018

Trong bài này mình sẽ nói về hai property của CSS user interface đó là resizeoutline-offset. Trước khi đi vào hai property thì chúng ta cần biết trình duyệt nào có hỗ trợ nó và trình duyệt nào không và cũng như là về các phiên bản hỗ trợ.
alt text

Resize property

Nói nôm na thì resize dùng để giúp người dùng có thể điều chỉnh kích thước của một element (kéo rộng ra hay kéo dài ra hoặc cả hai). Đây là một demo cho resize:

Như đã thấy ở trên, đó chính là công dụng của resize. Trong resizechúng ta sẽ có 4 giá trị chính đó là horizontal, vertical,bothnone. (ngoài ra còn inherit là thừa kết từ parent element)

resize:horizontal

horizontal dùng để cho phép người dùng thay đổi kích thước của element, tuy nhiên chỉ cho phép thay đổi kích thước theo chiều ngang.

div#resize2{
    resize:horizontal;
    overflow:auto;
}

resize:vertical

vertical cũng dùng để thay đổi kích thước của element nhưng ngược lại với horizontal nó chỉ cho phép thay đổi kích thước theo chiều dọc.

div#resize3{
    resize:vertical;
    overflow:auto;
}

resize:both

Cái này cho phép người dùng thay đổi kích thước cả chiều ngang lẫn chiều dọc và nó cũng chính là ví dụ ở đầu bài.

resize:none

Như cái tên, nó dùng để loại bỏ một "sự có thể resize" của một element, bình thường thì đa số các element không thể resize tuy nhiên có một số trường hợp như textarea là có. Nếu như ta tạo một textarea bình thường như sau:

<form>
    <textarea>Viết đại cái gì đó..</textarea>
</form>

Thì chúng ta sẽ được một khung textarea và có phần resize ở góc dưới bên phải (mặc định luôn)
alt text
Và nếu ta muốn chỉnh lại textarea đẹp hơn và không muốn giữ cái resize đó mà ta đặt mặc định kích thước luôn cho nó thì ta dùng resize:none. Ví dụ như sau:

textarea{
    height:300px;
    width:500px;
    background-color:#1abc9c;
    font-family:verdana;
    border:2px solid black;
    resize:none;
}

Và kết quả nó đã mất đi phần resize:
alt text

Note:Có một điều cần lưu ý là khi sử dùng các giá trị horizontal, vertical và both thì chúng ta phải nhớ đặt vào đó overflow:auto thì element đó mới có thể resize được.

Outline-offset property

outline-offset chỉ đơn giản là tạo ra khoảng trống ngăn cách giữa outline và các cạnh của border. Bên lề, sự khác nhau giữa outlineborder ở 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.

Đây là một outline bình thường (đường nét đứt màu đỏ):
alt text
Sau khi ta dùng outline-offset giãn nó ra như sau:

div{
    ........./*phần CSS trước tạo ra hình ở trên*/
    outline-offset:10px;
}

Kết quả:
alt text
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ụ:
alt text

Link thảm khảo

Nơi thảm khảo quen thuộc :heart_eyes: w3school - CSS User Interface

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
6 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
11 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 2 tháng trước
11 2
White
4 0
1. Website layouts Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là: Header: Tiêu đ...
Tấn Huy viết 2 tháng trước
4 0
White
4 0
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 22 ngày trước
4 0
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 2 tháng trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
6 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!