
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?
1 2 3 4 5 6 7 |
text-shadow: 5px 5px 7px rgba(0,0,0,0.5); |
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.
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.