5 Hiệu Ứng Hover Ấn Tượng Chỉ Với CSS

CSS (Cascading Style Sheets) là nền tảng cốt lõi của thiết kế web. Nó cho phép các nhà phát triển tạo ra các trang web có giao diện hấp dẫn và khả năng phản hồi linh hoạt. Việc bắt đầu sử dụng CSS khá dễ dàng. Tuy nhiên, để làm chủ CSS đòi hỏi sự hiểu biết sâu sắc về các chi tiết nhỏ và các kỹ thuật nâng cao. Với CSS, bạn không cần tạo kiểu riêng lẻ cho từng phần tử HTML. Điều này giúp giữ cho mã nguồn của bạn gọn gàng và hiệu quả. Khi đã thành thạo, việc tạo ra các thiết kế đẹp mắt trở nên dễ dàng hơn nhiều. Viết CSS hoàn hảo không hề đơn giản. Nhưng một khi bạn đã làm chủ nó, bạn sẽ tiết kiệm được rất nhiều thời gian và công sức.

Nếu bạn nghĩ hiệu ứng di chuột (hover effects) chỉ là những chi tiết nhỏ, hãy suy nghĩ lại. Khi được thực hiện đúng, chúng có thể cải thiện đáng kể trải nghiệm người dùng (UX). Chúng làm cho giao diện người dùng (UI) tương tác hơn. Chúng thể hiện kỹ năng frontend của bạn. Điều quan trọng là bạn không cần JavaScript để tạo ra các hoạt ảnh di chuột ấn tượng này. Trong hướng dẫn này, chúng tôi sẽ khám phá năm hiệu ứng hover chỉ dùng CSS. Các hiệu ứng này trông phức tạp nhưng đáng ngạc nhiên là rất đơn giản để triển khai.

Dù bạn đang thiết kế portfolio, landing page, hay thanh điều hướng, các hiệu ứng này sẽ thu hút người dùng. Chúng cũng giữ cho codebase của bạn sạch sẽ.

Trước Khi Bắt Đầu: Mẹo CSS Nhanh

Trước khi đi sâu vào các hiệu ứng, hãy đảm bảo bạn đã quen thuộc với các khái niệm sau:

• :hover pseudo-class.
• Các thuộc tính transition, transform, và animation.
• Cấu trúc HTML cơ bản.

Hầu hết các hiệu ứng này được xây dựng bằng cách sử dụng flexbox, positioning, và pseudo-elements như ::before và ::after.

1. Hiệu Ứng Hover Nút Phát Sáng (Glowing Button Hover Effect)

Hiệu ứng nút bắt mắt này thêm một đường viền phát sáng. Đường viền này được tạo hoạt ảnh khi di chuột. Nó hoàn hảo cho các Kêu gọi Hành động (CTA) quan trọng.

HTML

<a href="#" class="glow-button">Hover Me</a>

CSS

