Tạo kiểu cho bản dịch của bạn theo cách của bạn với Tùy chỉnh CSS

Tạo phong cách cho bản dịch của bạn theo cách của bạn 🎨

Bạn đã bao giờ ước bản dịch của mình có thể phù hợp với cảm xúc đọc của bạn chưa? Có thể bạn muốn những gam màu phấn nhẹ nhàng để đọc trước khi đi ngủ hoặc những gam màu đậm cho buổi học?

Bây giờ bạn nắm quyền kiểm soát. Tính năng Tùy chỉnh CSS của Read Frog cho phép bạn thiết kế chính xác cách bản dịch của bạn xuất hiện trên bất kỳ trang web nào.

Tại sao phong cách tùy chỉnh lại quan trọng 💡

Kiểu dịch mặc định hoạt động tốt... cho đến khi không hoạt động. Nội dung khác nhau cần xử lý hình ảnh khác nhau:

Gặp gỡ biên tập viên CSS mới của bạn ⚡

Chúng tôi không chỉ thêm một hộp văn bản và kết thúc một ngày. Trình soạn thảo CSS của Read Frog có quyền lực hợp pháp:

Được xây dựng cho mọi người

Dành cho người mới bắt đầu:

• 🎨 Bộ chọn màu - Nhấp vào bất kỳ giá trị màu nào để mở bộ chọn màu trực quan
• ✅ Xác thực trực tiếp - Phản hồi tức thì về lỗi cú pháp
• 💡 Đề xuất thông minh - Tự động hoàn thành khi bạn nhập
• 📝 Mẫu ví dụ - Bắt đầu từ các ví dụ hoạt động

Dành cho người dùng nâng cao:

• ⚡ Hỗ trợ đầy đủ CSS - Sử dụng độ dốc, bóng, hình động, biến
• 🔧 Đánh dấu cú pháp - Trình chỉnh sửa được hỗ trợ CodeMirror
• 📏 Số dòng & cách gấp - Điều hướng các bảng định kiểu lớn một cách dễ dàng
• 🎯 Máng xối - Xem nhanh lỗi

Phép thuật chọn màu 🌈

Đây là nơi mọi thứ trở nên thú vị. Viết màu CSS dùng có nghĩa là:

❌ Lên Google "chọn màu" ❌ Sao chép mã hex ❌ Chuyển đổi giữa các tab ❌ Hy vọng là đúng

Bây giờ? Chỉ cần nhấp vào bất kỳ màu nào trong CSS của bạn:

1. Nhập hoặc dán bất kỳ định dạng màu nào: #FF5733, rgb(255, 87, 51), hsl(9, 100%, 60%)
2. Nhấp vào nó - Bộ chọn màu xuất hiện ngay lập tức
3. Điều chỉnh trực quan - Kéo, trượt hoặc nhập giá trị mới
4. Xong - Cập nhật màu sắc theo thời gian thực

Bộ chọn hiểu tất cả định dạng màu CSS:

• Hệ lục phân: #FF5733
• RGB/RGBA: rgba(255, 87, 51, 0.8)
• HSL/HSLA: hsla(9, 100%, 60%, 0.8)
• Tên màu: tomato, skyblue, gold
• CSS biến: var(--my-color)

Xác thực trực tiếp giúp bạn tỉnh táo ✨

Bạn đã bao giờ lưu CSS chỉ để nhận ra rằng nó đã phá vỡ mọi thứ chưa? Không còn nữa.

Những gì được xác nhận:

Phản hồi trực quan trong thời gian thực:

• 🟢 Xanh "Hợp lệ" - CSS của bạn đã hoàn hảo, sẵn sàng để lưu
• ⚪ Xám "Đang xác thực..." - Kiểm tra các thay đổi của bạn (gỡ lỗi 500ms)
• 🔴 "Lỗi cú pháp" màu đỏ - Đã xảy ra lỗi, kèm theo các thông báo lỗi hữu ích

Cách tạo kiểu tùy chỉnh đầu tiên của bạn 🎯

Mất chưa đầy 2 phút:

