Özel CSS ile Çevirilerinizi İstediğiniz Şekilde Stillendirin

Çevirilerinizi Dilediğiniz Şekilde Stillendirin 🎨

Hiç çevirilerinizin okuma ortamınıza uygun olmasını dilediniz mi? Belki yatmadan önce kitap okumak için yumuşak pastel tonlar ya da çalışma seansları için cesur vurgular istiyorsunuz?

Kontrol artık sizde. Read Frog'nin Özel CSS özelliği, çevirilerinizin herhangi bir web sitesinde tam olarak nasıl görüneceğini tasarlamanıza olanak tanır.

Özel Stiller Neden Önemlidir 💡

Varsayılan çeviri stilleri iyi çalışıyor... ta ki çalışmayana kadar. Farklı içeriklerin farklı görsel işlemlere ihtiyacı vardır:

Yeni CSS Editörünüzle Tanışın ⚡

Sadece bir metin kutusu ekleyip onu bir gün olarak adlandırmadık. Read Frog'nin CSS editörü yasal olarak güçlüdür:

Herkes için Tasarlandı

Yeni Başlayanlar İçin:

• 🎨 Renk seçici - Görsel seçiciyi açmak için herhangi bir renk değerine tıklayın
• ✅ Canlı doğrulama - Sözdizimi hataları hakkında anında geri bildirim
• 💡 Akıllı öneriler - Yazarken otomatik tamamlama
• 📝 Örnek şablonlar - Çalışma örneklerinden başlayın

İleri Düzey Kullanıcılar İçin:

• ⚡ Tam CSS desteği - Degradeler, gölgeler, animasyonlar ve değişkenler kullanın
• 🔧 Sözdizimi vurgulama - CodeMirror destekli düzenleyici
• 📏 Satır numaraları ve katlama - Büyük stil sayfalarında kolayca gezinin
• 🎯 Tiftik oluğu - Hataları bir bakışta görün

Renk Seçici Sihir 🌈

İşte işlerin eğlenceli hale geldiği yer burası. CSS renklerini yazmak şu anlama geliyordu:

❌ Google'da "renk seçici" araması yapın ❌ Onaltılık kodları kopyalama ❌ Sekmeler arasında geçiş yapma ❌Umarım doğru görünür

Şimdi mi? CSS'deki herhangi bir rengi tıklamanız yeterli:

1. Herhangi bir renk biçimini yazın veya yapıştırın: #FF5733, rgb(255, 87, 51), hsl(9, 100%, 60%)
2. Tıklayın - Renk seçici anında görünür
3. Görsel olarak ayarlayın - Yeni değerleri sürükleyin, kaydırın veya yazın
4. Bitti - Gerçek zamanlı renk güncellemeleri

Seçici tüm CSS renk formatlarını anlar:

• Onaltılık: #FF5733
• RGB/RGBA: rgba(255, 87, 51, 0.8)
• HSL/HSLA: hsla(9, 100%, 60%, 0.8)
• Adlandırılmış renkler: tomato, skyblue, gold
• CSS değişkenler: var(--my-color)

Canlı Doğrulama Akıl Sağlığınızı Korur ✨

Hiç CSS'i kurtarıp her şeyin bozulduğunu fark ettiğiniz oldu mu? Artık değil.

Neler Doğrulanır:

Gerçek zamanlı görsel geri bildirim:

• 🟢 Yeşil "Geçerli" - CSS cihazınız mükemmel, kaydedilmeye hazır
• ⚪ Gri "Doğrulanıyor..." - Değişiklikleriniz kontrol ediliyor (500 ms geri dönme)
• 🔴 Kırmızı "Sözdizimi hatası" - Yararlı hata mesajlarıyla birlikte bir sorun var

İlk Özel Stilinizi Nasıl Oluşturabilirsiniz 🎯

2 dakikadan az sürer:

1. Read Frog ayarlarını aç → Çeviri → Çeviri Görüntüleme Stili
2. "Özel Stil Kullan"ı AÇIK konumuna getirin
3. CSS düzenleyicisinin yararlı bir şablonla birlikte göründüğünü göreceksiniz:

/* 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. Özelleştirin! Seçiciyi açmak, dolguyu ayarlamak, kenarlıklar eklemek için renk değerlerini tıklayın
5. Doğrulama yeşil renkte göründüğünde "Kaydet"i tıklayın
6. Herhangi bir web sitesini ziyaret edin ve çeviri yapın; tarzınız anında geçerli olur!

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

Denenecek Stil Fikirleri 💫

Bu stilleri çalışırken görün! Her örnek, CSS'nin gerçek çevrilmiş metni nasıl etkilediğini gösterir.

'@/components/css-style-preview''den dosyasını içe aktar

1. Yumuşak Pastel Vurgu

En iyisi: Uzun okuma seansları, kurgu, bloglar

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

2. Cesur Çalışma Modu

En iyisi: Ders kitapları, araştırma makaleleri, ezberleme

[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. Fareyle üzerine gelindiğinde duyarlı Animasyon

En iyisi: Etkileşimli tasarım, çevirilerin canlı görünmesini sağlar

[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. Harika Degrade Animasyon

En iyisi: Arkadaşlarınıza gösteriş yapmak

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

Gelişmiş Hileler 🚀

CSS Değişkenlerini Kullan

Renkleri bir kez tanımlayın, her yerde yeniden kullanın:

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

Light/Dark Moduna Duyarlı

light-dark() işlevini kullanın (modern tarayıcılar):

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

Teknik Detaylar 🔧

Kaputun altında ne olduğunu bilmek isteyenler için:

En İyi Sonuçlar İçin İpuçları 💡

Kaçınılması Gereken Yaygın Tuzaklar:

❌ Yapmayın: color: #FF (eksik onaltılık kod) ✅ Yapınız: color: #FF5733 (tam 6 basamaklı onaltılık)

❌ Yapmayın: padding: 10 (eksik birim) ✅ Yapın: padding: 10px (üniteyi dahil edin)

❌ Yapma: 200 satır CSS yazmayın ✅ Yap: Temel özelliklere odaklanın (renk, arka plan, dolgu, kenarlık)

Sırada Ne Var? 🔮

Şimdiden heyecan verici eklemeler planlıyoruz:

• 🎨 Stil Kitaplığı - Topluluk tarafından oluşturulan stillere göz atın ve bunları içe aktarın
• 📤 Export/Import - Favori stillerinizi arkadaşlarınızla paylaşın
• 🎯 Site Başına Stiller - Farklı web siteleri için farklı stiller
• 📊 Stil Önizleme Paneli - Değişiklikleri kaydetmeden önce görün