.glow-button {
  position: relative;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  background: #111;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
  overflow: hidden;
}
.glow-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
  animation: rotate 4s linear infinite;
  z-index: 0;
  opacity: 0;
  transition: 0.3s;
}
.glow-button:hover::before {
  opacity: 1;
}
.glow-button:hover {
  border: 2px solid white;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

2. Nâng Thẻ với Bóng Đổ (Card Lift with Shadow)

Hiệu ứng này rất tốt cho danh sách sản phẩm hoặc thẻ blog. Việc di chuột sẽ nâng thẻ lên và thêm một bóng đổ mềm mại.

HTML

<div class="card">
  <h3>Card Title</h3>
  <p>Some description text.</p>
</div>

CSS

.card {
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

Hiệu ứng này tạo cảm giác phản hồi nhanh. Nó ngay lập tức thêm chiều sâu cho giao diện người dùng của bạn.

3. Phóng To Ảnh + Chữ Hiện Dần Khi Di Chuột (Image Zoom + Text Fade on Hover)

Hiệu ứng này là lý tưởng cho các thư viện ảnh hoặc các dự án portfolio.

HTML

<div class="img-hover-box">
  <img src="your-image.jpg" alt="Sample Image" />
  <div class="overlay">View Project</div>
</div>

CSS

.img-hover-box {
  position: relative;
  width: 300px;
  overflow: hidden;
}
.img-hover-box img {
  width: 100%;
  transition: transform 0.5s ease;
}
.img-hover-box .overlay {
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  width: 100%;
  text-align: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.img-hover-box:hover img {
  transform: scale(1.1);
}
.img-hover-box:hover .overlay {
  opacity: 1;
}

4. Hiệu Ứng Gạch Chân Trượt Cho Liên Kết (Underline Swipe Effect for Links)

Đây là một hiệu ứng hover liên kết hiện đại và tối giản. Nó tạo cảm giác mượt mà và tương tác.

HTML

<a href="#" class="underline-hover">Read More</a>

CSS

.underline-hover {
  position: relative;
  text-decoration: none;
  color: black;
  font-weight: 500;
}
.underline-hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #ff4e50;
  transition: width 0.3s ease;
}
.underline-hover:hover::after {
  width: 100%;
}

Hiệu ứng này giữ cho thiết kế của bạn sạch sẽ. Đồng thời nó đưa ra một gợi ý tương tác tinh tế.

5. Hiệu Ứng Lật Thẻ (Flip Card Hover Effect)

Bạn muốn hiển thị chi tiết ở mặt sau của một thẻ? Hiệu ứng hover này sẽ lật thẻ để lộ thêm nội dung.

HTML

<div class="flip-container">
  <div class="flipper">
    <div class="front">Front</div>
    <div class="back">Back Info</div>
  </div>
</div>

CSS

.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 150px;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: white;
}
.front {
  background: #2196f3;
}
.back {
  background: #f44336;
  transform: rotateY(180deg);
}

Hiệu ứng 3D này trông cao cấp. Nó hoàn toàn dựa vào các chuyển đổi CSS và phối cảnh.

Mẹo Bổ Sung cho Hiệu Ứng Hover

• Luôn kiểm tra trên thiết bị di động: Màn hình cảm ứng không có chức năng “hover”. Đảm bảo trải nghiệm người dùng (UX) của bạn vẫn có ý nghĩa.
• Giữ tốc độ nhanh: Sử dụng transform và opacity. Điều này giúp hoạt ảnh mượt mà hơn và được tăng tốc bằng GPU.
• Không lạm dụng: Sử dụng hiệu ứng hover một cách tiết kiệm. Điều này giúp chúng duy trì tác động mạnh mẽ và không gây mất tập trung.

Kết Luận

Năm hiệu ứng hover này chứng minh rằng CSS là đủ mạnh mẽ. Nó có thể tạo ra các trải nghiệm web phong phú và tương tác.

Dù bạn đang cải thiện UI hay thể hiện kỹ năng trong portfolio, những thủ thuật này đảm bảo thu hút sự chú ý. Chúng không làm phình to codebase của bạn.

Phần tốt nhất là: Không cần JavaScript. Không cần thư viện ngoài. Chỉ cần CSS sạch sẽ và hiệu suất cao.

Hãy thử thêm một trong những hiệu ứng này vào dự án tiếp theo của bạn. Hãy xem giao diện của bạn trở nên sống động!

Tham khảo: medium.com

32 tính năng CSS hiện đại

Thư viện JavaScript xây dựng các thành phần giao diện

5 thủ thuật CSS hiện đại

CSS mới này giúp mã của bạn sạch hơn gấp 10 lần

11 Thủ Thuật CSS Mọi Nhà Phát Triển Web Nên Biết

Bài viết này sẽ khám phá 11 thủ thuật CSS thiết yếu. Chúng có thể giúp bạn thiết kế các trang web năng động, phản hồi tốt và trực quan ấn tượng hơn. Hãy sẵn sàng phát huy sự sáng tạo và nâng cao kỹ năng thiết kế web của bạn lên một tầm cao mới!

1. CSS Variables (Biến CSS) cho Phong Cách Nhất Quán

CSS Variables cho phép bạn lưu trữ các giá trị như màu sắc và phông chữ tại một nơi duy nhất. Điều này giúp bạn không phải lặp lại chúng ở nhiều vị trí khác nhau trong mã.

:root {
  --main-color: #3498db;
  --base-font-size: 16px;
}

body {
  color: var(--main-color);
  font-size: var(--base-font-size);
}

button {
  background-color: var(--main-color);
}

Lợi ích kinh doanh: CSS Variables giúp quản lý phong cách nhất quán. Việc thay đổi màu sắc hoặc kích thước phông chữ chỉ cần thực hiện một lần. Điều này đảm bảo cập nhật đồng bộ trên toàn bộ trang web. Nó tiết kiệm thời gian phát triển và giảm thiểu lỗi. Nó cũng duy trì nhận diện thương hiệu mạnh mẽ.

2. Flexbox cho Bố Cục Dễ Dàng

Flexbox giúp bạn sắp xếp các mục theo hàng hoặc cột. Nó cũng căn chỉnh chúng một cách phù hợp.

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item {
  flex-grow: 1;
  margin: 10px;
}

Lợi ích kinh doanh: Flexbox đơn giản hóa việc thiết kế bố cục. Nó tạo ra các bố cục phản hồi nhanh mà không cần mã phức tạp. Điều này cải thiện trải nghiệm người dùng trên nhiều thiết bị. Nó cũng tăng tốc quá trình phát triển.

3. CSS Grid cho Bố Cục Phức Tạp

Grid giúp tạo các bố cục hai chiều với hàng và cột.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.item-special {
  grid-column: span 2;
}

Lợi ích kinh doanh: CSS Grid cung cấp quyền kiểm soát chính xác vị trí của các phần tử trên trang. Điều này rất hữu ích cho các thiết kế phức tạp. Nó giúp tạo ra cấu trúc nội dung rõ ràng và hiệu quả. Nó cũng nâng cao tính chuyên nghiệp của trang web.

4. Thiết Kế Phản Hồi với Media Queries

Media Queries thay đổi kiểu dáng dựa trên kích thước màn hình. Nó giúp trang web của bạn thân thiện với thiết bị di động.

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 70%;
  }
}

Lợi ích kinh doanh: Trang web của bạn sẽ hiển thị tốt trên điện thoại, máy tính bảng và máy tính để bàn. Điều này cải thiện trải nghiệm người dùng. Nó cũng mở rộng phạm vi tiếp cận đối tượng. Nó còn có lợi cho SEO vì Google ưu tiên các trang web thân thiện với thiết bị di động.

5. Chuyển Động và Hoạt Ảnh Mượt Mà

Thêm các hiệu ứng mượt mà khi di chuột hoặc di chuyển các phần tử.

.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slide-in 0.5s ease forwards;
}

Lợi ích kinh doanh: Các hiệu ứng này làm cho trang web của bạn tương tác hơn và bóng bẩy hơn. Nó thu hút sự chú ý của người dùng. Nó cũng tạo ra trải nghiệm người dùng hiện đại và hấp dẫn. Điều này có thể tăng cường sự gắn kết của khách truy cập.

6. Pseudo-elements (Phần Tử Giả) cho Nội Dung Bổ Sung

Thêm nội dung mà không cần thêm HTML. Điều này giúp giữ mã nguồn sạch sẽ.

.tooltip::after {
  content: "Helpful tip!";
  display: none;
  position: absolute;
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

.tooltip:hover::after {
  display: block;
}

Lợi ích kinh doanh: Pseudo-elements giữ cho HTML gọn gàng. Nó vẫn thêm các chi tiết hữu ích hoặc trang trí. Điều này cải thiện khả năng bảo trì mã. Nó cũng tối ưu hóa cấu trúc ngữ nghĩa của trang. Nó giúp hiển thị nội dung hiệu quả hơn.

7. Custom Cursors (Con Trỏ Tùy Chỉnh)

Thay đổi con trỏ chuột để phù hợp với phong cách thiết kế của bạn.

.button {
  cursor: pointer;
}

.custom-cursor {
  cursor: url('cursor.png'), auto;
}

Lợi ích kinh doanh: Custom Cursors làm cho tương tác rõ ràng hơn. Nó thêm cá tính cho thương hiệu của bạn. Điều này có thể nâng cao trải nghiệm người dùng. Nó cũng tạo ra một dấu ấn độc đáo cho trang web.

8. Clip-path cho Hình Dạng Sáng Tạo

Tạo các hình dạng độc đáo mà không cần sử dụng hình ảnh.

.shape {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: circle(50% at center);
}

Lợi ích kinh doanh: Clip-path thêm sự thú vị về mặt thị giác chỉ với CSS đơn giản. Nó cho phép sự sáng tạo trong thiết kế. Nó cũng giảm sự phụ thuộc vào các tài nguyên hình ảnh nặng. Điều này giúp cải thiện hiệu suất tải trang.

9. Sticky Positioning (Định Vị Dính)

Giữ các phần tử ở đầu trang khi bạn cuộn xuống.

.header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1000;
}

