12 Tip CSS chắc nhiều người sẽ cần

0
4158

CSS là Cascading Style Sheets và được sử dụng để mô tả cách các phần tử HTML sẽ hiển thị.

Nó là một trong những công nghệ cần phải học ngay để trở thành Lập trình viên webLập trình viên Frontend. Đây là bắt buộc.

Mặc dù có vẻ như CSS có thể làm rất nhiều việc ngoài việc xác định màu sắc, vị trí, v.v. của HTML, nhưng nó cũng có thể cho phép chúng ta tạo hiệu ứng animation và mang lại sự thú vị cho các ứng dụng hay trang web của chúng ta.

Có lẽ bây giờ nhiều người trong chúng ta quan tâm đến việc thành thạo CSS và học nó sâu hơn, nhưng tìm hiểu để biết một số Tip CSS sẽ giúp bạn tạo đỡ rắc rối khi thực hiện viết CSS cho website.

12 Tip CSS chắc nhiều người sẽ cần
12 Tip CSS chắc nhiều người sẽ cần

Bạn đã sẵn sàng chưa? Hãy bắt đầu nào!

Tip CSS #1: Vertical align với Flex

Căn giữa là một ám ảnh ở thời các lập trình viên đời đầu và cả bây giờ, khi không dùng Flex box.

Nhưng chúng ta không việc gì phải khổ như vậy, Flex box rất phổ biến trong giới Front end Dev và nó sinh ra là để định vị và sắp xếp các phần tử dễ dàng hơn.

Sử dụng flex giúp căn chỉnh dọc nhanh, đẹp và dễ dàng hơn so với trước kia. Chúng ta hãy xem ví dụ về code căn dọc bằng flex xem nhé:

See the Pen Tip CSS 1: Vertical align với Flex by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Như bạn có thể thấy trong đoạn mã trên, chúng ta đã sử dụng display: flexalign-items: center,

Justify-content: centre để đảm bảo phần tử con của chúng ta sẽ nằm chính xác ở phần giữa của phần tử cha.

Dễ chứ nhỉ?

Tip CSS #2. Chế độ hòa trộn (Blend Modes)

Chúng ta có thể thực hiện nhiều thứ hay ho trong CSS ngay bây giờ và một trong số đó là chế độ hòa trộn.

Có hai thuộc tính cho chế độ hòa trộn:

  • mix-blend-mode: xác định pha trộn giữa phần tử và phần tử phía sau.
  • background-blend-mode: xác định pha trộn giữa hình nền và màu nền của phần tử.

Hãy cùng xem cách thức hoạt động của nó qua ví dụ blend mode dưới đây:

See the Pen Tip CSS #2: Chế độ hòa trộn by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong đoạn mã trên, văn bản đã được pha trộn với hình ảnh.

Ví dụ này chúng ta đã sử dụng giá trị overlay, nhưng có tận 15 tùy chọn khác có mà bạn thể sử dụng.

Hãy xem ví dụ ở chế độ background-blend-mode:

See the Pen Tip CSS #2: Chế độ hòa trộn với background by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong trường hợp này, chúng ta có thể thấy hình ảnh nền đã được pha trộn với màu sắc như thế nào. Hình ảnh đầu tiên là trước khi trộn, và hình ảnh thứ hai là sau khi trộn.

Vì thuộc tính này tồn tại, nó cho phép chúng ta hòa trộn mà không cần phải sử dụng Photoshop hay thay thế ảnh.

Tip CSS #3: Cuộn Prallax

Parallax là một hiệu ứng rất phổ biến trong thế giới lập trình web hiện đại. Hiệu ứng này nói về việc cuộn nội dung background ở tốc độ khác với nội foreground khi chúng ta cuộn trang.

Hãy cùng xem hiệu ứng này có thể được thực hiện bằng CSS như thế nào nào:

