text-shadow Özelliği

text-shadow özelliği metne gölge verir. Değer olarak özellik, boşlukla ayrılan 4 parametreyi kabul eder veya gölgeyi tamamen iptal eden none anahtar kelimesini (bu varsayılan değerdir).

Sözdizimi

cssseçici {
  text-shadow: x_kayması y_kayması bulanıklık renk;
}

cssseçici {
  text-shadow: none;
}

Parametreler

Parametre	Açıklama
x kayması	Gölgenin X eksenindeki kaymasını belirler. Pozitif değer sağa kaydırır, negatif değer - sola.
y kayması	Gölgenin Y eksenindeki kaymasını belirler. Pozitif değer aşağı kaydırır, negatif değer - yukarı.
bulanıklık	Gölgenin bulanıklığını belirler. Değer ne kadar büyükse - gölge o kadar bulanık olur. İsteğe bağlı parametre. Belirtilmezse - gölge keskin olur.
renk	Gölgenin rengini renk birimlerinden herhangi biriyle belirler. İsteğe bağlı parametre. Belirtilmezse - gölgenin rengi metnin rengiyle aynı olur.

Eksenler boyunca kaymalar ve bulanıklık, yüzde birimleri dışında herhangi bir boyut birimi ile belirtilebilir.

Örnek

Gölgeyi aşağı ve sola kaydıralım ve biraz bulanıklık ekleyelim:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

Örnek . Keskin Gölge

Şimdi gölgeyi kırmızı renk yapalım, aşağı ve sola kaydıralım, ancak bulanıklığı kaldıralım - gölge keskin olacak:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 10px 10px red;
}

Результат:

Örnek . Düzgün Gölge

Şimdi gölge kaydırılmadı, ancak ona bulanıklık eklendi:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат:

Ayrıca Bakınız

box-shadow özelliği,
kapsayıcıya gölge verir