Lợi ích kinh doanh: Sticky Positioning giữ cho menu hoặc tiêu đề luôn hiển thị khi cuộn. Điều này cải thiện khả năng sử dụng. Nó giúp người dùng dễ dàng điều hướng. Nó đảm bảo thông tin quan trọng luôn trong tầm nhìn.

10. Chế Độ Tối với Media Query

Tự động chuyển sang chế độ tối dựa trên tùy chọn của người dùng.

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eee;
  }
}

Lợi ích kinh doanh: Chế độ tối cải thiện khả năng tiếp cận. Nó giảm mỏi mắt cho người dùng. Nó cũng mang lại trải nghiệm xem thoải mái hơn. Điều này đặc biệt quan trọng trong điều kiện ánh sáng yếu. Nó thể hiện sự quan tâm đến người dùng.

11. Hiệu Ứng Filter (Bộ Lọc) cho Hình Ảnh Sáng Tạo

Hiệu ứng filter của CSS cho phép bạn thêm các hiệu ứng hình ảnh như làm mờ, điều chỉnh độ sáng và độ tương phản cho các phần tử một cách dễ dàng. Điều này giúp bạn tạo ra các lớp phủ và bố cục tuyệt đẹp.

.image {
  filter: brightness(80%) contrast(120%) blur(2px);
  transition: filter 0.3s ease;
}

.image:hover {
  filter: brightness(100%) contrast(100%) blur(0);
}

Lợi ích kinh doanh: Hiệu ứng filter thêm các hiệu ứng hình ảnh sáng tạo. Nó không cần Photoshop hoặc hình ảnh bổ sung. Điều này làm cho thiết kế của bạn hấp dẫn hơn. Nó cũng tăng cường sự tương tác trực quan. Nó tiết kiệm thời gian và chi phí cho việc xử lý hình ảnh.

Mẹo: CSS Reset để Tạo Kiểu Nhất Quán

Xóa các kiểu mặc định của trình duyệt để tránh sự không nhất quán.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Lợi ích kinh doanh: CSS Reset làm cho việc tạo kiểu trở nên dễ đoán trên các trình duyệt khác nhau. Điều này giảm thời gian gỡ lỗi. Nó đảm bảo giao diện người dùng đồng nhất. Nó cũng cải thiện hiệu quả phát triển.

Kết Luận

Hãy phát huy tối đa tiềm năng kỹ năng phát triển web của bạn với 11 thủ thuật CSS mạnh mẽ này! Cải thiện trải nghiệm người dùng bằng cách thêm các tính năng như chủ đề động. Ví dụ, chế độ tối, sử dụng CSS Variables kết hợp với JavaScript. Điều này giúp người dùng dễ dàng chuyển đổi giữa các tùy chọn xem thoải mái trong mọi điều kiện ánh sáng. Bây giờ là thời điểm hoàn hảo để nâng cao kỹ năng của bạn và làm chủ các kỹ thuật thiết yếu này.

Tân trang toàn diện một trang web thực tế bằng CSS

Tham khảo

Ngại sợ chạm vào CSS.

Bạn yêu thích logic backend, tích hợp API, hoặc thậm chí là React. Nhưng khi cố gắng căn chỉnh một nút hoặc căn giữa một div, CSS dường như đang trêu chọc bạn.

Đây là tin tốt:

Bạn không cần nắm vững lý thuyết CSS nâng cao. Bạn vẫn có thể tạo ra giao diện người dùng (UI) sạch, căn chỉnh tốt và nhất quán.

Bài viết này tập trung vào các giải pháp thực tế. Chúng giải quyết những vấn đề CSS phổ biến. Các giải pháp này có đường cong học tập tối thiểu. Mục tiêu là giúp bạn triển khai các thiết kế sạch. Bạn sẽ không phải ghét bỏ từng phút tạo kiểu.

Vấn đề: “Không có gì căn chỉnh đúng cách”

Bạn sử dụng margin và padding ở mọi nơi. Sau đó, bố cục của bạn bị hỏng trên các kích thước màn hình khác nhau. Bạn không biết lý do tại sao.

Giải pháp đơn giản: Sử dụng Flexbox để căn chỉnh

Flexbox là công cụ tốt nhất của bạn để căn chỉnh. Nó không yêu cầu tính toán chính xác từng pixel cho các lề.

• Để căn giữa theo chiều ngang:

  .parent {
    display: flex;
    justify-content: center;
  }

• Để căn giữa theo chiều dọc và chiều ngang:

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }

• Để căn đều các nút:

  .parent {
    display: flex;
    justify-content: space-between;
  }

Lợi ích của Flexbox:

• Nó chấm dứt việc “căn chỉnh thủ công” bằng các lề.
• Nó giúp việc căn chỉnh trở nên dễ đoán. Điều này quan trọng cho sự nhất quán của giao diện.
• Nó dễ học chỉ trong vòng chưa đầy một giờ. Điều này tiết kiệm thời gian phát triển.

Vấn đề: “Chiến tranh độ ưu tiên CSS và ghi đè không mong muốn”

Bạn thêm một kiểu, nhưng nó không được áp dụng. Bạn thêm !important, và một thứ khác lại bị hỏng.

Giải pháp đơn giản: Áp dụng chiến lược đặt tên

Sử dụng các bộ chọn nhất quán, phẳng. Tránh lồng ghép sâu. Ví dụ:

