---
description: >-
  https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-7-aWj53pv1K6m
---

# Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 7)

## Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 7)

Bài đăng này đã không được cập nhật trong 4 năm

<figure><img src="https://images.viblo.asia/2cede1b2-eff2-4c45-9f0c-e91608f0ebde.jpg" alt=""><figcaption></figcaption></figure>

Hello xin chào mọi người, mình đã trở lại và tiếp tục với phần 7 của series về [Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết](https://viblo.asia/s/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-bq5QL7RJlD8)

Bắt đầu thôi nào!

#### 1. Text hiển thị theo chiều dọc dễ dàng với `writing-mode` <a href="#id-1-text-hien-thi-theo-chieu-doc-de-dang-voi-writing-mode-0" id="id-1-text-hien-thi-theo-chieu-doc-de-dang-voi-writing-mode-0"></a>

Nếu làm website cho ngôn ngữ Tiếng Nhật, Tiếng Trung hoặc Tiếng Hàn, đôi khi bạn hay gặp phải những layout kiểu như thế này:

```

<div class="demo">
  <table class="table table-bordered bg-light">
    <thead class="font-weight-bold">
      <tr>
        <th class="w-50 align-middle" rowspan="2">スタッフ</th>
        <th class="text-center" colspan="5">報告</th>
      </tr>
      <tr>
        <th class="align-top">
          <p class="title-vertical">月曜</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">火曜日</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">水曜日</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">木曜日</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">金曜日</p>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="font-weight-bold">Hà Hữu Tín A</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
      <tr>
        <td class="font-weight-bold">Hà Hữu Tín B</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
      <tr>
        <td class="font-weight-bold">Hà Hữu Tín C</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
    </tbody>
  </table>
</div>


.demo {
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}
.table {
   width: 600px;
   table-layout: fixed;
   
   .title-vertical {
      width: 15px;
      margin: auto;
   }
}
```

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FosvTzCAbrHeQhfznNKD4%2Fimage.png?alt=media&#x26;token=ae3a21ee-67c2-4b14-bd37-e53e1c34688e" alt=""><figcaption></figcaption></figure>

Đoạn code xử lý chính sẽ là:

```scss
.title-vertical {
  width: 15px;
  margin: auto;
}
```

Tuy nhiên, nếu chỗ text đấy là Tiếng Anh thì code sẽ work sai ngay, nếu làm đa ngữ Anh - Nhật thì buộc phải add thêm class và style lại như sau

Đoạn code xử lý chính sẽ là:

```scss
.title-vertical {
  width: 15px;
  margin: auto;
  transform: rotate(90deg);
  transform-origin: top left;
  height: 90px;
  position: relative;
  left: 18px;
}
```

Còn rất nhiều bất cập ở đoạn code trên là việc khó maintain, dễ gặp lỗi nếu đoạn text dài thêm...

Nhưng rất may ta đã có vị cứu tinh là `writing-mode` chỉ cần 1 dòng code ta đã xử lý được hết bất cập ở trên. Có lẽ bạn đang lo lắng về khả năng support browsers của nó thì hãy ngó qua [CanIUse](https://caniuse.com/#feat=css-writing-mode) , thuộc tính này hầu như đã support ở hết các trình duyệt phổ biến rồi

```

<div class="demo">
  <table class="table table-bordered bg-light">
    <thead class="font-weight-bold">
      <tr>
        <th class="w-50 align-middle" rowspan="2">スタッフ</th>
        <th class="text-center" colspan="5">報告</th>
      </tr>
      <tr>
        <th class="align-top">
          <p class="title-vertical">月曜</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">火曜日</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">水曜日</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">木曜日</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">金曜日</p>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="font-weight-bold">Ha Huu Tin A</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
      <tr>
        <td class="font-weight-bold">Ha Huu Tin B</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
      <tr>
        <td class="font-weight-bold">Ha Huu Tin C</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
    </tbody>
  </table>
  <table class="table table-bordered bg-light">
    <thead class="font-weight-bold">
      <tr>
        <th class="w-50 align-middle" rowspan="2">Staff</th>
        <th class="text-center" colspan="5">Reported</th>
      </tr>
      <tr>
        <th class="align-top">
          <p class="title-vertical">Monday</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">Tuesday</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">Wednesday</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">Thursday</p>
        </th>
        <th class="align-top">
          <p class="title-vertical">Friday</p>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="font-weight-bold">Ha Huu Tin A</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
      <tr>
        <td class="font-weight-bold">Ha Huu Tin B</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
      <tr>
        <td class="font-weight-bold">Ha Huu Tin C</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-warning">N</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-success">Y</td>
        <td class="text-center bg-warning">N</td>
      </tr>
    </tbody>
  </table>
</div>

.demo {
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
.table {
   width: 600px;
   table-layout: fixed;
   
   .title-vertical {
      white-space: nowrap;
      writing-mode: vertical-lr;
   }
}
```

Một chú ý nhỏ là set thêm `white-space: nowrap` đi cùng với `writing-mode: vertical-lr` để đảm bảo work đúng trên cả 2 ngôn ngữ Anh - Nhật nhé!

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FYJkPj5F3fcP0BMip9J8s%2Fimage.png?alt=media&#x26;token=12d70a88-4f51-400d-b147-eeeefb97efff" alt=""><figcaption></figcaption></figure>

**References:**

* [https://css-tricks.com/almanac/properties/w/writing-mode/](https://css-tricks.com/almanac/properties/w/writing-mode/)
* [https://www.w3.org/International/articles/vertical-text/](https://www.w3.org/International/articles/vertical-text/)
* [http://www.tipue.com/blog/css-writing-mode/](http://www.tipue.com/blog/css-writing-mode/)

#### 2. Khai phá sức mạnh của thuộc tính `background-image` <a href="#id-2-khai-pha-suc-manh-cua-thuoc-tinh-background-image-1" id="id-2-khai-pha-suc-manh-cua-thuoc-tinh-background-image-1"></a>

Ngoài việc `background-image` được biết đến nhiều nhất qua 2 trường hợp sử dụng là:

1. Đổ màu đa sắc với `background-image: linear-gradient(...)` hoặc `background-image: radial-gradient(...)`
2. Chèn ảnh `background-image: url(...)`

Nhưng khi kết hợp với tính năng **CSS Multiple Background**, thuộc tính `background-image` này thực sự làm nên nhiều thứ hay ho đến kỳ diệu, thử liệt kê lần lượt mà xem

**Vẽ Shape (Hình dạng: Tròn, Tam Giác, Vuông)**

Anh em Frontend thì chắc là không còn lạ gì với [article trên CSS Tricks](https://css-tricks.com/the-shapes-of-css/) đã hướng dẫn vẽ các loại shape chỉ bằng code CSS, không cần phải dùng hình và các thuộc tính được dùng trên đó chủ yếu là `width`, `height`, `border` kết hợp lại với nhau.

Và thay vì sử dụng nhiều dòng code trên kết hợp lại, chỉ cần sử dụng mỗi `background gradient` cũng có thể cover được. Tuy nhiên số lượng shape cover vẫn không đủ, vì nó vẫn có những giới hạn, chứ không phải là vô đối, thứ gì vẽ cũng được đâu ![😄](https://twemoji.maxcdn.com/v/14.0.2/72x72/1f604.png)

**Vẽ Flag (Lá cờ)**

Kết hợp thêm các thuộc tính CSS khác, `background gradient`còn được dùng vẽ được tất cả lá cờ các quốc gia trên thế giới với tiêu chí 1 `tag` là 1 lá cờ, tận dụng thêm 2 pseudo elements `:before` `:after` thì trong 1 `div` ta có được 3 elements, quá đủ để vẽ rồi ![😃](https://twemoji.maxcdn.com/v/14.0.2/72x72/1f603.png)

Còn nhiều flag ở đây nữa, mọi người vào lấy code mà sử dụng thôi: [https://pixelastic.github.io/css-flags/](https://pixelastic.github.io/css-flags/)

**Vẽ Patterns Background**

Từ patterns hơi khó giải thích Tiếng Việt, đại khái nó là những hình dạng như thế này:

Mình còn nhớ ngày xưa mỗi lần muốn tìm background đẹp cho website, mình hay lên trang [Subtle Patterns](https://www.toptal.com/designers/subtlepatterns/) . Vì nó là 1 image nhỏ add vào `background-image` và cho thêm `background-repeat: repeat` đổ full page nên rất nhẹ.

Nhưng giờ thì mình quên trang này rồi, chỉ vào mỗi trang [CSS3 Patterns](https://leaverou.github.io/css3patterns/) tìm thôi ![🤗](https://twemoji.maxcdn.com/v/14.0.2/72x72/1f917.png)

> Với việc cố gắng tự làm khó mình bằng cách vẽ bằng code CSS `background gradient` mục đích cuối cùng mang lại là code ít hơn, performance tốt hơn, nhưng nói về việc scale, chỉnh sửa nó thì chưa chắc đã tốt hơn SVG. Nhưng qua đây mình cũng học được CSS `background gradient` nó làm được nhiều thứ rất hay, suy cho cùng thì nó vẫn có ích cho 1 vài trường hợp cần, chứ không phải là vẽ chơi đâu nha mọi người ![😃](https://twemoji.maxcdn.com/v/14.0.2/72x72/1f603.png)

**References:**

* [https://css-tricks.com/the-shapes-of-css/](https://css-tricks.com/the-shapes-of-css/)
* [https://codepen.io/yuanchuan/pen/vVRKRQ](https://codepen.io/yuanchuan/pen/vVRKRQ)
* [https://pixelastic.github.io/css-flags/](https://pixelastic.github.io/css-flags/)
* [https://leaverou.github.io/css3patterns/](https://leaverou.github.io/css3patterns/)

#### 3. Canh vị trí `background-position` từ hướng bottom, right theo 2 cách <a href="#id-3-canh-vi-tri-background-position-tu-huong-bottom-right-theo-2-cach-2" id="id-3-canh-vi-tri-background-position-tu-huong-bottom-right-theo-2-cach-2"></a>

Có những trường hợp `background-image` canh vị trí không chỉ đơn giản cố định là `top`, `right`, `bottom`, `left`, `center`.

Mà lại muốn canh vị trí theo:

* Từ hướng `bottom` và cách `bottom` là `20px`
* Từ hướng `right` và cách `right` là `30px`

Ok, chúng ta sẽ có 2 cách làm ở đây:

**Cách 1:** Nếu sử dụng theo các `value` được cung cấp bởi `background-position` thì ta làm như sau:

```scss
background-position: bottom 20px right 30px;
```

**Cách 2:** Sử dụng `calc` cũng cho ta kết quả tương tự

```scss
background-position: calc(100% - 30px) calc(100% - 20px);
```

**References:**

* [https://css-tricks.com/positioning-offset-background-images/](https://css-tricks.com/positioning-offset-background-images/)
* [https://css-tricks.com/a-couple-of-use-cases-for-calc/](https://css-tricks.com/a-couple-of-use-cases-for-calc/)

## Tổng kết <a href="#tong-ket-3" id="tong-ket-3"></a>

Hi vọng mọi người sẽ tăng thêm skill CSS với 3 tips trên.

Nếu thấy thích thì Upvote, thấy hay thì Clip bài này của mình nhé! ^^

P/s: Tiêu đề câu view thôi nhé! Anh em Frontend pro rồi đừng chém em ạ!
