Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Thư Viện Extra CSS Cho Thiết Kế Web

Thư Viện Extra CSS Cho Thiết Kế Web


Ngày 22 Tháng 7 Năm 2020

Thư Viện Extra CSS Cho Thiết Kế Web

EXTRA.CSS là một thư viện giúp thu hút sự chú ý của người dùng vào những nội dung mà bạn muốn làm nổi bật trong trang web. Với việc được xây dựng bằng CSS thì sẽ giúp bạn có thể áp dụng cho nhiều loại dự án web khác nhau. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Thư Viện EXTRA.CSS

EXTRA.CSS là một thư viện giúp thu hút sự chú ý của người dùng vào những nội dung mà bạn muốn làm nổi bật trong trang web. Với việc được xây dựng bằng CSS thì sẽ giúp bạn có thể áp dụng cho nhiều loại dự án web khác nhau. Và tiếp theo chúng ta sẽ đi vào bước thiết lập nhé!

Sử dụng ExtraCSS - Super Underline:

Đây là một phần của extra.css, nó giúp bạn có thể tạo hiệu ứng gạch chân cho nội dung trong trang web một cách đẹp mắt và dễ dàng nhận được sự chú ý khi người dùng lần đầu tiên nhìn vào văn bản của bạn. Và để thiết lập trực tiếp thư viện này vào trang web thì bạn gán dòng CDN bên dưới vào trang web nhé:

<script src='https://unpkg.com/extra.css/superUnderline.js'></script>

Và dễ dàng hình dung bạn xem ví dụ dưới đây nhé:

See the Pen Extra.CSS Example -- Super Underline by Una Kravets (@una) on CodePen.

Ở đây mình sẽ có một số thuộc tính bạn cần lưu ý là:

  • underlineNumber: Số lượng số dòng gạch chân
  • underlineColor: Màu sắc của dấu gạch chân
  • underlineSpread: Độ nghiện của các dòng gạch chân
  • underlineWidth: Độ dày của các dòng gạch chân

Nếu bạn muốn xem rõ hơn thì có thể chuyển sang chế độ 0.25x hoặc 0.5x nha. Nếu bạn cần chuyển đổi SCSS sang CSS thì có thể sử dụng ở đây nhé.

Sử dụng ExtraCSS - Confetti:

Đây là một hiệu ứng khá hay giúp bạn có thể làm đẹp tiêu đề trong trang web bằng cách tạo background hoa giấy cho nó. Để sử dụng hiệu ứng thì cũng như trên mình cần thiết lập đường dẫn CDN nhé:

<script src='https://unpkg.com/extra.css/confetti.js'></script>

Và để dễ dàng hình dung thì bạn xem ví dụ dưới đây nhé:

See the Pen Extra.CSS Example -- Confetti by Una Kravets (@una) on CodePen.

Ở đây mình có lưu ý một số thuộc tính để giúp bạn dễ dàng tinh chỉnh là:

  • confettiNumber: Số lượng hoa giấy
  • confettiLengthVariance: Độ dài của mỗi hoa giấy
  • confettiWeightVariance: Độ dày của mỗi hoa giấy

Nếu bạn muốn xem rõ hơn thì có thể chuyển sang chế độ 0.25x hoặc 0.5x nha. Nếu bạn cần chuyển đổi SCSS sang CSS thì có thể sử dụng ở đây nhé.

Sử dụng ExtraCSS - Cross Out:

Đây là hiệu ứng giúp bạn có thể làm đẹp hơn các nội dung bị gạch bỏ trong nội dung của mình. Để sử dụng thì bạn thiết lập CDN dưới đây vào trang web nhé:

<script src='https://unpkg.com/extra.css/crossOut.js'></script>

Và để dễ dàng hình dung bạn xem ví dụ dưới đây nhé:

See the Pen Extra.CSS Example -- Cross Out by Una Kravets (@una) on CodePen.

Và ở đây mình có một số lưu ý là:

  • crossColor: màu sắc của dấu gạch bỏ
  • crossWidth: độ dày của dấu gạch bỏ

Sử dụng ExtraCSS - Sparkles:

Đây cũng là một hiệu ứng backround dành cho tiêu đề trong nội dung trang web của bạn. Để thiết lập trực tiếp vào trang HTML thì bạn sử dụng CND dưới đây nhé:

<script src='https://unpkg.com/extra.css/sparkles.js'></script>

Và để dễ hình dung bạn xem đoạn code sau nhé:

See the Pen Extra.CSS Example -- Sparkles by Una Kravets (@una) on CodePen.

Ở đây mình có một số lưu ý là:

  • sparkleNumber: Xác định số lượng park.
  • sparkleHue: Xác định màu sắc park.
  • sparkleHeightVariance: Xác định độ cao park.
  • sparkleWidthVariance: Xác định chiều dài park.
  • sparkleWeightVariance: Xác định độ dày park.

Sử dụng ExtraCSS - Scalloped Border:

Đây là hiệu ứng để làm đẹp border cho nội dung trang web của bạn. Và để thiết lập trực tiếp vào trang HTML thì bạn sử dụng đường dẫn CDN sau nhé:

<script src='https://unpkg.com/extra.css/scallopedBorder.js'></script>

Và để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Extra.CSS Example -- Scalloped Border by Una Kravets (@una) on CodePen.

Mình có lưu ý một số thuộc tính CSS trên là:

  • scallopRadius: Độ bo góc của đường viền
  • scallopColor: Màu sắc của đường viền
  • scallopWeight:Độ dày của đường viền

Ngoài ra trong trang chính của nó còn có các ứng dụng giúp bạn có thể tinh chỉnh thuộc tính CSS và đưa ra kết quả tương ứng ngay lập tức. Và để tham khảo thêm các hiệu ứng khác thì bạn có thể truy cập ở đây nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức về thư viện extra.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ẻ!