CSS Academy · Ders

Outline ve Box-Shadow

outline ve box-shadow kullanarak öğelerin çevresine odak dış çizgileri ve gölge efektleri ekleyin.

Outline ve Box-Shadow, CoddyKit'te ücretsiz bir 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

outline Özelliği

outline, kenarlığın dışında bir çizgi çizer. Yerleşimi etkilemez; çevresindeki öğeler yer değiştirmez. Kısa yazım biçimi kenarlığa benzer: genişlik stil renk.

<button class="focus-demo">Focused Button</button>

outline-offset

outline-offset, dış çizgiyi kenarlık kenarından uzaklaştırır. Pozitif değerler çizgiyi dışarı iter; negatif değerler içeri taşır (kırpma etkisi).

<button class="focus-demo">Keyboard-focused Button</button>

outline ve border Karşılaştırması

Temel farklar:

outline, yerleşim akışını etkilemez
outline, kenar başına ayrı ayrı ayarlanamaz (outline-top yoktur)
outline dikdörtgen biçiminde olmak zorunda değildir (bazı tarayıcılarda odak halkasının şekillerini izler)
outline her zaman kenarlığın dışındadır

:focus-visible ve :focus Karşılaştırması

Klavye odağı halkaları için :focus-visible kullanmayı tercih edin. Dış çizgiyi yalnızca odak klavye aracılığıyla alındığında gösterir; fare tıklamasıyla alındığında göstermez. Böylece işaretleme aygıtı kullananlar için görsel karmaşa önlenirken erişilebilirlik korunur.

<button class="focus-demo">Keyboard focus vs mouse click</button>

box-shadow Temelleri

box-shadow, bir öğenin çevresine gölge efekti ekler. Kısa yazımı: offset-x offset-y blur-radius spread-radius color.

<div class="card">Card with soft shadow</div>

box-shadow Değerlerinin Açıklaması

box-shadow içindeki her değer:

offset-x: yatay kayma (negatif = sol)
offset-y: dikey kayma (negatif = yukarı)
blur-radius: yumuşaklık (0 = keskin)
spread-radius: gölge boyutunu büyütme/küçültme
color: gölge rengi (RGBA önerilir)

<div class="raised">Raised</div>
<div class="deep">Deep</div>

İç inset Gölgesi

Gölgeyi öğenin içine çizmek ve basılmış/çökük bir görünüm oluşturmak için inset anahtar sözcüğünü ekleyin.

<input class="input focus-demo" type="text" value="Focused input" />

Birden Çok Kutu Gölgesi

Birden çok gölgeyi virgülle ayırın. Gölgeleme, önden arkaya doğru üst üste yerleştirilir:

<span class="badge">3</span>

box-shadow ve filter: drop-shadow Karşılaştırması

box-shadow yalnızca kutunun şeklini dikkate alır. filter: drop-shadow() ise saydamlık da dahil olmak üzere oluşturulan şekli izler; bu nedenle saydam arka plana sahip PNG simgeleri için idealdir.

<div class="icon">&#9733;</div>

box-shadow ile Yükselti Sistemi

Material Design ve benzeri sistemler, görsel yükseltiyi belirtmek için birden çok gölge seviyesi tanımlar. CSS değişkenlerini gölge değerleriyle eşleyin:

<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>

box-shadow Animasyonlarını Verimli Hale Getirme

box-shadow animasyonu her karede yeniden boyamayı tetikler. Performans için, sözde öğe gölgesinin opacity değerini canlandırın veya birleştirilebilen filter: drop-shadow() kullanın.

Kısa Kontrol

Hangi box-shadow anahtar sözcüğü gölgeyi öğenin içine çizer?

Özet

outline, yerleşimi etkilemeden kenarlığın dışına çizilir; odak göstergeleri için kullanın. box-shadow, kayma, bulanıklık, yayılma ve renk değerleriyle derinlik sağlayan gölgeler ekler. İç gölgeler için inset kullanın. Birden çok gölge virgüllerle katmanlanabilir.

Sıkça Sorulan Sorular

“Outline ve Box-Shadow” dersi ücretsiz mi?

Evet — “Outline ve Box-Shadow” 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Outline ve Box-Shadow” dersinde ne öğreneceğim?

outline ve box-shadow kullanarak öğelerin çevresine odak dış çizgileri ve gölge efektleri ekleyin. 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.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te 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.

“Outline ve Box-Shadow” 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her 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

← CSS Academy Sayfasına Dön