CSS3

Ảnh minh họa: CSS BEM naming convention cho người

CSS BEM naming convention cho người mới

02/10/2025 0 7 4 phút đọc

BEM (Block – Element – Modifier) là một quy tắc đặt tên class trong CSS giúp code rõ ràng, dễ đọc và dễ mở rộng. Với BEM, bạn có thể quản lý style cho các...

Hiệu ứng trên web và tác động đến hiệu năng thiết bị

02/10/2025 0 36 7 phút đọc

Hiệu ứng hình ảnh trên trang web là yếu tố quan trọng trong việc tạo trải nghiệm trực quan hấp dẫn cho người dùng. Tuy nhiên, nếu lạm dụng hoặc triển khai không đúng cách,...

Ảnh minh họa: CSS Houdini: Khi dev có thể

CSS Houdini: Khi dev có thể hack vào engine của trình duyệt

24/09/2025 0 6 4 phút đọc

Trong nhiều năm, CSS thường bị coi là “ngôn ngữ trang điểm” – mạnh nhưng giới hạn. Nếu trình duyệt không hỗ trợ thuộc tính nào đó, lập trình viên gần như bó tay hoặc...

Ảnh minh họa: CSS Color Level 4: Tận dụng

CSS Color Level 4: Tận dụng màu sắc hiện đại (lab, lch, color-mix)

23/09/2025 0 16 4 phút đọc

Demo

Trước đây, CSS chỉ xoay quanh các hệ màu quen thuộc như HEX, RGB hay HSL. Chúng đủ dùng nhưng thiếu độ chính xác về màu sắc, nhất là khi hiển thị trên màn hình...

Ảnh minh họa: Has() selector: CSS giờ đã có

Has() selector: CSS giờ đã có parent selector

22/09/2025 0 6 4 phút đọc

:has() là relational pseudo-class cho phép chọn một phần tử dựa trên những gì nó chứa hoặc đứng kề. Nói nôm na, đây là “parent selector” mà cộng đồng chờ đợi nhiều năm: bạn có...

Ảnh minh họa: CSS Nesting chính thức: Viết CSS

CSS Nesting chính thức: Viết CSS gọn như SCSS mà không cần preprocessor

21/09/2025 0 4 3 phút đọc

Trong nhiều năm, lập trình viên front-end phải dựa vào SCSS, LESS hoặc PostCSS để viết CSS theo dạng “lồng” (nesting). Điều này giúp code gọn, dễ đọc và quản lý component rõ ràng hơn....

Ảnh minh họa: Glassmorphism Card bằng CSS và UIkit:

Glassmorphism Card bằng CSS và UIkit: Trong suốt, mờ nền và nổi bật nội dung

13/09/2025 0 79 5 phút đọc

Demo

Glassmorphism tạo cảm giác mặt kính: nền mờ, bề mặt trong suốt và viền sáng nhẹ. Phong cách này giúp nội dung nổi bật trên ảnh nền hoặc gradient mà vẫn giữ được độ sang...

Ảnh minh họa: Floating Label Form với UIkit: Label

Floating Label Form với UIkit: Label bay lên khi nhập, gọn đẹp và dễ đọc

13/09/2025 0 9 4 phút đọc

Demo

Floating Label giúp trường nhập liệu gọn gàng: nhãn nằm trong ô khi trống và trượt lên phía trên khi người dùng nhập. Kỹ thuật này cải thiện khả năng quét thông tin, tiết kiệm...

Ảnh minh họa: Card 3D Hover Effect bằng CSS

Card 3D Hover Effect bằng CSS Perspective: Hiệu ứng nghiêng theo chuột mượt mà

12/09/2025 0 31 5 phút đọc

Demo

Hiệu ứng 3D hover giúp thẻ nội dung nghiêng nhẹ theo vị trí con trỏ chuột, tạo cảm giác chiều sâu và tương tác cao. Bài viết này hướng dẫn bạn xây dựng Card 3D...

Ảnh minh họa: Loading Skeleton: Giả lập nội dung

Loading Skeleton: Giả lập nội dung như Facebook bằng HTML, CSS và JS

12/09/2025 0 18 4 phút đọc

Demo

Loading Skeleton là kỹ thuật hiển thị khung xám mô phỏng nội dung trong lúc dữ liệu thật đang tải về. Thay vì vòng xoay chờ, skeleton giữ nguyên bố cục, giúp người dùng cảm...

