Đã bao giờ bạn nghĩ đến việc dùng các hàm trong CSS chưa? Thực tế CSS từ lâu đã cung cấp cho người dùng một số hàm cơ bản rất hữu ích. Với việc sử dụng linh động các hàm giúp cho các đoạn code CSS, HTML của chúng ta trở nên tối ưu hơn. Ngoài việc phải làm nhẹ hàm JavaScript ra, yếu tố dùng hàm CSS cũng giúp website tải nhanh hơn bởi sử dụng các version CSS mới nhất.

Dưới đây là một số hàm thông dụng của CSS.

1. Hàm calc

Hàm calc dùng để tính chiều rộng (width) của các thẻ dạng block như DIV, SECTION...

Cách dùng: width: calc(100% - 500px). Có thể sử dụng các phép toán cộng, trừ, nhân, chia (+, -, *, /)

Ví dụ:

Đây là nội dung của tôi.

Hàm calc chỉ sử dụng được cho thuộc tính width của CSS, không áp dụng cho các thuộc tính khác.

Trình duyệt hỗ trợ: Chrome, Internet Explorer / Edge, Safari, FireFox, Opera

2. Hàm attr

Hàm attr trả về giá trị của một thuộc tính của thẻ đang sử dụng.

Cách dùng: attr(tên thuộc tính)

Ví dụ:

Đây là nội dung của tôi.

Kết quả:

3. Hàm counter

Hàm counter dùng để tăng giá trị biến đếm lên 1 đơn vị hoặc đánh dấu theo dạng danh sách, thường dùng để đánh số thứ tự.

Cách dùng: counter(tên, kiểu)

Ví dụ:

Truyện Thủy Hử

Mở đầu
Hồi ký truyện
Giữa truyện hấp dẫn
Kết thúc

Kết quả:

Hoặc bạn có thể thay đổi kiểu counter giống như list-style-type của thẻ ul, ol như:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Cụ thể như sau, hãy chú ý đoạn code lower-alpha:

Truyện Thủy Hử

Mở đầu
Hồi ký truyện
Giữa truyện hấp dẫn
Kết thúc

Lúc này đánh dấu theo thứ tự a, b, c, d như hình dưới:

4. Hàm var

Hàm var dùng để gọi biến được định nghĩa trong thuộc tính :root, dùng cho việc định nghĩa màu, chia cột, padding... Giúp cho việc chỉ thay đổi duy nhất một chỗ, không phải tìm nhiều nơi trong CSS.

Cách dùng: var( biến )

Để gọi được hàm var, bạn cần phải khai báo các biến trong :root trước.

Ví dụ:

Truyện Thủy Hử

Mở đầu
Hồi ký truyện
Giữa truyện hấp dẫn
Kết thúc

Kết quả:

5. Hàm translate

Hàm translate được dùng cho thuộc tính transform, translate bao gồm translateX (theo trục ngang), translateY theo trục dọc. Translate được dùng khi cần dịch chuyển một thẻ HTML nào đó khỏi vị trí ban đầu.

Cách dùng: transform: translateX(30px); transform: translateY(30px); transform: translate(30px,30px);

Ví dụ:

Truyện Thủy Hử

Thẻ này translateX 100px
Thẻ này translateY 20px
Thẻ này translate(100px,20px)

Kết quả:

6. Hàm rotate

Hàm rotate được dùng cho thuộc tính transform, khi cần quay một thẻ HTML một góc nào đó (theo độ) cùng chiều kim đồng hồ, nếu muốn quay ngược chiều kim đồng hồ thì ta thêm dấu trừ phía trước.

Cách dùng: transform: rotate(90deg); transform: rotate(-90deg);

Ví dụ:

Một số hàm trong CSS: rotate

Quay mũi tên  1 góc 90 độ 

Kết quả:

7. Hàm scale

Hàm scale được dùng cho thuộc tính transform, scale bao gồm scaleX (theo trục ngang), scaleY theo trục dọc. Scale được dùng khi cần thu nhỏ hoặc phóng to một thẻ HTML, thường dùng để zoom hình ảnh. Đơn vị là phần trăm.

Cách dùng: transform: scaleX(0.8); transform: scaleY(0.8); transform: scale(0.1,0.9); transform: scale(1.1);

Ví dụ:

Một số hàm trong CSS: scale

Kết quả:

8. Hàm skew

Hàm skew được dùng cho thuộc tính transform, skew bao gồm skewX (theo trục ngang), skewY theo trục dọc. Skew được dùng khi cần làm nghiêng một thẻ HTML.

Cách dùng: skewX(-45deg) skewY(-45deg) skew(-45deg,90deg)

Ví dụ:

Một số hàm trong CSS: skew

Kết quả:

Tiếp tục cập nhật...