Metin dekorasyonu ve gölge

text-decoration ve text-shadow ile metne efekt eklersin.

Metin dekorasyonu

Metnin altını, üstünü veya üzerini çizmek için text-decoration özelliği kullanılır. Yaygın değerler: underline (alt çizgi), overline (üst çizgi), line-through (üstü çizili) ve none (çizgi yok).

Bağlantıların varsayılan alt çizgisini kaldırmak için text-decoration: none; yazılır. Renk ve biçim de eklenebilir: text-decoration: underline red wavy; kırmızı dalgalı bir alt çizgi çizer.

Metin gölgesi

Metne gölge eklemek için text-shadow özelliği kullanılır. Değer dört parçadan oluşur: yatay kayma, dikey kayma, bulanıklık yarıçapı ve renk.

Örneğin text-shadow: 2px 2px 4px rgba(0,0,0,0.5); metne sağa ve aşağı 2'şer piksel kaymış, 4 piksel bulanık, yarı saydam siyah bir gölge verir.

Bulanıklık 0 olursa gölge keskin kenarlı olur; büyük değerler daha yumuşak dağılır.

Uygulama Başlığa dekorasyon ve gölge ekle

h1 seçicisi için bir blok aç. İçine şu iki bildirimi ekle: text-decoration: underline; ve text-shadow: 2px 2px 4px rgba(0,0,0,0.5);.

Örnek çözümü göster

h1 {
  text-decoration: underline;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Kendini test et

Bağlantının alt çizgisini kaldırmak için hangi değer yazılır?
- text-decoration: none;
- text-decoration: underline;
- text-decoration: overline;
- text-decoration: line-through;
Cevabı göster

text-decoration: none; — Doğru. text-decoration: none; tüm çizgi efektlerini kaldırır.

Başlığın altını çiz

h2 {
  text-decoration: ____;
}

Cevabı göster

h2 {
  text-decoration: underline;
}

text-shadow parçasını anlamıyla eşleştir

İlk sayı

Yatay kayma
İkinci sayı

Dikey kayma
Üçüncü sayı

Bulanıklık yarıçapı
Son değer

Gölge rengi
Hangi text-shadow değeri en yumuşak gölgeyi verir?
- text-shadow: 2px 2px 0px gray;
- text-shadow: 2px 2px 1px gray;
- text-shadow: 2px 2px 2px gray;
- text-shadow: 2px 2px 8px gray;
Cevabı göster

text-shadow: 2px 2px 8px gray; — Doğru. Bulanıklık yarıçapı 8 piksel en geniş dağılımı verir; gölge en yumuşak olur.

Sıradaki ders: Özet - Makale tipografisi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler