Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
20 Thủ thuật CSS Hữu ích Dành Cho Developer Beginner

20 Thủ thuật CSS Hữu ích Dành Cho Developer Beginner


Ngày 4 Tháng 2 Năm 2021

Bài viết hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu các thủ thuật CSS hay được lập trình viên sử dụng để giúp bạn cũng như mình có thể hiểu hơn về CSS cũng như tăng hiệu quả trong công việc và học tập nhé!

Các Thủ Thuật CSS Hay Dành Cho Developer

Cách Sử Dụng Filter CSS

Trong CSS cho phép chúng ta tạo các hiệu ứng trực tiếp cho hình ảnh mà không cần sử dụng đến Photoshop và thường được dùng với thẻ <img>. Sau đây là một số thuộc tính thông dụng, bạn tham khảo ở bên dưới nhé:

  • blur: Áp dụng hiệu ứng làm mờ cho hình ảnh
  • grayscale: Chuyển đổi hình ảnh theo grayscale(đơn vị là % nhé)
  • brightness: Điều chỉnh độ sáng cho hình ảnh.
  • saturate: Điều chỉnh độ bão hòa cho hình ảnh.
  • invert: Đảo ngược chiều các mẫu trong hình ảnh.
  • hue-rotate: Áp dụng góc màu cho hình ảnh.

Trên đây là một số thuộc tính thông dụng cho hiệu ứng hình ảnh và nếu cảm thấy khó hiểu thì bạn xem ví dụ để có cái nhìn trực quan hơn nhé!

See the Pen hieu ung hinh anh CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Dùng text-overflow CSS

Thông thường khi muốn rút gọn chiều dài của đoạn văn thì chúng ta thường hay sử dụng Javascript để thực hiện. Nhưng trong CSS cũng có chức năng giúp bạn dễ dàng giải quyết vấn đề trên. Và để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Cách rút gọn đoạn văn bằng CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thay Đổi Text Color Bằng ::selection CSS

Thông thường nếu bạn tô đen đoạn văn trong trang web thì nó sẽ thường có màu xanh dương mặc định của trình duyệt. Chúng ta có thể thay đổi màu sắc đó thông qua thuộc tính ::selection trong CSS. Và để hiểu rõ hơn bạn xem ví dụ sau nhé!

See the Pen Thay đổi màu khi chọn đoạn văn CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Hiệu Ứng Hover Zoom Image CSS

Đôi lúc bạn muốn làm cho hình ảnh thêm một chút thú vị thì có thể sử dụng thuộc tính scale để tạo hiệu ứng phóng to khi người dùng hover vào ảnh.

  • Với hình ảnh ban đầu sẽ có scale = 1
  • Với hình ảnh nhỏ hơn ảnh gốc sẽ có scale < 1
  • Với hình ảnh lớn hơn ảnh gốc sẽ có scale > 1

Để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Hiệu Ứng Phóng To Khi Hover Vào Hình Ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Sử Dụng CSS3 mix-blend-mode

Nếu bạn muốn làm nổi bật nội dung của mình thì có thể sử dụng thuộc tính mix-blend-mode trong CSS để kết hợp một phần tử với background của phần tử chứa nó. Để dễ hình dùng hơn bạn xem ví dụ dưới đây nhé!

Nếu bạn muốn tìm hiểu thêm các thuộc tính của mix-blend-mode thì có thể xem ở đây nhé.

See the Pen Hiệu Ứng Hòa Trộn Chữ Với Background Trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Text Around Image CSS

Đôi khi bạn cần hình ảnh minh họa trong đoạn văn của mình và thật tuyệt khi chúng ta có thể làm nó giống như trong Word là để chữ hiển thị xung quanh hình ảnh. Và ví dụ này sẽ giúp bạn giải quyết vấn đế đó thông qua các thuộc tính có sẵn trong CSS.

See the Pen xxZWRdg by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Clip Path CSS

Clip path là thuộc tính giúp chúng ta có thể xác định hình ảnh sẽ hiển thị như thế nào trong trang web như là hình tròn, ellipse, polygon... Và nó cũng có các thêm các thuộc tính nâng cao khác bạn có thể tham khảo thêm ở đây nhé!

See the Pen Sử dụng clip path trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Sử Dụng :first-letter Selector CSS

