Yükleniyor...

CSS Outline

Zaten bir border çizebiliyorsunuz. Outline yakın bir araçtır ama işi farklıdır: border kutusunun dışında bir halka çizer ve — border’dan farklı olarak — düzen (layout) yeri kaplamaz. Outline eklediğinizde komşular yerinden oynamaz.

Outline ile border

Bu iki aracı zihinsel haritanızda ayrı tutun.

📊 Outline ve border

Özellik Outline Border
Düzen yeri Yer kaplamaz; kutu boyutu aynı kalır Yer kaplar; border kutusunu büyütebilir
Tipik yer Border kenarının dışında Padding’in çevresinde
Sık kullanım Odak halkaları, geçici vurgu Kalıcı UI kenarları ve kart çerçeveleri
Kutu modeli boyut hesabında Hayır Evet (varsayılan content-box ile)

Basit bir outline

Stil, kalınlık ve renk border’a benzer çalışır — ama halka dışarıda oturur.

Temel outline

css
CSS Code 
.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}

Outline kısayolu

Bildik üçlü: kalınlık, stil ve renk. Outline’ın görünmesi için stil gerekir — yalnızca outline: 2px #000 yetmez.

Outline kısayolu

css
CSS Code 
.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}

Yaygın outline stilleri

Solid, dashed ve dotted günlük seçeneklerdir. outline: none halkayı kaldırır — dikkatli kullanın (aşağıda odak).

Outline stil örnekleri

css
CSS Code 
.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }

outline-offset — halkayı dışarı itin

outline-offset, düzen boyutunu değiştirmeden outline’ı border kenarından uzaklaştırır. Pozitif değerler dışarı iter; negatifler içeri çeker.

Offset’li outline

css
CSS Code 
.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

Aynı görünüm, farklı düzen maliyeti

İki kutu benzer görünebilir; ama yalnızca border, öğenin ne kadar yer kapladığını değiştirir.

Border büyür; outline büyümez

css
CSS Code 
.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}

.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* İkisi de güçlü görünür; .with-border daha çok düzen genişliği alır */

Odak dostu alışkanlık

Tarayıcılar klavye odağını göstermek için sıkça outline (veya benzer bir halka) kullanır. Her şeye outline: none koymayın. Odağı yeniden stillerseniz, klavye kullanıcılarının nerede olduğunu görmesi için net bir yedek halka verin.

Görünür odak halkasını koruyun

css
CSS Code 
.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

Kendiniz deneyin

  1. Padding’li bir kutuya border ve daha kalın outline verin — komşular yerinde kalır.
  2. Outline stilini solid, dashed ve dotted arasında değiştirin.
  3. outline-offset: 8px ekleyip halkanın dışarı süzülüşünü izleyin.
  4. .with-border ile .with-outline’ı yan yana koyun — benzer görsel ağırlık, farklı düzen genişliği.
  5. Outline’ları global silmek yerine bir düğmede :focus-visible stillendirin.

Sık hatalar

  • Düzen genişliği hesaplarken outline’ı border sanmak (outline boyut eklemez)
  • Odak yedeği olmadan her öğede outline: none
  • Outline’ın komşuları itmesini beklemek (bu margin veya border’ın işi)
  • Stil olmadan kalınlık ve renk yazmak (solid / dashed / …)
  • Outline’ı yeni öğrendiğiniz kutu modeli katmanlarıyla karıştırmak

Özet

  • Outline border’ın dışında çizilir ve düzen yeri kaplamaz
  • Kısayol: kalınlık, stil, renk — stil gerekir
  • outline-offset kutu boyutunu değiştirmeden halkayı kaydırır
  • Border kalıcı kenarlar için; outline odak ve geçici halkalar için
  • Klavye kullanıcıları için görünür odak outline’ını (veya eşdeğer yedeği) koruyun

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders