https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-14-maGK74aaZj2
Last updated
Bài đăng này đã không được cập nhật trong 4 năm
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
Bắt đầu thôi nào!
Đã 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ư:
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:
Disable scroll mặc định của html, thay vào đó là tạo vùng scroll cho thẻ div wrapper
Đặt vào thẻ div wrapper đoạn code này scroll-snap-type: y mandatory
Đặt vào thẻ children (là con trực tiếp của thẻ parent) đoạn code này scroll-snap-align: start
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
text-decoration thì ai không biết, nhưng box-decoration thì mới à nghen! [Not Cross-Browsers]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-breakphải là dạng inline element nha!
Đọc hiểu thêm
shape-outside [Not Cross-Browsers]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
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 ạ!
Thật ra thì chính xác thuộc tính tên là box-decoration-break nhé mọi người