Khi bạn đọc sách báo thì sẽ thường thấy các chữ cái đầu tiên trong nội dung được viết lớn hơn so với các chữ còn lại. Và chúng ta có thể thiết kế màu sắc, cỡ chữ... cho chữ cái đầu tiên của đoạn văn thông qua cách gọi :first-child::first-letter trong CSS. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé!

See the Pen Thiết Kế chữ Cái Đầu Tiên Trong Đoạn Văn by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Grid Item Center CSS

Khi bạn cần thiết lập một phần tử nào đó ở vị trí chính giữa trong phần tử cha thì chúng ta có thể sử dụng thuộc tính display:grid; trong CSS. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Thiết lập vị trí phần tử ở giữa thông qua grid CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Vertically Centering CSS Flexbox

Trong ví dụ này mình sẽ đi vào cách căn giữa các phần tử theo chiều dọc thông qua việc sử dụng thuộc tính display: flex;. Để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

See the Pen Cách căn giữa phần tử theo chiều dọc by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Sử Dụng Hyperlink CSS Attribute Selector

Giả sử bạn có một đường dẫn để tải một file nào đó nhưng muốn người dùng biết được đuôi file là gì thì chúng ta có thể sử dụng hình ảnh để minh họa. Và nó được đặt nằm cuối đường dẫn bằng việc dùng thuộc tính after trong CSS. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Hiển thị hình ảnh minh họa cho file trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Sử Dụng :checked Selector CSS

Giả sử bạn có một đường dẫn để tải một file nào đó nhưng muốn người dùng biết được đuôi file là gì thì chúng ta có thể sử dụng hình ảnh để minh họa. Và nó được đặt nằm cuối đường dẫn bằng việc dùng thuộc tính after trong CSS. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Cách thay đổi màu khi người dùng nhấn vào checkbox trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách tạo Random Background Color HTML CSS

Giả sử bạn có một đường dẫn để tải một file nào đó nhưng muốn người dùng biết được đuôi file là gì thì chúng ta có thể sử dụng hình ảnh để minh họa. Và nó được đặt nằm cuối đường dẫn bằng việc dùng thuộc tính after trong CSS. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Thay đổi màu nền bằng CSS Animation by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Hover Transition CSS

Ví dụ khi người dùng hover vào một hình ảnh, button, đối tượng HTML... thì bạn không muốn hiệu ứng hiển thị ngay lập tức mà nên chuyển dần từ từ theo một thời gian nhất định thì chúng ta có thể sử dụng transition để giải quyết vấn đề trên.

See the Pen Sử dụng transition trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Sử Dụng :before Và :after cho Hình Ảnh CSS

Nếu bạn không may có một hình ảnh nào đó mà đường dẫn của nó không hiển thị được trong trang web thì ngoài thuộc tính alt, ta cũng có thể sử dụng beforeafter để thiết kế style cho thông báo. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen zYrWwwq by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Image Responsive CSS

Để hiển thị hình ảnh trên nhiều màn hình thiết bị khác nhau thì bạn có thể sử dụng thuộc tính CSS sau đây cho thẻ img:

See the Pen Hiển thị hình ảnh responsive by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Circle Bằng border radius CSS

Để tạo hình tròn cho đối tượng trong trang HTML thì chúng ta có thể sử dụng thuộc tính border-radius trong CSS:

See the Pen Tạo hình tròn với border radius trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Triangle với border width CSS

Để tạo hình tam giác cho đối tượng trong trang HTML thì chúng ta có thể sử dụng thuộc tính border-width trong CSS:

See the Pen Tạo tam giác với border width trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo CSS Background Image Full Screen

Trong phần này mình sẽ dùng hình ảnh làm background hiển thị toàn màn hình thông qua thuộc tính là background background-size. Ngoài ra bạn cũng nên tham khảo thêm cách một cách mới để thiết lập đối tượng với vị trị chính giữa thông qua thuộc tính position: absolute;. Để nắm rõ hơn bạn xem đoạn code sau nhé:

See the Pen Hiển thị hình ảnh toàn màn hình trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Dùng nth-child Selector CSS

Giả sử bạn có một danh sách và bao gồm rất nhiều thành phần con. Và nếu bạn muốn thiết lập style cho một đối tượng xác định trong danh sách như vậy sẽ rất khó khăn. Do đó CSS cung cấp cho bạn một thuộc tính là :nth-child giúp chúng ta có thể dễ dàng xác định đối tượng mà mình mong muốn. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Lựa chọn đối tượng mong muốn bằng CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thủ thuật CSS hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!