.button-primary { ... }
.button-secondary { ... }

Thay vì:

header .menu ul li a { ... }

Nếu bạn đang sử dụng một framework, hãy dùng các lớp tiện ích (utility classes). Ví dụ như Tailwind hoặc Bootstrap. Điều này giúp tránh xung đột độ ưu tiên.

Các quy tắc chính:

• Tránh sử dụng !important. Chỉ dùng nó cho các trường hợp ghi đè hiếm hoi và cần thiết.
• Ưu tiên các kiểu cấp thành phần (component-level styles) hoặc phương pháp ưu tiên tiện ích (utility-first approaches). Điều này giúp quản lý mã CSS dễ dàng hơn.

Vấn đề: “Làm cho nó phản hồi (responsive) giống như viết lại mọi thứ”

Bạn cuối cùng đã làm cho nó trông đúng trên máy tính xách tay. Nhưng nó lại bị hỏng trên thiết bị di động.

Giải pháp đơn giản: Sử dụng Media Queries theo phương pháp Mobile-First

Bắt đầu với các kiểu cơ bản cho màn hình nhỏ trước. Sau đó, mở rộng cho các màn hình lớn hơn.

Ví dụ:

.container {
  padding: 1rem;
}
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

Tại sao phương pháp này dễ dàng hơn:

• Nó buộc bạn phải ưu tiên trải nghiệm trên thiết bị di động. Đây là điều cần thiết cho người dùng hiện đại.
• Nó tránh việc phải hoàn tác các kiểu trong các media query. Điều này giảm thiểu lỗi và sự phức tạp.
• Nó giữ cho mã sạch hơn và dễ bảo trì hơn.

Nếu bạn ghét CSS, hãy cân nhắc sử dụng các framework CSS. Ví dụ như Tailwind, Bootstrap, hoặc Chakra UI. Chúng có khả năng phản hồi tích hợp sẵn.

Vấn đề: “Khoảng cách không nhất quán trên toàn ứng dụng”

Một phần có khoảng trống lớn. Một phần khác trông chật chội.

Giải pháp đơn giản: Sử dụng thang đo khoảng cách nhất quán

Xác định một hệ thống khoảng cách:

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

Sau đó áp dụng:

.section {
  padding: var(--space-lg);
}
.button {
  margin-top: var(--space-sm);
}

Hoặc sử dụng các lớp tiện ích như mt-4, p-2, gap-3 nếu bạn thích Tailwind.

Lợi ích:

• Đảm bảo sự nhất quán trên toàn bộ giao diện người dùng của bạn. Điều này tạo ra trải nghiệm chuyên nghiệp.
• Giúp việc điều chỉnh sau này dễ dàng hơn. Điều này tiết kiệm thời gian và công sức.

Vấn đề: “Phông chữ và màu sắc trông ngẫu nhiên”

Bạn sao chép và dán màu sắc và kích thước phông chữ. Nhưng ứng dụng của bạn trông không nhất quán.

Giải pháp đơn giản: Tạo một hệ thống thiết kế nhỏ (Mini Design System)

Chọn:

• 1–2 phông chữ
• 2–3 màu chính + 2–3 màu xám
• Kích thước phông chữ nhất quán cho tiêu đề và nội dung

Ví dụ trong CSS:

:root {
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Roboto', sans-serif;
 --color-primary: #3b82f6;
  --color-secondary: #f97316;
  --color-gray: #6b7280;
}

Sử dụng các biến này ở mọi nơi thay vì mã hex:

