Một vài thủ thuật nhỏ vs CSS dưới đây sẽ giúp cho website của chúng ta bớt "nhạt nhẽo" và trở nên sống động hơn. Nếu bạn biết bất kỳ thủ thuật CSS thú vị nào khác, có thể bình luận bên dưới và mình sẽ cập nhật thêm vào danh sách này.

Font

Một font chữ đẹp có thể thay đổi cả bộ mặt website của bạn, giúp cho nó có thêm "sức sống". Thật may mắn là CSS cho phép chúng ta dễ dàng import font vào dự án của mình. Google Font là một trong những thư viện font phổ biến nhất, nó cho phép bạn dễ dàng đưa những font chữ mình yêu thích vào dự án của bản thân. Chỉ cần thêm url và chỉ định font-family là bạn đã có thể sử dụng nó dễ dàng

Cursors

Gần đây, mình có hoàn thành 1 dự án với việc phải sử dụng một con trỏ khác với dạng mặc định. Với thuộc tính cursor trong CSS, chúng ta có thể tuỳ biến hiển thị của con trỏ trong những div mà chúng ta chỉ định. Dưới đây bạn có thể thấy con trỏ đã thay đổi khi di chuyển qua đoạn text phía dưới

Fade In/Out

Nhắc đến việc làm sống động website, thì Animations là một phần không thể thiếu. Nếu bạn có nhu cầu là cho một đoạn văn bản hoặc các phần tử khác mờ dần khi xuất hiện cũng như khi nó biến mất, bạn có thể sử dụng thuộc tính animation . Tất cả những gì chúng ta cần đơn giản chỉ là chỉ định animation đó là gì, và trong bao lâu.

Transform

Một thuôc tính giúp tạo animation thú vị và sống động khác là transform, giúp bạn di chuyển các phần tử xung quanh page. Dưới đây mình đã thêm thuộc tính rotate cho ảnh, và chỉ định 4 vòng quay đầy đủ sẽ xảy ra trong 4s. Bạn có thể thực hiện rất nhiều loại animation với thuộc tính transform, chăng hạn như thay đổi tỷ lệ hiển thị, độ nghiêng, ... hoặc thậm chí là thêm phối cảnh 3D.

Image Filters

Bây giờ chúng ta có thể xây dựng bộ filter của Instagram! . May mắn thay, thuộc tính filter của CSS cung cấp cho chúng ta rất nhiều giá trị để tuỳ biển hình ảnh của chúng ta trông như thế nào. Dưới đây là một số bộ lọc bạn có thể thêm vào để cải thiện hình ảnh của mình.

Letter spacing

Lại thêm một animation nữa! Thật thú vị khi chúng ta sử dụng những khoảng trắng giữa các chữ cái và biến chúng thành một hiệu ứng động.

Lời kết

Trên đây là một số tricks nhỏ thú vị sử dụng CSS để giúp cho website của chúng ta trở nên sống động và hấp dẫn hơn. Hi vọng bài viết này sẽ giúp đỡ các bạn phần nào trong việc xây dựng một website cá nhân thật mới lạ và độc đáo.

Tham khảo: https://dev.to/kwmcminn/a-few-css-tricks-okm