Yükleniyor...

CSS’te metin efektleri

Hizalama, süsleme ve yazı tipi yüklemeyi zaten biliyorsunuz. Metin efektleri üstüne cila ekler — yumuşak gölge, yer daralınca üç nokta veya uzun garip dizeler için kırılım. Okumayı zorlaştırmamak için hafif tutun.

Küçük bir efekt seti

📊 Bir bakışta metin efektleri

Araç Günlük işi
text-shadow Harflerin arkasında yumuşak derinlik veya parıltı (offset, blur, renk)
text-overflow Kesilen metnin nasıl bittiği — çoğu zaman ellipsis (…)
overflow + white-space Üç noktanın ihtiyaç duyduğu ortaklar (hidden + nowrap)
overflow-wrap Uzun kelime/URL’leri kutuya sığacak şekilde kırar
writing-mode Metni başka yönde yürütür (ör. dikey)

Efektler baharat, yemeğin kendisi değil. Başlık sakin bir gölgeden hoşlanabilir; uzun paragraf nadiren havai fişek ister.

text-shadow — offset, blur, renk

Sıra genellikle yatay offset, dikey, blur yarıçapı, sonra renk. Küçük değerler sakindir; kocaman blur harfleri bulandırır.

Temel text-shadow

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Katmanlı gölgeler

Virgülle birden fazla gölge yazabilirsiniz — sert kontur olmadan yumuşak bir kaldırma için işe yarar.

İki yumuşak katman

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

Metin çok genişse üç nokta

text-overflow: ellipsis yalnızca bir kırpma kurulumuyla çalışır: tipik olarak sınırlı genişlikte overflow: hidden ve white-space: nowrap.

Dar etikette üç nokta

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — uzun kelimeleri evcilleştirin

Uzun bir URL veya boşluksuz dizi dar sütunu patlatabilir. overflow-wrap: break-word (eski ad word-wrap) gerekirse kelimenin içinde kırmaya izin verir.

Uzun dizeleri kır

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — dikey bir bakış

writing-mode satırların ilerleyişini değiştirir. Dikey değerler yan etiketler veya süs başlıklar için iyidir — günlük paragraflar için değil.

Dikey metin bakışı

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

Başlıklar için sakin bir alışkanlık

Kısa bir başlıkta tek yumuşak gölge çoğu zaman yeter. Gövde metnine ağır parıltı koymayın; üç noktayı yalnızca yer gerçekten darsa kullanın.

Hafif başlık cilası

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Kendiniz deneyin

  1. Bir başlığa yumuşak text-shadow ekleyin (küçük offset, ılımlı blur).
  2. Virgülle ikinci daha açık bir gölge ekleyin.
  3. Üç noktalı etiket kurun: max-width, overflow: hidden, nowrap, ellipsis.
  4. Dar kutuya uzun URL koyun ve overflow-wrap: break-word verin.
  5. Kısa yan etikette writing-mode: vertical-rl deneyin — sonra normal okumaya dönün.

Yaygın hatalar

  • Uzun paragraflarda neon çoklu gölge (okuması zor)
  • overflow: hidden ve nowrap olmadan text-overflow: ellipsis
  • overflow-wrap yeterken agresif word-break ile her kelimeyi kırmak
  • Bütün makalelerde dikey writing-mode
  • Bu dersi @font-face / web yazı tipi yükleme ile karıştırmak (önceki ders)

Özet

  • text-shadow offset, blur ve renk kullanır — değerleri mütevazı tutun
  • Birden fazla gölge yumuşak kaldırma için katmanlanabilir
  • Üç nokta overflow, nowrap ve genişlik sınırı ister
  • overflow-wrap uzun kelime ve URL’lere yardımcı olur
  • writing-mode özel bir araçtır; günlük gövde yatay kalır

🧠 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 29 / 35
Css Ders