Ảnh minh họa: Canvas API: Vẽ đồng hồ kim

Canvas API: Vẽ đồng hồ kim động bằng HTML5 Canvas

09/09/2025 0 21 5 phút đọc

Demo

Canvas API cho phép bạn vẽ đồ họa 2D ngay trong trình duyệt, từ hình cơ bản, biểu đồ, đến game mini. Bài này mình sẽ dựng một đồng hồ kim analog chạy thời gian...

Blog Tĩnh #12 – Tích hợp banner, CTA hoặc widget bằng HTML đơn giản

01/06/2025 0 17 2 phút đọc

Bạn không cần plugin, không cần builder để thêm banner quảng bá, nút gọi hành động (CTA) hoặc widget tùy chỉnh. Trong blog tĩnh, chỉ cần 1 khối HTML và vài dòng CSS là đủ...

Blog Tĩnh #11 – Tùy biến UI: Thẻ tag, tooltip, callout box đẹp mắt chỉ bằng HTML/CSS

31/05/2025 0 26 2 phút đọc

Bài viết này giúp bạn tạo các thành phần UI thường thấy trong blog kỹ thuật: tag, tooltip, callout box (Chú ý, Cảnh báo, Mẹo…) – gọn nhẹ, đẹp, không cần JS.

Blog Tĩnh #10 – Tự tạo hệ thống Previous / Next bài viết mà không cần build tool

30/05/2025 0 6 3 phút đọc

Ở các blog CMS như WordPress, bạn dễ dàng hiển thị bài trước/sau. Nhưng nếu viết bằng HTML thuần thì sao? Tin vui là bạn vẫn có thể làm được – chỉ cần chút kỷ...

Ảnh minh họa: Blog Tĩnh #06 – Thêm Table

Blog Tĩnh #06 – Thêm Table of Contents (TOC) cố định khi cuộn

26/05/2025 0 28 2 phút đọc

Với những bài viết dài, TOC (table of contents – mục lục) giúp người đọc điều hướng dễ hơn. Trong blog tĩnh HTML/CSS, bạn hoàn toàn có thể thêm TOC cố định chỉ bằng HTML...

Ảnh minh họa: Blog Tĩnh #05 – Tạo layout

Blog Tĩnh #05 – Tạo layout responsive đơn giản

25/05/2025 0 6 2 phút đọc

Blog đẹp cỡ nào mà đọc trên điện thoại vẫn bị vỡ layout thì cũng hỏng. Responsive là yếu tố cơ bản nhất để blog bạn trông chuyên nghiệp – trên mọi thiết bị. Tin...

Blog Tĩnh #04 – Tạo Dark Mode đơn giản bằng CSS, không cần JavaScript

24/05/2025 0 13 2 phút đọc

Dark Mode không chỉ là xu hướng – nó còn giúp giảm mỏi mắt, tiết kiệm pin và cải thiện UX tổng thể. Tin vui là bạn hoàn toàn có thể thêm Dark Mode cho...

Blog Tĩnh #01 – Tự tạo một boilerplate HTML/CSS đơn giản & dễ mở rộng

21/05/2025 0 16 4 phút đọc

Không cần dùng WordPress, không cần framework nặng. Bạn hoàn toàn có thể tự tạo một blog tĩnh bằng HTML/CSS từ đầu – sạch, nhẹ, không ràng buộc. Dưới đây là hướng dẫn tạo boilerplate...

Ảnh minh họa: Hướng dẫn tùy chỉnh giao diện

Hướng dẫn tùy chỉnh giao diện Init Live Search khi tắt CSS mặc định

18/05/2025 0 29 4 phút đọc

Init Live Search cung cấp nhiều tuỳ chọn linh hoạt để bạn điều chỉnh giao diện tìm kiếm sao cho phù hợp nhất với website của mình. Bạn có thể chọn ngay một trong các...

Plugin

Init FX Engine – Plugin tạo hiệu ứng tương tác cho WordPress 1.6

17/05/2025 0 164 6 phút đọc

Init FX Engine giúp trang WordPress trở nên sinh động hơn với các hiệu ứng như pháo hoa, emoji rơi, tuyết rơi, màn hình loading... được kích hoạt tự động qua từ khóa trong bình...

Init FX Engine – Plugin tạo hiệu ứng tương tác cho WordPress 1.6

Công cụ trực tuyến

Đăng nhập