1. Mở Read Frog cài đặt → Dịch → Phong cách hiển thị bản dịch
2. Chuyển "Sử dụng kiểu tùy chỉnh" sang BẬT
3. Bạn sẽ thấy trình soạn thảo CSS xuất hiện cùng với một mẫu hữu ích:

/* Example: Custom style with color and background */
[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

4. Tùy chỉnh nó! Nhấp vào các giá trị màu để mở bộ chọn, điều chỉnh phần đệm, thêm đường viền
5. Nhấp vào "Lưu" khi xác thực hiển thị màu xanh lá cây
6. Truy cập bất kỳ trang web nào và dịch - phong cách của bạn sẽ áp dụng ngay lập tức!

[data-read-frog-custom-translation-style='custom'] {
  background-color: rgba(255, 247, 153, 0.3);
  border-left: 3px solid #FFD700;
  padding-left: 8px;
}

Ý tưởng phong cách nên thử 💫

Xem những phong cách này trong thực tế! Mỗi ví dụ cho thấy CSS ảnh hưởng như thế nào đến văn bản dịch thực.

nhập từ '@/components/css-style-preview'

1. Phấn highlight nhẹ nhàng

Tốt nhất cho: Các buổi đọc dài, tiểu thuyết, blog

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

2. Chế độ học tập táo bạo

Tốt nhất cho: Sách giáo khoa, tài liệu nghiên cứu, khả năng ghi nhớ

[data-read-frog-custom-translation-style='custom'] {
  background-color: #FFF59D;
  color: #000;
  font-weight: 600;
  border: 2px solid #FFD54F;
  padding: 6px 10px;
  border-radius: 4px;
}

3. Hoạt ảnh phản hồi khi di chuột

Tốt nhất cho: Thiết kế tương tác, làm cho bản dịch trở nên sống động

[data-read-frog-custom-translation-style='custom'] {
  color: #0277BD;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}
[data-read-frog-custom-translation-style='custom']:hover {
  color: #01579B;
  transform: translateX(2px);
}

4. Hoạt ảnh chuyển màu thú vị

Tốt nhất cho: Khoe khoang với bạn bè

[data-read-frog-custom-translation-style="custom"] {
  background: linear-gradient(90deg, #1fe5e1 0%, #a855f7 50%, #0ad6ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

Thủ thuật nâng cao 🚀

Sử dụng biến CSS

Xác định màu sắc một lần, tái sử dụng ở mọi nơi:

[data-read-frog-custom-translation-style='custom'] {
  --highlight-color: #FFE082;
  --border-color: #FFA726;

  background-color: var(--highlight-color);
  border-left: 4px solid var(--border-color);
  padding: 4px 10px;
}

Đáp ứng với chế độ Light/Dark

Sử dụng chức năng light-dark() (trình duyệt hiện đại):

[data-read-frog-custom-translation-style='custom'] {
  background-color: light-dark(#FFF9C4, #4A4A2A);
  color: light-dark(#333, #E0E0E0);
  border: 1px solid light-dark(#FFD54F, #8D7B3A);
  padding: 5px 10px;
  border-radius: 4px;
}

Chi tiết kỹ thuật 🔧

Dành cho những ai muốn biết bên dưới có gì:

Lời khuyên để có kết quả tốt nhất 💡

Những cạm bẫy phổ biến cần tránh:

❌ Không: color: #FF (mã hex không đầy đủ) ✅ Do: color: #FF5733 (đầy đủ 6 chữ số)

❌ Không: padding: 10 (thiếu đơn vị) ✅ Làm: padding: 10px (bao gồm đơn vị)

❌ Không: Viết 200 dòng CSS ✅ Làm: Tập trung vào các thuộc tính thiết yếu (màu sắc, nền, phần đệm, đường viền)

Tiếp theo là gì? 🔮

Chúng tôi đã lên kế hoạch bổ sung thú vị:

• 🎨 Thư viện kiểu - Duyệt và nhập các kiểu do cộng đồng tạo
• 📤 Xuất/Import - Chia sẻ phong cách yêu thích của bạn với bạn bè
• 🎯 Phong cách trên mỗi trang - Các kiểu khác nhau cho các trang web khác nhau
• 📊 Bảng xem trước kiểu - Xem các thay đổi trước khi lưu