h1 {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

Điều này loại bỏ việc phải đoán mò. Nó cũng giảm sự lộn xộn trong CSS. Nó đảm bảo tính đồng bộ cho thương hiệu.

Vấn đề: “Hoạt ảnh (Animations) có vẻ khó”

Hoạt ảnh có thể làm cho ứng dụng của bạn trông bóng bẩy hơn. Nhưng chúng có vẻ đáng sợ.

Giải pháp đơn giản: Sử dụng CSS Transitions trước

Thêm hiệu ứng hover dễ dàng:

.button {
  transition: background 0.3s ease;
}
.button:hover {
  background: var(--color-secondary);
}

Để làm hiệu ứng mờ dần đơn giản khi tải trang:

.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

Khi đã quen thuộc, bạn có thể khám phá các thư viện. Ví dụ như Framer Motion cho React. Điều này giúp tạo ra các hoạt ảnh phức tạp hơn.

Vấn đề: “Có quá nhiều thứ để nhớ”

Bạn không muốn ghi nhớ Flexbox, Grid, hoặc hàng triệu thuộc tính CSS.

Giải pháp đơn giản: Sử dụng thư viện thành phần hoặc Tailwind CSS

Nếu bạn ghét CSS nhưng cần giao diện người dùng đẹp:

• Sử dụng Tailwind CSS cho kiểu dáng ưu tiên tiện ích.
• Sử dụng Chakra UI hoặc Material UI cho các dự án React.
• Sử dụng Bootstrap cho các bố cục cổ điển, dễ dàng.

Những công cụ này xử lý 80% nhu cầu giao diện người dùng của bạn. Bạn không cần viết CSS truyền thống. Điều này tăng tốc độ phát triển đáng kể.

Gỡ lỗi CSS mà không mất trí

• Sử dụng DevTools (F12) để kiểm tra các phần tử. Xem các kiểu được áp dụng.
• Kiểm tra các kiểu đã tính toán (computed styles). Điều này giúp hiểu tại sao một thuộc tính không được áp dụng.
• Thêm các đường viền tạm thời (border: 1px solid red;). Điều này giúp gỡ lỗi các vấn đề về bố cục.
• Nếu có điều gì đó không ổn, hãy kiểm tra các container cha. Tìm các vấn đề về overflow, flex, hoặc grid.

Tóm tắt: Bạn không cần phải là chuyên gia CSS để xây dựng giao diện người dùng sạch

• Sử dụng Flexbox để căn chỉnh.
• Sử dụng media queries theo phương pháp mobile-first để phản hồi.
• Tạo một hệ thống thiết kế nhỏ cho phông chữ, màu sắc và khoảng cách.
• Sử dụng thư viện thành phần hoặc các framework ưu tiên tiện ích nếu CSS làm bạn khó chịu.
• Sử dụng DevTools để gỡ lỗi thay vì đoán mò.

DevTools trợ giúp về kiểu dáng và gỡ lỗi CSS

Tạo kiểu là việc dễ dàng và nhanh chóng nhất bạn có thể làm khi sử dụng Trợ lý AI của Chrome. Bạn có thể nhấp trực tiếp vào biểu tượng “Hỏi AI” ở bên phải bất kỳ phần tử nào và bắt đầu hỏi AI xem bạn cần thay đổi css nào cho trang của mình. Bạn cũng có thể hỏi xem một số phần tử/kiểu nào đó có hoạt động không bình thường không.

Tôi đã chọn toàn bộ mã HTML cho trang bên dưới và yêu cầu Chrome AI thay đổi màu nền và phông chữ.

Mặc dù nó đã thực hiện những thay đổi, nhưng tôi có cảm giác nó sẽ bị hỏng với những lời nhắc phức tạp.

Vậy nên tôi đã yêu cầu Chrome AI di chuyển “Panel” từ trái sang phải. Sau 1 tiếng loay hoay mãi mà vẫn không được.

Tóm tắt:Nó hoạt động hoàn hảo với các yêu cầu đơn giản hàng ngày, nhưng có thể gặp khó khăn với các yêu cầu phức tạp hơn.Tuy nhiên, bạn sẽ không phải giải thích mã và ngữ cảnh bằng cách chuyển tab liên tục, nên đây là một điểm cộng!

Đánh giá tính hữu ích: 6/10 (Thích hợp để sửa lỗi nhanh, không thích hợp để thiết kế lại toàn bộ.)

Tài liệu:tại đây

Lời kết

CSS có thể gây khó chịu. Nhưng với các thực hành có cấu trúc, đơn giản, bạn có thể làm cho ứng dụng của mình trông chuyên nghiệp. Bạn sẽ không phải bỏ dở dự án vì bực tức.

Mục tiêu không phải là để thành thạo CSS. Mục tiêu là làm cho giao diện người dùng của bạn đủ sạch. Để người dùng yêu thích nó. Và bạn có thể tập trung vào những gì bạn thích xây dựng.

Hãy bắt đầu với những thay đổi nhỏ. Xây dựng sự tự tin của bạn. Bạn sẽ thấy CSS dễ chịu hơn. Ngay cả khi bạn không bao giờ yêu thích nó.

Tham khảo: medium.com

Bản nâng cấp CSS nhỏ

Tuần trước, khi gỡ lỗi một sự cố về chủ đề, tôi đã nhận thấy một điều đáng chú ý. Thư viện thành phần của tôi có 180 biến màu. Việc cập nhật màu thương hiệu chính đòi hỏi phải đồng bộ hóa thủ công 15 sắc thái, trạng thái di chuột và mức độ trong suốt khác nhau. Quá trình này được thực hiện trên ba tệp. Nếu bạn đã làm việc với các hệ thống thiết kế, bạn có thể đã nghe nói về “design tokens”. Hầu hết chúng ta định nghĩa màu sắc bằng mã hex cố định hoặc giá trị RGB. Tuy nhiên, các giá trị tĩnh có thể trở thành một vấn đề lớn khi chủ đề sản phẩm của bạn cần được làm mới. Hôm nay, chúng ta sẽ xem xét một tính năng của CSS. Tính năng này cho phép bạn tạo các sắc thái, tông màu và độ đậm nhạt “tương đối” so với một màu cơ bản. Điều này có nghĩa là bạn có thể cập nhật một biến duy nhất. Giao diện người dùng (UI) sẽ tự động điều chỉnh theo. Hãy cùng tìm hiểu cách tận dụng khả năng mạnh mẽ này để xây dựng các UI thích ứng và dễ bảo trì.

Phương Pháp Truyền Thống

Hầu hết các hệ thống thiết kế mà tôi từng làm việc đều có cấu trúc tương tự như sau:

Bạn định nghĩa một màu cơ bản.

Sau đó, bạn tạo thủ công các biến thể cho mọi trường hợp sử dụng có thể.

Ví dụ:

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-primary-light: #93c5fd;
  --color-primary-dark: #1e40af;
  
  --color-secondary: #8b5cf6;
  --color-secondary-hover: #7c3aed;
  --color-secondary-active: #6d28d9;
  /* ... và cứ thế tiếp tục */}

Đây là hơn 15 biến cho mỗi màu.

Nếu nhân số biến này với toàn bộ bảng màu của bạn, bạn sẽ phải quản lý hàng trăm design tokens.

Mỗi khi đội ngũ thiết kế điều chỉnh màu chính, bạn phải cập nhật 15 biến.

Nếu bỏ sót một biến, trạng thái di chuột của bạn sẽ trông kỳ lạ.

Tôi đã từng trải qua điều này.

Việc sao chép mã hex, chuyển đổi thủ công sang RGBA và mở các công cụ chọn màu rất tốn công sức.

Chủ Đề Động Với Màu Tương Đối Trong CSS

Màu tương đối cho phép bạn tạo các màu mới dựa trên các màu hiện có.

Bạn chỉ cần viết một màu cơ bản.

Sau đó, tất cả các biến thể sẽ được tạo ra một cách lập trình từ màu đó.

Cú pháp sử dụng từ khóa from.

Từ khóa này phân tách một màu thành các thành phần mà bạn có thể thao tác.

Đây là cấu trúc mà tôi đã mất một chút thời gian để hiểu rõ:

color-function(from origin-color channel1 channel2 channel3 / alpha)

Hãy cùng phân tích từng phần, vì ban đầu nó cũng làm tôi bối rối:

• color-function: Đây là định dạng đầu ra của bạn, ví dụ như rgb(), hsl() hoặc oklch().
• from: Từ khóa “thần kỳ” này cho biết “Tôi đang lấy màu từ một màu khác”.
• origin-color: Đây là màu cơ bản của bạn, có thể ở bất kỳ định dạng nào (hex, rgb, hsl, v.v.).
• channel1 channel2 channel3: Đây là các thành phần màu mà bạn có thể đọc và sửa đổi.
• alpha: Đây là tùy chọn độ trong suốt, được đặt sau dấu gạch chéo (/).

Hãy xem một ví dụ đơn giản:

:root {
  --primary: #3b82f6;
}

.button {
  background: var(--primary);
}

.button:hover {
  background: hsl(from var(--primary) h s calc(l - 10));
}

Bây giờ, việc thay đổi một biến duy nhất sẽ tự động thay đổi tất cả các biến thể trong thiết kế.

Cách Hoạt Động Thực Tế

Từ Khóa from

Khi bạn viết from green, trình duyệt sẽ chuyển đổi màu đó sang định dạng bạn đã chỉ định.

Ví dụ, rgb(from green r g b) sẽ chuyển màu xanh lá cây thành r=0 g=128 b=0.

Đây không chỉ là các giá trị thông thường.

Chúng là các biến mà bạn có thể sử dụng.

Ví dụ:

• rgb(from green g g g) sẽ tạo ra rgb(128 128 128) bằng cách lặp lại kênh màu xanh lá cây.
• rgb(from green b r g) sẽ tạo ra rgb(0 0 128) bằng cách hoán đổi các kênh.

Ban đầu điều này có vẻ kỳ lạ đối với tôi.

Nhưng nó rất mạnh mẽ khi bạn nhận ra rằng mình có thể kết hợp và phối hợp các kênh màu.

Chuyển Đổi Không Gian Màu

Màu sau từ khóa from sẽ được chuyển đổi sang không gian màu mà bạn đang làm việc.

Ví dụ:

