Anahat ve Halka Yardımcı Sınıfları
Düzeni etkilemeden öğenin dışında oluşturulan ring-* yardımcı sınıflarıyla erişilebilir odak göstergeleri ekleyin.
Anahat ve Halka Yardımcı Sınıfları, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 4. 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.
Dış Çizgiler ve Halkalar Neden Önemlidir
Kullanıcılar klavye veya ekran okuyucuyla gezindiğinde, hangi öğenin etkin olduğunu bilmeleri için görünür odak göstergeleri gereklidir. Tarayıcılar varsayılan bir odak dış çizgisi sağlar; ancak birçok tasarımcı erişilebilir bir alternatif sunmadan bunu outline-none ile gizler. Tailwind'in ring-* yardımcı sınıfları tam olarak bunun için tasarlanmıştır: erişilebilirlikten ödün vermeden tarayıcı varsayılanından daha iyi görünen, görünür ve erişilebilir odak göstergeleri oluşturur.
<!-- Accessible focus ring replacing browser default -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Press Tab to focus me
</button>Halka Yardımcı Sınıfları Nasıl Çalışır
Tailwind halkası, CSS outline özelliği yerine box-shadow kullanılarak uygulanır. Bu, gölge katmanlamasına katılabileceği ve diğer kutu gölgeleriyle birleştirilebileceği anlamına gelir. ring-* yardımcı sınıfları halka genişliğini, ring-{color} rengini, ring-offset-* ise öğeyle halka arasındaki boşluğu belirler. Dış çizgilerin aksine halkalar düzeni etkilemez ve border-radius ile doğru çalışır.
<!-- Ring details: width + color + offset -->
<div class="flex gap-6 p-6">
<!-- Width only -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:outline-none">
Ring width 2
</button>
<!-- Width + color -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
Colored ring
</button>
<!-- Width + color + offset -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none">
Ring with offset
</button>
</div>Halka Genişliği Yardımcı Sınıfları
Halka genişlikleri ring-0 (halka yok) ile ring-8 (8 piksel) arasında değişir. En sık kullanılan değerler ring-1, ring-2 ve ring-4 değerleridir. ring-2, dikkat çekici ancak aşırı olmayan bir odak göstergesi oluşturur. border-* sınıflarının aksine yön denetimi bulunmadığını unutmayın; halkalar her zaman öğenin tüm kenarlarını çevreler.
<!-- Ring width scale -->
<div class="flex gap-4 flex-wrap p-6">
<div class="w-16 h-16 bg-white rounded-lg ring-1 ring-blue-500 flex items-center justify-center text-xs">ring-1</div>
<div class="w-16 h-16 bg-white rounded-lg ring-2 ring-blue-500 flex items-center justify-center text-xs">ring-2</div>
<div class="w-16 h-16 bg-white rounded-lg ring-4 ring-blue-500 flex items-center justify-center text-xs">ring-4</div>
<div class="w-16 h-16 bg-white rounded-lg ring-8 ring-blue-500 flex items-center justify-center text-xs">ring-8</div>
</div>Halka Rengi ve Saydamlığı
Halkanın rengini ring-{color}-{shade} biçimiyle belirleyin; örneğin ring-indigo-500 veya ring-green-400. Halka, hem öğenin arka planıyla hem de sayfanın arka planıyla yeterli kontrasta sahip olmalıdır. Bölü işareti değiştiricisiyle saydamlık da uygulayabilirsiniz: yarı saydam bir halka için ring-blue-500/50. Bu, yeterli görünürlüğü korurken daha yumuşak bir parıltı efekti oluşturur.
<!-- Semantic ring colors for different states -->
<div class="space-y-3 max-w-xs">
<input class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Default focus" />
<input class="w-full border border-green-300 rounded-lg px-4 py-2 ring-2 ring-green-400" placeholder="Success state" />
<input class="w-full border border-red-300 rounded-lg px-4 py-2 ring-2 ring-red-400" placeholder="Error state" />
</div>ring-offset ve ring-offset-color
ring-offset-*, öğenin kenarlığı ile halka arasına beyaz alan ekleyerek halkanın öğenin kendisinden görsel olarak ayrılmasını sağlar. En yaygın değer ring-offset-2 olup 2 piksellik bir boşluk oluşturur. Varsayılan olarak ofset beyazdır; renkli arka planlarda boşluğu beyaz yerine arka plan rengiyle doldurmak ve görsel ayrımı korumak için ring-offset-blue-600 ile eşleştirin.
<!-- ring-offset creating visual separation -->
<div class="flex gap-4 items-center p-6">
<!-- On white: default white offset looks great -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-2 ring-blue-500 ring-offset-2">
White bg offset
</button>
<!-- On colored bg: match offset to background -->
<div class="bg-blue-600 p-4 rounded-xl">
<button class="bg-white text-blue-600 px-4 py-2 rounded-lg ring-2 ring-white ring-offset-2 ring-offset-blue-600">
Colored bg offset
</button>
</div>
</div>İç Halkalar için ring-inset
ring-inset, shadow-inner benzeri biçimde halkayı öğenin dışı yerine içine çizer. Dış halkanın bitişik öğelerle çakışabileceği veya kırpılmış bir kapsayıcının dışına taşabileceği durumlarda kullanışlıdır. İç halkalar görsel olarak da farklıdır; odak durumundan çok seçili veya etkin durumu ifade eder. Bu nedenle açma-kapama bileşenleri ve etkin sekmeler için kullanılabilir.
<!-- Inner ring for active/selected states -->
<div class="flex gap-3">
<!-- Selected card with inner ring -->
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 ring-2 ring-inset ring-blue-500 cursor-pointer">
<div class="font-semibold text-blue-700">Basic Plan</div>
<div class="text-sm text-blue-600">$9/month</div>
</div>
<!-- Unselected card -->
<div class="bg-white border border-gray-200 rounded-xl p-4 cursor-pointer hover:border-gray-300">
<div class="font-semibold">Pro Plan</div>
<div class="text-sm text-gray-500">$29/month</div>
</div>
</div>outline-* Yardımcı Sınıfları
Tailwind, CSS outline özelliği için de yardımcı sınıflar sağlar. Odak stilleri için genellikle halkalar tercih edilse de yerel dış çizgilerin benzersiz bir avantajı vardır: overflow-hidden tarafından etkilenmezler; kırpılmış kapsayıcıların dışında görüntülenirler. outline-none tarayıcının varsayılan dış çizgisini kaldırırken outline, outline-2 ve outline-dashed stillendirilmiş dış çizgiler ekler.
<!-- outline utilities -->
<div class="space-y-3 max-w-xs">
<!-- Remove default outline (bad practice alone!) -->
<button class="w-full bg-gray-200 p-2 rounded focus:outline-none">outline-none (no focus!)</button>
<!-- Custom outline -->
<button class="w-full bg-gray-200 p-2 rounded outline outline-2 outline-blue-500">
outline-2 outline-blue-500
</button>
<!-- Dashed outline -->
<button class="w-full bg-gray-200 p-2 rounded outline outline-dashed outline-2 outline-gray-400">
outline-dashed
</button>
</div>outline-offset yardımcı sınıfı
outline-offset-*, tıpkı halkalar için kullanılan ring-offset-* gibi, öğenin kenarlığı ile dış çizgisi arasındaki boşluğu denetler. Pozitif değerler dış çizgiyi dışarı iter, negatif değerler ise içeri çeker. Bu yardımcı sınıf, düzeni etkilemeden öğenin kenarından belirli bir boşluğu koruyan ayırt edici odak stilleri oluşturmak için kullanışlıdır (CSS'te dış çizgiler düzeni etkilemez).
<!-- outline-offset creates space between element and outline -->
<div class="flex gap-6 p-6">
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-0">
offset-0
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-2">
offset-2
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-4">
offset-4
</button>
</div>En iyi uygulama: focus-visible varyantı
focus-visible:ring-* deseni, odak halkalarını yalnızca klavye gezintisi sırasında gösterir; fare tıklamalarında göstermez. Bu, tasarımcıların fare tıklamalarında görünen halkaları istememesi ile erişilebilirlik gereksinimlerinin klavye kullanıcıları için görünür odak istemesi arasındaki kullanıcı deneyimi çatışmasını çözer. Modern Tailwind projelerinde her zaman focus:ring-2 yerine focus-visible:ring-2 kullanmayı tercih edin.
<!-- focus-visible: best practice for modern a11y -->
<div class="flex gap-4">
<!-- Ring shows for keyboard, hidden for mouse -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Smart Focus Ring
</button>
<!-- Compare: always visible on any focus -->
<button class="bg-gray-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
Always Visible Ring
</button>
</div>Etkileşimli bileşenlerde halkalar
Halkalar karmaşık etkileşimli tasarımlarda öne çıkar. Özel onay kutusu ve radyo düğmesi uygulamaları, çoklu seçim etiketleri ve renk seçicilerin tümü, seçim durumunu net biçimde göstermek için halkaları kullanır. Aşağıda, seçilen renk örneğinin iç kısmında bir halka göstergesi görüntülediği bir renk seçici deseni yer alır. Bu, renk paleti ve tema seçicilerinde yaygın bir desendir.
<!-- Color picker with ring-based selection indicator -->
<div class="flex gap-3">
<!-- Selected: shows inset ring -->
<button class="w-10 h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 ring-offset-2" aria-label="Blue (selected)"></button>
<!-- Unselected swatches -->
<button class="w-10 h-10 rounded-full bg-purple-500 hover:ring-2 hover:ring-purple-500 hover:ring-offset-2 transition-all" aria-label="Purple"></button>
<button class="w-10 h-10 rounded-full bg-green-500 hover:ring-2 hover:ring-green-500 hover:ring-offset-2 transition-all" aria-label="Green"></button>
<button class="w-10 h-10 rounded-full bg-red-500 hover:ring-2 hover:ring-red-500 hover:ring-offset-2 transition-all" aria-label="Red"></button>
</div>Halka, gölge ve kenarlığı birleştirme
Halkalar box-shadow ile uygulandığından, hem gölgeyi hem de halka sınıflarını listeleyerek bunları Tailwind'in diğer gölge yardımcı sınıflarıyla birleştirebilirsiniz. box-shadow özelliği birden çok değeri üst üste ekler. Böylece bir kart aynı anda yükselti gölgesine ve odak halkasına sahip olabilir; bu da etkileşim göstergesinin görsel derinliği ortadan kaldırmasını önler.
<!-- Card that keeps its shadow AND gets a ring on focus -->
<div class="p-6">
<button class="w-full text-left bg-white rounded-xl shadow-md border border-gray-200 p-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 hover:shadow-lg transition-shadow">
<h3 class="font-bold">Clickable Card</h3>
<p class="text-gray-500 text-sm mt-1">Has shadow + focus ring when keyboard focused.</p>
</button>
</div>Kısa kontrol
Bu dersteki Tailwind CSS Uzmanlığı kavramlarını anlayıp anlamadığınızı test edin.
Ders özeti
Bu derste şunları öğrendiniz: ring-* yardımcı sınıfları, düzeni etkilemeden box-shadow kullanarak erişilebilir odak göstergeleri oluşturur, ring-offset-* öğe ile odak halkası arasına görsel bir boşluk ekler ve focus-visible:ring-* yalnızca klavye kullanıcıları için halka gösteren modern en iyi uygulamadır. Sırada, etkileşimli stillendirme için hover ve active durum varyantlarını inceleyeceğiz.
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
“Anahat ve Halka Yardımcı Sınıfları” dersi ücretsiz mi?
Evet — “Anahat ve Halka Yardımcı Sınıfları” 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.
“Anahat ve Halka Yardımcı Sınıfları” dersinde ne öğreneceğim?
Düzeni etkilemeden öğenin dışında oluşturulan ring-* yardımcı sınıflarıyla erişilebilir odak göstergeleri ekleyin. 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 4. dersidir.
“Anahat ve Halka Yardımcı Sınıfları” 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
- Kenarlık Genişliği ve Rengi
- Kenarlık Yarıçapı ve Yuvarlatılmış Köşeler
- Kutu Gölgeleri
- Anahat ve Halka Yardımcı Sınıfları