> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-14.md).

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

https\://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-14-maGK74aaZj2

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

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

![](https://images.viblo.asia/25637ad0-68df-438c-af60-72ac51819af4.jpg)

Hello xin chào mọi người, mình đã trở lại và tiếp tục với phần 14 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. "One Page Scroll" mà không cần JS luôn! \[Not Cross-Browsers] <a href="#id-1-one-page-scroll-ma-khong-can-js-luon-not-cross-browsers-0" id="id-1-one-page-scroll-ma-khong-can-js-luon-not-cross-browsers-0"></a>

Đã bao giờ bạn làm 1 trang web có hiệu ứng như thế này chưa nhỉ?

Thì đây là những từ khoá bạn có thể tìm kiếm: `onepage scrolling`, `fullpage scrolling`

Theo từ khoá trên, bạn có thể tìm ra những plugin được viết bằng JS như:

* <https://github.com/alvarotrigo/fullPage.js>
* <https://github.com/peachananr/onepage-scroll>

Nhưng `CSS Scroll Snapping` đã thay đổi tư duy đó, tức nghĩa là chỉ cần vài dòng code CSS, bạn vẫn có thể tạo được hiệu ứng như trên.

Bạn có thể hình dung đại khái trông như này:

1. Disable scroll mặc định của html, thay vào đó là tạo vùng scroll cho thẻ div wrapper
2. Đặt vào thẻ div wrapper đoạn code này `scroll-snap-type: y mandatory`
3. Đặt vào thẻ children (là con trực tiếp của thẻ parent) đoạn code này `scroll-snap-align: start`
4. Xong rồi đấy!

Hãy thưởng thức demo dưới đây

> **Lưu ý rất quan trọng:** Scrolling bằng touchpad sẽ thấy rõ sự smooth của hiệu ứng hơn!

Hãy hiểu 1 điều rằng, CSS cũng có giới hạn về sức mạnh, không thể nào cover 100% chức năng của người dùng như là JS được!

Việc của dev là phải xem xét thật kỹ, trong dự án cụ thể của mình, có thể apply nó được hay không?

Với tính năng này của CSS, bạn có thể thêm chút JS (1 ít dòng code JS là nhẹ hơn rất nhiều so với 1 plugin) mà vẫn có thể implement được tương đối chức năng bằng JS trước đây như Slider, Carousel.

> Tóm lại là vẫn có ích nhiều lắm đấy nhé!

**Đọc hiểu thêm**

* <https://developers.google.com/web/updates/2018/07/css-scroll-snap>
* <https://css-tricks.com/practical-css-scroll-snapping/>
* <https://nolanlawson.com/2019/02/10/building-a-modern-carousel-with-css-scroll-snap-smooth-scrolling-and-pinch-zoom/>
* <https://caniuse.com/#feat=css-snappoints>

#### 2. `text-decoration` thì ai không biết, nhưng `box-decoration` thì mới à nghen! \[Not Cross-Browsers] <a href="#id-2-text-decoration-thi-ai-khong-biet-nhung-box-decoration-thi-moi-a-nghen-not-cross-browsers-1" id="id-2-text-decoration-thi-ai-khong-biet-nhung-box-decoration-thi-moi-a-nghen-not-cross-browsers-1"></a>

Thật ra thì chính xác thuộc tính tên là `box-decoration-break` nhé mọi người ![😂](https://twemoji.maxcdn.com/v/14.0.2/72x72/1f602.png)

`box-decoration-break` rất đơn giản chỉ có 2 values là `slice` và `clone`

Dưới đây là demo cho hiệu ứng `box-decoration-break: clone`

> Bạn lưu ý nhé! element được set `box-decoration-break` phải là dạng inline element nha!

**Đọc hiểu thêm**

* <https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break>
* <https://css-tricks.com/almanac/properties/b/box-decoration-break/>
* <https://caniuse.com/#search=box-decoration-break>

#### 3. Style layout kiểu tạp chí với `shape-outside` \[Not Cross-Browsers] <a href="#id-3-style-layout-kieu-tap-chi-voi-shape-outside-not-cross-browsers-2" id="id-3-style-layout-kieu-tap-chi-voi-shape-outside-not-cross-browsers-2"></a>

Tạp chí hay những tờ báo giấy thường rất hay có những style layout lạ mắt và nó thật sự đẹp. Nhưng đấy là thứ style mà đội designer họ thiết kế ra.

Vậy thì trên web, bằng cái thứ CSS với ngày càng nhiều sức mạnh được trang bị kia, liệu có làm được không?

Xin thưa với mọi người là hoàn toàn được nhé!

Hãy xem demo bên dưới

Ví dụ trên là 1 cách dùng `shape-outside` đơn giản nhất, là value được cung cấp sẵn `circle()`.

Ngoài ra nó còn cung cấp các value có khác như:

* `ellipse()`
* `inset()`
* `polygon()`
* `url()`

Với những hình dạng không phải là hình tròn, thì bạn vẫn có thể hoàn toàn customize được hình dạng theo ý muốn bằng các điểm (points) được sét trong `shape-outside: polygon( your values)` nhé!

**Đọc hiểu thêm**

* <https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside>
* <https://css-tricks.com/almanac/properties/s/shape-outside/>
* <https://twitter.com/pmarquees/status/1151468771590193152>
* <https://caniuse.com/#search=shape-outside>

## 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 ạ!