Css 3 text-shadow özelliği ile yazılara gölge uygulama

Tasarımcıların en çok tercih ettiği yöntemlerden bir tanesi metinlere  gölge vermektir. Arayüz kodlayıcılar bu yapı için yazı alanlarını resime dönüştürüp siteye bu şekilde ekleme işlemi yaparlardı. Css 2.0 ile gelen bu özellik Css 2.1 kaldırılsada Css3 ile tekrar hayat buldu. Peki text-shadow özelliğini nasıl kullanıyoruz?

Text Shadow yapısı 4 kısımdan oluşur;

1. değer:

Yatay eksen için kullanılır pozitif ve negatif değer alabilir. +5px, -5px gibi

2. değer:

Dikey eksen için kullanılır pozitif ve negatif değer alabilir. +5px, -5px gibi

3. değer:

Bulanıklık (blur) gölgemizin sert yada yumuşak olmasını bu şekilde ayarlarız 0 çok keskin bir görüntü iken 7px daha soft bir görüntü elde etmemizi sağlar.

4. değer:

Son değerimiz gölge rengi #000 kullanıla bildiği gibi rgba olarakta kullanım uygulaya biliriz rgba kullanımında ilk üç değer R-G-B son değer ise Opacity yani şeffaflığı ayarlamak çin kullanılır.

Tarayıcı Desteği

Örnek Uygulama

See the Pen rVjZyo by MinimalCoding (@MinimalCoding) on CodePen.