Diseñe sus traducciones a su manera con CSS personalizado

Dale estilo a tus traducciones a tu manera 🎨

¿Alguna vez has deseado que tus traducciones pudieran coincidir con tu estilo de lectura? ¿Quizás quieras tonos pastel suaves para leer antes de dormir o reflejos llamativos para las sesiones de estudio?

Ahora tienes el control. La función Personalizada CSS de Read Frog te permite diseñar exactamente cómo aparecen tus traducciones en cualquier sitio web.

Por qué son importantes los estilos personalizados 💡

Los estilos de traducción predeterminados funcionan bien... hasta que dejan de hacerlo. Un contenido diferente necesita un tratamiento visual diferente:

Conozca su nuevo editor CSS ⚡

No solo agregamos un cuadro de texto y terminamos el día. El editor CSS de Read Frog es legítimamente poderoso:

Construido para todos

Para principiantes:

• 🎨 Selector de color: haga clic en cualquier valor de color para abrir un selector visual
• ✅ Validación en vivo - Comentarios instantáneos sobre errores de sintaxis
• 💡 Sugerencias inteligentes: autocompletar mientras escribes
• 📝 Plantillas de ejemplo: comience con ejemplos prácticos

Para usuarios avanzados:

• ⚡ Compatibilidad total con CSS - Utilice degradados, sombras, animaciones y variables
• 🔧 Resaltado de sintaxis - editor con tecnología CodeMirror
• 📏 Números de línea y plegado - Navegue fácilmente por hojas de estilo grandes
• 🎯 Canal de pelusa: vea los errores de un vistazo

La magia del selector de color 🌈

Aquí es donde las cosas se ponen divertidas. Escribir colores CSS solía significar:

❌ Buscar en Google "selector de color" ❌ Copiar códigos hexadecimales ❌ Cambiar entre pestañas ❌ Esperando que se vea bien

¿Ahora? Simplemente haga clic en cualquier color en su CSS:

1. Escriba o pegue cualquier formato de color: #FF5733, rgb(255, 87, 51), hsl(9, 100%, 60%)
2. Haz clic en él: el selector de color aparece instantáneamente
3. Ajustar visualmente - Arrastre, deslice o escriba nuevos valores
4. Listo - Actualizaciones de color en tiempo real

El selector comprende todos los formatos de color CSS:

• Hexadecimal: #FF5733
• RGB/RGBA: rgba(255, 87, 51, 0.8)
• HSL/HSLA: hsla(9, 100%, 60%, 0.8)
• Colores con nombre: tomato, skyblue, gold
• CSS variables: var(--my-color)

La validación en vivo salva tu cordura ✨

¿Alguna vez guardaste CSS y descubriste que lo había roto todo? Ya no.

Qué se valida:

Comentarios visuales en tiempo real:

• 🟢 Verde "Válido" - Tu CSS está perfecto, listo para guardar
• ⚪ Gris "Validando..." - Comprobando tus cambios (rebote de 500 ms)
• 🔴 "Error de sintaxis" rojo: algo anda mal, con mensajes de error útiles

Cómo crear tu primer estilo personalizado 🎯

Tarda menos de 2 minutos:

1. Abrir configuración de Read Frog → Traducción → Estilo de visualización de traducción
2. Activa "Usar estilo personalizado"
3. Verás aparecer el editor CSS con una plantilla útil:

/* 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. ¡Personalízalo! Haz clic en los valores de color para abrir el selector, ajustar el relleno y agregar bordes.
5. Haga clic en "Guardar" cuando la validación se muestre en verde
6. Visita cualquier sitio web y traduce: ¡tu estilo se aplica al instante!

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

Ideas de estilo para probar 💫

¡Mira estos estilos en acción! Cada ejemplo muestra cómo el CSS afecta el texto traducido real.

importar desde '@/components/css-style-preview'

1. Resaltado pastel suave

Mejor para: largas sesiones de lectura, ficción, blogs

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

2. Modo de estudio audaz

Ideal para: libros de texto, trabajos de investigación, memorización

[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. Animación que responde al pasar el cursor

Lo mejor para: Diseño interactivo, que hace que las traducciones se sientan vivas

[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. Animación de degradado genial

Lo mejor para: presumir ante tus amigos

[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%;
  }
}

Trucos avanzados 🚀

Utilice variables CSS

Defina los colores una vez y reutilícelos en todas partes:

[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;
}

Responsivo al modo Light/Dark

Utilice la función light-dark() (navegadores modernos):

[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;
}

Detalles técnicos 🔧

Para aquellos que quieran saber qué hay debajo del capó:

Consejos para obtener mejores resultados 💡

Errores comunes que se deben evitar:

❌ No: color: #FF (código hexadecimal incompleto) ✅ Hacer: color: #FF5733 (hexadecimal completo de 6 dígitos)

❌ No: padding: 10 (unidad faltante) ✅ Hacer: padding: 10px (incluir unidad)

❌ No: escriba 200 líneas de CSS ✅ Hacer: centrarse en las propiedades esenciales (color, fondo, relleno, borde)

¿Qué sigue? 🔮

Ya estamos planeando interesantes incorporaciones:

• 🎨 Biblioteca de estilos: busque e importe estilos creados por la comunidad
• 📤 Export/Import - Comparte tus estilos favoritos con amigos
• 🎯 Estilos por sitio: diferentes estilos para diferentes sitios web
• 📊 Panel de vista previa de estilo: vea los cambios antes de guardar