Metin Rengi ve Saydamlık
Tailwind'in renk paletindeki metin rengi yardımcı sınıflarını uygulayın ve hiyerarşi ile karşıtlık oluşturmak için saydamlığı ayarlayın.
Metin Rengi ve Saydamlık, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Tailwind Renk Sistemi
Tailwind zengin bir renk paleti sunar: mavi, çivit mavisi, kırmızı ve yeşil gibi 22 renk ailesinin her birinde 50 (beyaza yakın) ile 950 (siyaha yakın) arasında 11 ton bulunur. Kullanabileceğiniz pek çok seçenek vardır.
<!-- Tailwind color naming: {color}-{shade} -->
<p class="text-blue-500">Blue 500</p>
<p class="text-blue-700">Blue 700 (darker)</p>
<p class="text-blue-200">Blue 200 (lighter)</p>Metin Rengi Uygulama
Metni text-{color}-{shade} ile renklendirin. Düşük ton numaraları açık, orta tonlar canlı, yüksek tonlar koyudur. text-gray-700 beyaz üzerinde yumuşak görünür; text-gray-900 ise güçlü bir karşıtlık sağlar.
<h1 class="text-gray-900">Main Heading</h1>
<h2 class="text-gray-700">Sub Heading</h2>
<p class="text-gray-600">Body text at a comfortable shade.</p>
<span class="text-gray-400">Metadata or secondary info</span>Metinde Marka Renkleri
Anlamı vurgulamak için canlı tonlar kullanın: bağlantılar için text-blue-600, hatalar için text-red-600, başarı durumu için text-green-600. Bu kurallar kullanıcılara anında tanıdık gelir.
<a href="#" class="text-blue-600 hover:text-blue-800 underline">Link</a>
<p class="text-red-600">Error: Invalid email address.</p>
<p class="text-green-600">Success: Changes saved!</p>
<p class="text-yellow-700">Warning: Disk space is low.</p>Metin Opaklığı Değiştiricisi
Eğik çizgi değiştiricisiyle rengi soldurun: text-blue-600/50, maviyi %50 opaklıkla gösterir. Bu yöntem, alt öğeleri de solduracak olan öğe opaklığını kullanmaktan daha temizdir.
<p class="text-gray-900/100">Fully opaque</p>
<p class="text-gray-900/75">75% opacity</p>
<p class="text-gray-900/50">50% opacity</p>
<p class="text-gray-900/25">25% opacity</p>Erişilebilirlik için Renk Karşıtlığı
Erişilebilirlik için metin yeterli karşıtlığa sahip olmalıdır; 4.5:1 oranını hedefleyin. Beyaz üzerinde 700 tonu genellikle gereksinimi karşılar; beyaz üzerinde metin olarak 50 ile 400 arasındaki açık tonları kullanmaktan kaçının.
<!-- Accessible: dark text on light background -->
<p class="bg-white text-gray-800">Good contrast ratio (passes WCAG AA)</p>
<!-- Inaccessible: light text on white background -->
<p class="bg-white text-gray-300">Poor contrast (fails WCAG)</p>Koyu Arka Planlarda Metin Rengi
Koyu arka planlarda metni açık renge çevirin: birincil metin için text-white veya text-gray-100, ikincil metin için text-gray-400 kullanın. Temiz bir koyu temanın temeli budur.
<div class="bg-gray-900 p-8 rounded-xl">
<h2 class="text-white font-bold text-2xl mb-2">Dark Card</h2>
<p class="text-gray-400 text-sm">Secondary text on dark background.</p>
<a href="#" class="text-indigo-400 hover:text-indigo-300">Learn more</a>
</div>Degrade Metin Efekti
Degrade metin efekti oluşturmak için bg-gradient-to-r from-* to-* ile birlikte bg-clip-text text-transparent kullanın. Degrade yalnızca harflerin içinden görünür; bu da oldukça modern bir görünüm sağlar.
<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Gradient Headline
</h1>Üzerine Gelince Renk Değişiklikleri
Üzerine gelindiğinde metin rengini değiştirmek için hover: varyantını ekleyin; bu, bağlantılar ve düğmeler için vazgeçilmezdir. Yumuşak bir geçiş için transition-colors kullanın ve bunu focus: ile birlikte uygulayın.
<a href="#"
class="text-gray-600 hover:text-indigo-600 focus:text-indigo-600 transition-colors duration-200 font-medium">
Hover or focus me
</a>Anlamsal Renk Kullanımı
Anlamsal bir palet seçin: marka için bir renk, tehlike için kırmızı, başarı için yeşil, uyarılar için sarı kullanın. Renkler tutarlı kullanıldığında, kullanıcılara anlamı bir bakışta aktarır.
<div class="space-y-2">
<p class="text-indigo-600 font-medium">Primary action</p>
<p class="text-red-600 font-medium">Danger / Error</p>
<p class="text-green-600 font-medium">Success / Confirmed</p>
<p class="text-yellow-700 font-medium">Warning / Caution</p>
<p class="text-gray-500 font-medium">Neutral / Disabled</p>
</div>Koyu Modda Metin Rengi
Herhangi bir metin rengine dark: ön ekini eklediğinizde, bu renk koyu modda devreye girer. Tek bir HTML satırı hem açık hem koyu temalarınıza hizmet eder; yinelenen işaretlemeye gerek kalmaz.
<p class="text-gray-900 dark:text-gray-100">
Adapts automatically between themes.
</p>
<p class="text-gray-500 dark:text-gray-400">
Secondary text adapts too.
</p>Özel Renk Değerlerini Kullanma
Paletin dışında bir renge mi ihtiyacınız var? Köşeli parantezleri kullanın: tam bir onaltılık renk için text-[#ff5733]. Marka renkleri için kullanışlıdır, ancak sisteminizin tutarlılığını korumak için ölçülü kullanın.
<!-- Arbitrary color (one-off brand match) -->
<span class="text-[#ff5733] font-bold">Brand Orange</span>
<!-- Better: define in config for reuse -->
/* tailwind.config.js theme.extend.colors.brand: '#ff5733' */
<span class="text-brand font-bold">Brand Orange</span>Hızlı Kontrol
Hızlı bir kontrol yapın! Renk ve opaklığın nasıl aklınızda kaldığını görün. 🎨
Ders Özeti
Harika! text-{color}-{shade} paleti kullanır, eğik çizgi alt öğeleri soldurmadan opaklığı ayarlar ve dark: koyu modu yönetir. Sırada satır yüksekliği ve boşluklandırma var.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Metin Rengi ve Saydamlık” dersi ücretsiz mi?
Evet — “Metin Rengi ve Saydamlık” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Metin Rengi ve Saydamlık” dersinde ne öğreneceğim?
Tailwind'in renk paletindeki metin rengi yardımcı sınıflarını uygulayın ve hiyerarşi ile karşıtlık oluşturmak için saydamlığı ayarlayın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Metin Rengi ve Saydamlık” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Yazı Boyutu ve Yazı Kalınlığı
- Metin Rengi ve Saydamlık
- Satır Yüksekliği ve Harf Aralığı
- Metin Hizalama ve Süsleme