Một số hàm CSS nâng cao trong thiết kế Website

Đã bao giờ bạn nghĩ đến việc dùng các hàm trong CSS chưa (Css Function). 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 chúng ta tối ưu. 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.

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

1. Hàm calc

Function 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ụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ padding:50px 0; margin:0; background: #ccc; }
    #my-sec-container{ 
        width:calc(100% - 500px);
        background:#888;
        color:#fff;
        padding:20px;
    }
</style>

<body>
    <section id="my-sec-container">
    	<div>Đây là nội dung của tôi.</div>
    </section>
</body>
</html>

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

Function 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ụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ padding:50px 0; margin:0; background: #ccc; }
    #my-sec-container{ 
        background:#888;
        color:#fff;
        padding:20px;
        position:relative;
    }
    #my-sec-container:after{
        content: " (" attr(data-label) ")";
        opacity: 0;
        position: absolute;
        top: -23px;
        left: 156px;
        background: #000;
        padding: 2px 10px;
        transition:all .5s;
    }
    #my-sec-container:hover:after{
        opacity:1;
    }
</style>

<body>
    <section id="my-sec-container" data-label="Đây là nhãn">
    	<div>Đây là nội dung của tôi.</div>
    </section>
</body>
</html>

Kết quả:

3. Hàm counter

Function 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ụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ counter-reset: mycounter; background:#ddd; }
    section.ss h2:before{
        counter-increment: mycounter;
  		content: "Chương " counter(mycounter) ": ";
    }
</style>

<body>
    <h1>Truyện Thủy Hử</h1>
    <section class="ss">
    	<h2>Mở đầu</h2>
        <h2>Hồi ký truyện</h2>
        <h2>Giữa truyện hấp dẫn</h2>
        <h2>Kết thúc</h2>
    </section>
</body>
</html>

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 content: "Chương " counter(mycounter, lower-alpha) ": ";

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ counter-reset: mycounter; background:#ddd; }
    section.ss h2:before{
        counter-increment: mycounter;
  		content: "Chương " counter(mycounter, lower-alpha) ": ";
    }
</style>

<body>
    <h1>Truyện Thủy Hử</h1>
    <section class="ss">
    	<h2>Mở đầu</h2>
        <h2>Hồi ký truyện</h2>
        <h2>Giữa truyện hấp dẫn</h2>
        <h2>Kết thúc</h2>
    </section>
</body>
</html>

Lúc này đánh dấu theo thứ tự 1, 2, 3, 4 được thay thế bằng a, b, c, d như hình dưới.

4. Hàm var

Function 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.

:root {
  --my-bg: #ccc;
  --my-color: blue;
  --my-padding: 15px;
}

Chú ý bạn phải dùng chuẩn cấu trúc gồm –ten-bien (nếu dùng 1 dấu – hoặc 3 — sẽ bị sai)

Ví dụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    :root { --my-bg: #ccc; --my-color: blue; --my-padding: 15px; }
    body{ 
        background:var(--my-bg); 
    }
    section.ss h2{
        color:var(--my-color);
        padding:var(--my-padding);
    }
</style>

<body>
    <h1>Truyện Thủy Hử</h1>
    <section class="ss">
    	<h2>Mở đầu</h2>
        <h2>Hồi ký truyện</h2>
        <h2>Giữa truyện hấp dẫn</h2>
        <h2>Kết thúc</h2>
    </section>
</body>
</html>

Kết quả:

5. Hàm translate

Function 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ụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ 
        background:#ccc; 
    }
    section.ss{
        border-left:2px solid #fff;
    }
    section.ss #tag1{
        transform:translateX(100px); 
    }
    section.ss #tag2{
        transform:translateY(20px); 
    }
    section.ss #tag3{
        transform:translate(100px,20px); 
    }
</style>

<body>
    <h1>Truyện Thủy Hử</h1>
    <section class="ss">
    	<h2 id="tag1">Thẻ này translateX 100px</h2>
        <h2 id="tag2">Thẻ này translateY 20px</h2>
        <h2 id="tag3">Thẻ này translate(100px,20px)</h2>
    </section>
</body>
</html>

Kết quả:

6. Hàm rotate

Function rotate được dùng cho thuộc tính transform, khi cần quay một thẻ html bao nhiêu độ (deg) 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ụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ 
        background:#ccc; 
    }
    a{
        text-decoration:none;
    }
    .ss > a.rotate{
        transform:rotate(90deg);
        display: inline-block;
    }
</style>

<body>
    <h1>Một số hàm trong Css: rotate</h1>
    <section class="ss">
    	Quay mũi tên <a href="#">></a> 1 góc 90 độ <a class="rotate" href="#">></a>
    </section>
</body>
</html>

Kết quả:

7. Hàm scale

Function 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ụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ 
        background:#ccc; 
    }
    section.ss{ width:100px; height:100px; position:relative; overflow:hidden; }
    section.ss img{ transform:scale(1.9); width:100%; transition:all .5s; }
    section.ss:hover img{ transform:scale(1); }
</style>

<body>
    <h1>Một số hàm trong Css: scale</h1>
    <section class="ss">
    	<img src="https://website366.com/wp-content/uploads/2021/08/gutenberg-wp-4.png" alt="" />
    </section>
</body>
</html>

Kết quả:

8. Hàm skew

Function 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ụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Một số hàm trong Css</title>
<link href="style.css" rel="stylesheet" />
</head>

<style>
    body{ 
        background:#ccc; 
    }
    section.ss{ padding-left:100px; }
    .rectangle{ width:200px; height:50px; background:#f00; transition:all .5s; }
    section.ss:hover .rectangle{
        transform:skewX(-45deg);
    }
</style>

<body>
    <h1>Một số hàm trong Css: skew</h1>
    <section class="ss">
    	<div class="rectangle"></div>
    </section>
</body>
</html>

Kết quả:

Tiếp tục update……

Một số hàm CSS nâng cao trong thiết kế Website Một số hàm CSS nâng cao trong thiết kế Website

Đã bao giờ bạn nghĩ đến việc dùng các hàm trong CSS chưa (Css Function). 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 chúng ta tối ưu. Ngoài việc […]

400 490 500