See the Pen Tip CSS #3: Cuộn Prallax by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ này, bạn có thể thấy văn bản và hình nền của chúng ta đang di chuyển với tốc độ khác nhau như thế nào khi cuộn.

Chúng ta đã sử dụng TransformZ, để tăng tốc một phần tử và làm chậm một phần tử khác.

Có vẻ khá ổn, phải không nhỉ?

Tip CSS #4: Shape Outsite

Có một tính năng hay ho khác đi kèm với CSS nhưng nó không phổ biến lắm.

Đó là thuộc tính shape-outsite. Thuộc tính CSS này quyết định cách nội dung sẽ bao quanh phần tử float.

Hãy cùng xem cách thức hoạt động của nó:

See the Pen Tip CSS #4: Shape outside by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ trên, bạn có thể thấy rằng văn bản “né” khỏi vòng tròn. Ví dụ này mình đặt giá trị của của hình thành circle(50%), nhưng bạn cũng có thể đặt là image, triangle, square , v.v. Hãy thử tự làm xem nhé!

Tip CSS #5: Truncate – Cắt ngắn một chuỗi

Mình ghét văn bản bị “lòi” ra khỏi div, trông rất mất thẩm mỹ.

Trong Javascript, có một số cách chúng ta có thể quản lý nó, nhưng bạn hoàn toàn có thể cắt ngắn văn bản bằng CSS.

Hãy xem ví dụ dưới đây:

See the Pen Tip CSS #5: Cắt ngắn văn bản by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Ở trên, bạn có thể thấy CSS có thể cắt văn bản và kết quả của nó.

Mình đã sử dụng overflow: hidden, white-space: nowrap, và cuối cùng để có ba dấu chấm, mình đã sử dụng text-overflow: ellipsis.

Tip CSS #6: Clip path

Là một người làm về nghệ thuật, đôi khi bạn cần sáng tạo thêm một chút.

Ví dụ, đặt một hình ảnh trong một hình dạng cụ thể, như hình tam giác chẳng hạn.

Việc này hoàn toàn có thể, bạn có thể sử dụng thuộc tính clip-path! Hãy xem cách thức nó làm việc:

See the Pen Tip CSS #6: Clip-path by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ trên, tôi đã tạo một hình tròn, eclipse và hình dạng đa giác (polygon) tùy chỉnh.

Tip CSS #7: Full height và Full width

Nếu chúng ta muốn thiết lập ứng dụng hoặc trang web của mình được điều chỉnh theo chế độ xem, các đơn vị vh vw sẽ làm cho việc này dễ dàng hơn nhiều.

Vh có nghĩa là viewport heightvw có nghĩa là viewport width.

Hãy để kiểm tra cách thức hoạt động của nó trong một ví dụ thực tế:

See the Pen Tip CSS #7: full height và full width by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ trên, mình đã đặt phần tử blue-box thành 50vw và 50vh, có nghĩa là nó phải có 50% chiều rộng khung nhìn và 50% chiều cao của khung nhìn và nếu bạn thay đổi kích thước khung nhìn, bạn sẽ thể nhận thấy cách nó điều chỉnh.

Bạn có thể thử thay đổi thành 100vw và 100vh rồi thay đổi kích thước khung nhìn xem.

Thú vị chứ?

Tip CSS #8: Bộ lọc ảnh (Fillter img)

Hình ảnh đẹp có thể mang lại nhiều hiệu ứng tuyệt vời cho website và giúp tạo ra sản phẩm tốt hơn.

Làm đẹp cho trang web là việc của CSS. Vậy không lý do gì mà nó không có bộ lọc ảnh cả.

CSS cho phép sử dụng nhiều bộ lọc (filter) trên hình ảnh để giúp các lập trình viên front end thay đổi hình ảnh mà không cần dùng photoshop.

Dưới đây là một số filter chúng ta có thể sử dụng:

See the Pen Tip CSS #8: filter by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ trên, bạn có thể thấy 7 bộ lọc khác nhau được sử dụng trong cùng một hình ảnh.

Tip CSS #9: CSS Animations

Ảnh động (Animation) có thể thu hút sự chú ý của người dùng trên trang web và đây cũng chính là lý do tại sao animation thường được sử dụng trong thiết kế web.

Xem ví dụ sau:

See the Pen Tip CSS #9: CSS animations by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ trên, mình đã tạo ra một chấm nhỏ và thay đổi vị trí của nó.

Mình chia lộ trình animation của nó thành 5 điểm nút: 0%, 25%, 50%, 75%, 100%.

Mỗi một điểm nút mình sẽ thay đổi opacity của nó (Cho nó mờ dần) và điều chỉnh vị trí của nó so với vị trí ban đầu.

Tip CSS #10: Xoay phần tử (rotation)

Một kiểu animation khác có thể được thực hiện trong CSS là hiệu ứng xoay, nó có tính năng động hơn một chút và thật tuyệt vời khi thêm một số phần tử vào phần tử loading, logo hoặc hình ảnh trong bộ sưu tập.

Hãy xem ví dụ với hiệu ứng xoay trong ví dụ sau:

See the Pen Tip CSS #10: Hiệu ứng Xoay by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ này, chúng ta có thể thấy hình ảnh quay vòng 6 lần trong một chu kỳ animation.

Tip CSS #11: Mặt nạ (mask)

Nếu bạn đã từng làm thiết kế đồ họa, photoshop, chắc là bạn sẽ biết mặt nạ hữu ích như thế nào.

Trong CSS, chúng ta cũng có thể tạo và sử dụng mặt nạ.

Hãy thử tạo mặt nạ cho ảnh qua ví dụ dưới đây:

See the Pen Tip CSS #11: Mặt nạ (Mask) by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Trong ví dụ trên, mình đã tạo mặt nạ gradient hình tròn. Nhưng ngoài ra, bạn cũng có thể sử dụng SVG làm mặt nạ. (Xuất code HTML trong illustrator là cách khá nhanh để tạo SVG vector)

Tip CSS #12: Zoom khi Hover

Khi bạn tạo một allbum trên trang web, hiệu ứng khi di chuột (hover) qua ảnh sẽ rất thu hút được người dùng.

Ý tưởng phổ biến và hiệu quả nhất là thêm hiệu ứng zoom khi hover để làm nổi bật ảnh được di chuột. Hãy cùng xem cách thức hoạt động của nó:

See the Pen Tip CSS #12: Hiệu ứng Zoom khi hover by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Ở đây mình đã sử dụng image:hover để nói rằng: Khi di chuột qua ảnh thì có hiệu ứng transform: scale(1.3). Thời gian transform từ 1 đến 1.3 là 3s (Sử dụng thuộc tính transition: 3s)

Ở class image-frame mình cũng đã sử dụng thuộc tính overflow: hidden để khi ảnh zoom vượt quá kích thước 400px thì tự động ẩn phần vượt quá.

Đơn giản phải không?

Bạn có thấy 12 Tip CSS này có ích với bạn không?

Chúng ta đều muốn tạo các trang web có ứng dụng tuyệt đẹp, nhưng bởi vì bạn chưa quen nên có thể thấy rất vất vả khi xử lý CSS.

Nhưng như mình đã chỉ cho bạn trong bài viết này, nó cũng khá là đơn giản phải không?

Mình hy vọng bạn sẽ thấy những Tip CSS này hữu ích cho việc học lập trình web của bạn.

  • Và nếu bạn cần người hướng dẫn từ đầu đến cuối, Khóa học Lập trình PHP từ Front end đến Back end sẽ khá là phù hợp, tham khảo qua nhé.

Bạn biết bất kỳ Tip CSS thú vị nào khác không?, hãy chia sẻ với mình trong bình luận, mình thực sự muốn biết đó. ^^

Chúc bạn thành công với CSS!

>> Tham khảo:12 Mẹo CSS Nâng Cao