CSS Text-Shadow Nedir? Nasıl Yazılara Et Kalınlığı Vermemizi Sağlar?

Bir diğer CSS konulu makalem ile herkese merhabalar. Bu dersimizde sıradan yazılarımıza 3 boyutlu sunumlara çevireceğiz. CSS’in text-shadow kod birimi metinlerinize et kalınlığı vermek için fazlasıyla yeterli. Ama öncesinde bu özelliği biraz tanıyalım.

text-shadow nedir?

İsminden de belli olduğu gibi yazılara gölge vermemizi sağlar. İçerisindeki dikey ve yatay mesafelendirme özelliği sayesinde sadece gölgelendirme için değil, birçok özgün tasarım için de kullanılabilir.

Bu özellik CSS3 ile birlikte gelmiştir. Neredeyse bütün browserlarda çalışmasına rağmen IE9 ve daha eski versiyonları hala problem çıkarabilmekte.

Kod satırını tanıyalım :

text-shadow: yatay-mesafe dikey-mesafe yumuşaklık renk;

Sırasıyla gölgenin yazıya yatay uzaklığı, dikey uzaklığı, gölge yumuşaklığı (blur) ve rengini belirliyoruz.

Yazıya text-shadow’u birden çok kez uygulayabiliyoruz. Örneğin :

text-shadow: 1px 1px 1px #666,2px 2px 2px #000;

Örneklendirme :

Örnek

Örnek aşağıdaki kod ile hazırlanmıştır.

text-shadow: 3px 3px 2px #666;

Et kalınlığı tekniği

Yapmanız gereken gelişmiş ve çoklu bir text-shadow yazmak. Bu işlemi yaparken text-shadow’un drop-shadow gibi görünmesini sağlayan distance ve blur ayarlarını da değiştireceğiz. Bu teknik bize aşağıdaki gibi bir sonuç verecek.

CSS ile 3D Yazı

CSS Kodları


body{background-color:#b84545;}

h1{
text-shadow: 0px 1px 0px rgb(204, 204, 204), 0px 2px 0px rgb(201, 201, 201), 0px 3px 0px rgb(187, 187, 187), 0px 4px 0px rgb(185, 185, 185), 0px 5px 0px rgb(170, 170, 170), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 20px 20px rgba(0, 0, 0, 0.15);
color: #FFFFFF;
font-family: Impact,sans-serif;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 2em;
}

HTML Kodları