• hsl(from rgb(255 0 0) h s l) sẽ chuyển đổi màu đỏ từ định dạng RGB sang HSL.
• oklch(from #3b82f6 l c h) sẽ chuyển đổi màu xanh lam dạng hex sang OKLCH.

Bạn không cần phải biết định dạng nguồn của màu.

Trình duyệt sẽ tự động xử lý việc chuyển đổi.

Điều này rất quan trọng đối với design tokens.

Token của bạn có thể ở bất kỳ định dạng nào và bạn vẫn có thể tạo ra các biến thể một cách nhất quán từ đó.

Sử Dụng calc() Để Sửa Đổi Kênh

Đây là lúc mọi thứ trở nên thực tế.

Bạn có thể sử dụng hàm calc() trên bất kỳ kênh màu nào.

• Để làm sáng màu bằng cách tăng độ sáng: hsl(from blue h s calc(l + 20)).
• Để làm tối màu bằng cách giảm độ sáng: hsl(from blue h s calc(l - 20)).
• Để giảm độ mờ: rgb(from blue r g b / calc(alpha * 0.5)).
• Để xoay sắc độ: hsl(from blue calc(h + 180) s l).

Tôi bắt đầu nhận ra các mẫu ở khắp mọi nơi.

Hầu hết các thao tác màu sắc chỉ là phép cộng, phép trừ hoặc phép nhân trên các kênh.

Ưu Điểm Của OKLCH

Tôi đã sử dụng HSL trong nhiều năm.

Nó có vẻ hợp lý: Sắc độ (Hue), Độ bão hòa (Saturation), Độ sáng (Lightness).

Tuy nhiên, HSL có một vấn đề mà tôi chưa bao giờ nhận ra cho đến khi tìm hiểu về OKLCH.

Hãy nhìn vào hai màu này, cả hai đều có độ sáng 50% trong HSL:

• hsl(220 80% 50%) (Màu xanh lam)
• hsl(120 80% 50%) (Màu xanh lá cây)

Chúng lẽ ra phải trông sáng như nhau, phải không?

Không phải vậy.

Màu xanh lá cây trông sáng hơn rất nhiều đối với mắt người.

OKLCH khắc phục vấn đề này.

Nó cung cấp độ sáng đồng đều, có nghĩa là giá trị độ sáng thực sự tương ứng với mức độ sáng mà chúng ta cảm nhận được.

• oklch(55% 0.15 260) (Màu xanh lam – thực sự trông sáng như vậy)
• oklch(55% 0.15 140) (Màu xanh lá cây – được điều chỉnh để phù hợp với độ sáng cảm nhận)

Cấu Trúc OKLCH

OKLCH có ba giá trị, tương tự như HSL nhưng theo một thứ tự khác:

• L (Lightness – Độ sáng): Từ 0 đến 1 hoặc 0% đến 100%, trong đó 0 là màu đen và 1 là màu trắng.
• C (Chroma – Độ chói): Từ 0 đến khoảng 0.37, đại diện cho cường độ màu (không phải độ bão hòa).
• H (Hue – Sắc độ): Từ 0 đến 360 độ quanh vòng tròn màu.

Phạm vi độ chói ban đầu làm tôi bối rối.

Không giống như HSL, nơi độ bão hòa từ 0–100%, độ chói trong OKLCH đạt tối đa khoảng 0.37 đối với hầu hết các màu.

Ví dụ: oklch(0.6 0.2 265) đại diện cho độ sáng trung bình, độ chói vừa phải và sắc độ xanh lam.

Mô hình tư duy giúp tôi hiểu rõ hơn là: Độ chói thể hiện mức độ tinh khiết của màu.

Độ chói bằng 0 là màu xám.

Độ chói cao là màu sắc sống động.

Tại Sao Điều Này Quan Trọng Đối Với Design Tokens

Khi bạn thao tác với màu OKLCH, các thay đổi sẽ có thể dự đoán được.

Nếu tăng độ sáng lên 0.1, mọi sắc độ sẽ trở nên sáng hơn như nhau đối với mắt người.

Với HSL, việc tăng độ sáng 10% trên màu vàng trông khác với cùng một thay đổi trên màu xanh lam.

Điều này giúp việc tạo màu theo chương trình trở nên đáng tin cậy hơn rất nhiều.

Xây Dựng Hệ Thống Design Token Với Màu Tương Đối

Hãy để tôi trình bày mẫu mà tôi sử dụng trong sản xuất:

:root {
  /* Màu thương hiệu cơ bản trong OKLCH */  --brand-primary: oklch(0.55 0.2 265);
  --brand-success: oklch(0.65 0.18 145);
  --brand-error: oklch(0.6 0.25 25);
  --brand-warning: oklch(0.75 0.15 85);
}

Chỉ có bốn màu cơ bản này.

Mọi thứ khác đều được tạo ra từ chúng.

Tạo Một Bảng Màu Hoàn Chỉnh

:root {
  /* Bảng màu chính */  --primary: var(--brand-primary);
  --primary-hover: oklch(from var(--brand-primary) calc(l - 0.1) c h);
  --primary-active: oklch(from var(--brand-primary) calc(l - 0.15) c h);
  --primary-light: oklch(from var(--brand-primary) calc(l + 0.2) calc(c * 0.5) h);
  --primary-lighter: oklch(from var(--brand-primary) calc(l + 0.3) calc(c * 0.3) h);
  --primary-alpha-10: oklch(from var(--brand-primary) l c h / 0.1);
  --primary-alpha-20: oklch(from var(--brand-primary) l c h / 0.2);
  
  /* Bảng màu thành công */  --success: var(--brand-success);
  --success-hover: oklch(from var(--brand-success) calc(l - 0.1) c h);
  --success-light: oklch(from var(--brand-success) calc(l + 0.2) calc(c * 0.5) h);
  --success-alpha-10: oklch(from var(--brand-success) l c h / 0.1);
  
  /* Bảng màu lỗi */  --error: var(--brand-error);
  --error-hover: oklch(from var(--brand-error) calc(l - 0.1) c h);
  --error-light: oklch(from var(--brand-error) calc(l + 0.2) calc(c * 0.5) h);
  --error-alpha-10: oklch(from var(--brand-error) l c h / 0.1);
}

Bốn màu cơ bản đã được mở rộng thành một hệ thống hoàn chỉnh.

Khi nhà thiết kế của bạn điều chỉnh màu chính, bạn chỉ cần thay đổi một giá trị hex.

Mọi thứ sẽ tự động cập nhật.

Chế Độ Tối Không Trùng Lặp

Mẫu này đã làm tôi kinh ngạc khi lần đầu thử nghiệm.

:root {
  --surface: oklch(0.98 0.02 240);
  --text: oklch(0.25 0.03 240);
}

[data-theme="dark"] {
  /* Đảo ngược độ sáng cho chế độ tối */  --surface: oklch(from oklch(0.98 0.02 240) calc(1 - l) c h);
  --text: oklch(from oklch(0.25 0.03 240) calc(1 - l) c h);
}

Mối quan hệ giữa văn bản và nền vẫn nhất quán.

Các giá trị được đảo ngược một cách lập trình.

Các Mẫu Nâng Cao Đã Giải Quyết Các Vấn Đề Thực Tế

Hãy cùng xem xét một số mẫu mà tôi đã tìm thấy khi làm việc với tính năng này.

Lớp Phủ Trong Suốt

Tôi đang xây dựng một hộp thoại (modal) và cần một lớp nền (backdrop).

.modal-backdrop {
  background: oklch(from black l c h / 0.7);
}

Bóng Động

Các thành phần thẻ (card) có bóng màu dựa trên nền.

.card {
  --card-bg: var(--primary);
  background: var(--card-bg);
  box-shadow: 
    0 4px 6px oklch(from var(--card-bg) l c h / 0.2),
    0 10px 15px oklch(from var(--card-bg) l c h / 0.15);
}

Màu bóng được tạo ra từ nền của thẻ.

Thay đổi nền, bóng sẽ tự động cập nhật.

Màu Tương Phản Dễ Tiếp Cận

Kỹ thuật này sử dụng độ sáng đồng đều để đảm bảo văn bản dễ đọc.

.tag {
  --tag-bg: var(--primary);
  background: var(--tag-bg);
  /* Đảm bảo văn bản sáng hơn 60% để có độ tương phản tốt */  color: oklch(from var(--tag-bg) calc(l + 0.6) c h);
}

.tag--dark {
  --tag-bg: oklch(0.3 0.15 200);
  /* Hoặc tối hơn 60% nếu nền sáng */  color: oklch(from var(--tag-bg) calc(l - 0.6) c h);
}

Kỹ thuật L* delta đặt mục tiêu chênh lệch khoảng 60% để có độ tương phản mạnh.

Hỗ Trợ Trình Duyệt Và Các Giải Pháp Dự Phòng

Tính đến tháng 10 năm 2025, màu tương đối hoạt động trên:

• Chrome 119+
• Firefox 128+
• Safari 16.4+
• Edge 119+

Điều này bao gồm khoảng 83% người dùng trên toàn cầu.

Những Lỗi Thường Gặp Mà Tôi Đã Mắc Phải (Để Bạn Không Gặp Phải)

• Xích Chuỗi Quá Sâu: Đừng tạo màu từ các màu đã được tạo ra từ các màu khác. Hãy giữ ở mức tối đa một hoặc hai cấp độ.
• Vượt Quá Giới Hạn Độ Chói (Chroma): Độ chói của OKLCH đạt tối đa khoảng 0.37 cho màn hình sRGB. Nếu đẩy cao hơn, màu sắc có thể bị cắt một cách không thể đoán trước.
• Quên Cú Pháp Alpha: Alpha được đặt sau dấu gạch chéo (oklch(0.6 0.2 265 / 0.5)), không phải là giá trị thứ tư (oklch(0.6 0.2 265 0.5)).

Tôi tin rằng tính năng này giải quyết một số vấn đề lớn và nghiêm trọng khi xây dựng và duy trì một hệ thống thiết kế. Hãy thử nghiệm và khám phá nó.

Tham khảo: medium.com

Tự Động Chế Độ Tối Trang Web Bằng CSS, Không Cần JS

Bạn muốn thêm chế độ tối (dark mode) vào trang web của mình? Tin tốt là việc này dễ dàng hơn bạn nghĩ. Chúng tôi sẽ hướng dẫn bạn cách để trang web tự động chuyển đổi giữa giao diện sáng (light theme) và tối (dark theme). Việc chuyển đổi này dựa trên sở thích của khách truy cập. Chúng ta sẽ thực hiện mà không cần viết bất kỳ dòng mã JavaScript nào.

Điều Chúng Ta Sẽ Xây Dựng

Điện thoại của bạn tự động chuyển sang chế độ tối vào ban đêm. Trang web của bạn cũng sẽ hoạt động tương tự. Khi khách truy cập vào trang web, nó sẽ tự động khớp với cài đặt hệ thống của họ.

Nếu họ sử dụng chế độ tối trên điện thoại, họ sẽ thấy trang web của bạn ở chế độ tối.

Nếu họ thích chế độ sáng, trang web sẽ hiển thị ở chế độ sáng.

Không cần nút bấm hay công tắc, mọi thứ chỉ đơn giản là hoạt động.

Phép Thuật Đằng Sau

Có một tính năng CSS gọi là prefers-color-scheme.

Tính năng này kiểm tra chủ đề mà người dùng đang sử dụng trên thiết bị của họ.

Nó được tích hợp sẵn trong tất cả các trình duyệt hiện đại.

Việc sử dụng tính năng này cực kỳ đơn giản.

Đây là ý tưởng cơ bản:

:root {
  --bg: #fafafa;
  --text: #0a0a0a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --text: #fafafa;
  }
}
body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease;
}

Đoạn mã này làm gì?

Chúng ta đang thiết lập các biến màu (color variables).

Ở chế độ sáng, nền có màu sáng và chữ có màu tối.

Khi chế độ tối được kích hoạt, chúng ta sẽ đảo ngược các màu này.

Tại Sao Nên Sử Dụng Biến?

Các biến --bg và --text là các biến CSS.

Chúng hoạt động như các “thùng chứa” để lưu trữ màu sắc của bạn.

Phần tuyệt vời là bạn chỉ cần định nghĩa chúng một lần.

Sau đó, bạn có thể sử dụng chúng ở mọi nơi trên trang web.

Khi chủ đề thay đổi, mọi thứ sẽ tự động cập nhật.

Bạn không cần phải duyệt qua toàn bộ stylesheet để thay đổi màu sắc từng cái một.

Điều này giúp tiết kiệm thời gian và giảm thiểu lỗi cho doanh nghiệp.

Kiểm Tra Hoạt Động

Bạn muốn xem liệu nó có hoạt động không?

Hãy thử cách này:

• Nếu bạn đang dùng máy Mac, hãy vào System Preferences và thay đổi cài đặt Appearance của bạn.
• Trên Windows, hãy kiểm tra cài đặt màu sắc trong phần Personalization.

Trang web của bạn sẽ chuyển đổi ngay lập tức.

Bạn cũng có thể kiểm tra trong Chrome DevTools.

Nhấn Cmd+Shift+C.

Gõ “dark mode”.

Bạn sẽ thấy một tùy chọn để mô phỏng các lược đồ màu khác nhau.

Một Vài Điều Chúng Tôi Đã Học Được

Sau khi xây dựng tính năng này cho nhiều dự án, đây là những lời khuyên của chúng tôi:

• Không sử dụng nền đen tuyền.Màu như #0a0a0a trông đẹp hơn nhiều so với #000000 (đen tuyền).

  Màu đen tuyền thực sự có thể khó đọc hơn trên một số màn hình.

• Thêm thuộc tính transition.Khi màu sắc thay đổi, bạn muốn nó diễn ra mượt mà, không giật cục.

  Thuộc tính transition: background-color 0.3s ease; nhỏ bé đó tạo ra sự khác biệt lớn.

  Nó cải thiện trải nghiệm người dùng.

• Kiểm tra cả hai chế độ đúng cách.Đôi khi, màu sắc trông tuyệt vời ở chế độ sáng lại hoàn toàn không phù hợp ở chế độ tối.

  Hãy kiểm tra mọi thứ kỹ lưỡng trước khi triển khai.

Tại Sao Không Chỉ Thêm Một Nút Chuyển Đổi?

Bạn có thể nghĩ: “Tại sao không chỉ thêm một nút để mọi người có thể chuyển đổi thủ công?”

Bạn có thể làm vậy, nhưng hãy xem xét điều này:

Nếu ai đó đã chọn chế độ tối cho toàn bộ hệ điều hành của họ, họ muốn chế độ tối ở mọi nơi.

Tại sao lại bắt họ nhấp thêm một nút nữa?

Cách tiếp cận này tự động tôn trọng lựa chọn của họ.

Thêm vào đó, nó nhanh hơn (không cần JavaScript), đơn giản hơn (ít mã hơn), và chỉ cần hoạt động.

Thật khó để đánh bại những lợi ích này.

Những Gì Bạn Cần Làm

Thành thật mà nói, đó là tất cả những gì cần làm.

Lấy đoạn mã trên, thay thế bằng màu sắc của riêng bạn, và bạn đã hoàn tất.

Hãy đảm bảo bạn định nghĩa các biến cho mọi thứ: nền, văn bản, đường viền, bất cứ thứ gì bạn đang sử dụng trong dự án của mình.

Sau đó, thiết lập các lựa chọn thay thế cho chế độ tối trong truy vấn phương tiện (media query) đó.

Trình duyệt sẽ xử lý phần còn lại.

Suy Nghĩ Cuối Cùng

Chúng tôi yêu thích tính năng này vì nó là một trong những điều khiến trang web của bạn trông chuyên nghiệp.

Nó không đòi hỏi nhiều công sức.

Khách truy cập của bạn có thể sẽ không nhận thấy nó một cách có ý thức.

Họ sẽ chỉ cảm thấy rằng trang web của bạn “hiểu” họ.

Và đó là mục đích của một thiết kế tốt, phải không?

Hãy thử áp dụng, những khách truy cập lúc 2 giờ sáng của bạn sẽ đánh giá cao điều đó.

Tham Khảo Nhanh

• Thiết lập màu sáng trong :root.
• Thêm màu tối trong @media (prefers-color-scheme: dark).
• Sử dụng var() để áp dụng chúng.
• Thêm hiệu ứng chuyển đổi mượt mà.
• Kiểm tra trên các thiết bị thực tế.

Đó là tất cả những gì cần làm. Bây giờ, hãy bắt tay vào xây dựng điều gì đó tuyệt vời.

Tham khảo: medium.com