Thủ Thuật CSS Dành Cho Các Newbie Phần 1

Chào mừng các bạn đến với phần 1 của series CSS Tricks dành cho các lập trình viên front end mới vào nghề. Loạt bài viết này mình sẽ tổng hợp các “trick” trong CSS mà mình đã từng được nghe, được đọc và cảm thấy rất hữu ích. Hi vọng sẽ có giá trị cho các bạn, đặc biệt là các bạn mới làm quen với tam giới html, css và javascript.

1. “Đổ màu” cho các phần tử text

Hiệu ứng này giúp các bạn có thể “đổ màu” (mình cũng không biết nên sử dụng từ gì cho đúng) cho text bằng hình ảnh, video hoặc các thuộc tính màu sắc mà thuộc tính color không hỗ trợ, ví dụ như linear-gradient, radial-gradient,….

Ví dụ của hiệu ứng trên:

Snippet code như sau:

Trong phần background các bạn có thể sử dụng 1 hình ảnh, video, linear-gradient, radial-gradient,… để làm cho hiệu ứng trở nên bắt mắt hơn.

2. Bo tròn border

Chắc hẳn các bạn làm front end cũng từng phải làm những button/link có border bo tròn như thế này.

Bình thường thì giải pháp các bạn nghĩ đến đầu tiên là gì nhỉ? Chắc chắn đơn giản nhất là border-radius: …px rồi. Nhưng nên thay dấu … kia là bao nhiêu thì đủ nhỉ. Hồi mới học mình lại bắt đầu hì hục mở dev tool lên rồi bắt đầu chỉnh cho đến khi tròn thì thôi. :D Thực ra để có thể thực hiện được bo tròn như vậy rất đơn giản, key ở đây là bạn phải set cho nó 1 giá trị đủ lớn, vì các bạn để ý mà xem, nếu bạn cứ tăng border-radius lên thì đến 1 lúc nào đó, khi qua khỏi ngưỡng bo tròn rồi thì sẽ chẳng có gì thay đổi nữa. Vậy nên chỉ cần set cho border-radius 1 giá trị đủ lớn là button sẽ tự động bo tròn mặc cho padding, width, height của nó như thế nào. Mình thì hay sử dụng border-radius: 999px. Vì mình nghĩ nó là đủ lớn, đẹp và dễ nhớ.

3. Chia cột cho nội dung text

CSS cho phép bạn có thể định nghĩa chia nội dung của phần tử thành các cột và cả khoảng cách giữa chúng nữa.

Ví dụ như thế này. Ở đây mình chia thành 3 cột, mỗi cột cách nhau 40px.

Đoạn code thực hiện như sau:

column-count là số cột bạn muốn chia, column-gap là khoảng cách giữa các cột với nhau.

4. Parallax Image

Parallax Image là 1 hiệu ứng khá bắt mắt và càng ngày càng được giới design và front-end developer ưa chuộng.

Hiệu ứng này hiểu đơn giản là không cho hình ảnh di chuyển theo  khi người dùng cuộn chuột, parallax image sẽ nhìn như thể div chứ nó di chuyển còn nó đang đứng yên vậy. Dưới đây là 1 ví dụ đơn giản của hiệu ứng này.

HTML:

Tuy nhìn có vẻ phức tạp nhưng hiệu ứng này lại dễ dàng thực hiện 1 cách bất ngờ với chỉ 1 dòng css. Chỉ cần set cho background của div là hình ảnh đó cùng với thuộc tính background-attachment: fixed và bùm, chúng ta đã có hiệu ứng parallax image xịn xò cho website của mình rồi.

5. Object-fit cho hình ảnh

Đã có bao giờ bạn gặp phải trường hợp muốn gán cứng width và height cho 1 hình ảnh chưa nhỉ. Khi gán cứng with và height cho 1 ảnh thì bạn đã phá vỡ đi tỉ lệ của ảnh và khi đó khả năng rất cao rằng ảnh của bạn sẽ bị méo đi. 1 giải pháp cho việc này chính là sử dụng object-fit. Có 2 thuộc tính được sử dụng nhiều nhất đó là object-fit: coverobject-fit: contain. Sử dụng object-fit: cover khi đó ảnh sẽ tự động bị cắt đi để giữa được tỉ lệ vốn có của ảnh, thêm vào đó là ảnh sẽ được cắt để tự động bao hết được width và height do bạn định nghĩa. Thuộc tính này có nhược điểm là nó sẽ khiến ảnh của bạn bị cắt và zoom do đó không hiển thị được hết tất cả nội dung của ảnh. Ngược lại, object-fit: contain sẽ tự động co ảnh lại đồng thời giữ nguyên tỉ lệ của ảnh. Làm như vậy thì ảnh của bạn sẽ giữ được toàn bộ nội dung cũng như tỉ lệ, tuy nhiên nhược điểm là làm cách này thì ảnh sẽ chỉ thỏa mãn được height chứ không lấy hết width, phần width còn thừa sẽ là khoảng trắng do bạn định ra.

Bạn có thể xen ví dụ tại đây để hiểu rõ hơn.

6. Giới hạn số dòng text

Khi nhắc đến giới hạn về số dòng của text có lẽ nhiều bạn sẽ nghĩ ngay đến việc sử dụng JS để làm việc này. Tuy nhiên, bạn hoàn toàn có thể làm được việc đó bằng CSS thuần mà không cần đến sự giúp đỡ của 1 dòng JS nào.

Snippet cho việc này như sau:

Ở đây khi sử dụng bạn thay $line bằng số dòng bạn muốn. Thuộc tính text-overflow định nghĩa các phần text “thừa” bị cắt đi hiển thị như thế nào. Bạn có thể tham khảo thêm ở đây. Trong đoạn code trên mình sử dụng ellipsis tức là sau khi cắt ở phần cuối sẽ có thêm dấu ‘…’

Xem ví dụ sử dụng đoạn code trên tại đây.

Tạm kết

Một lưu ý nho nhỏ đó là một số thuộc tính để tạo hiệu ứng trong 1 số những thủ thuật kể trên có thể không được hỗ trợ trên tất cả các trình duyệt hay các version khác nhau của trình duyệt. Do đó, bạn nên cân nhắc, tìm hiểu thật kĩ trước khi sử dụng. Có thể sử dụng website https://caniuse.com/ để tra cứu trước khi áp dụng vào website của mình.

Đến đây mình xin được kết thúc phần 1 của series CSS Tricks tại đây. Mong rằng nó có ích đối với bạn. Mình rất mong nhận được góp ý, nhận xét từ các bạn.