Virgo Blog

Nisan 2015

Web tasarımı: CSS3 text-shadow kullanımı

Web tasarımında Cascading Style Sheet'leri ilk kullanmaya başladığımız günleri hatırlıyorum da, ne kadar büyük bir gelişmeydi bizim için. CSS standartları günden güne gelişti ve CSS3'ün de büyük oranda istikrarlı bir hale gelmesi ile daha da keyifli bir hal aldı. (Lanet olası Internet Explorer'a CSS beğendireceğiz diye çektiklerimizden bahsetmiyorum elbette.)
 
CSS3'ün sevdiğim özelliklerinden biri olan text-shadow'dan söz edeceğim bugün. CSS3 text-shadow, inherited, yani kalıtsal bir özellik. CSS'deki kalıtsal özellikler, ana (parent) elemanın değerlerini alt (child) elemanlara taşır, örneğin bir div tag için tanımlayacağınız text-shadow özellikleri, div'in içerisindeki alt eleman olan textler için geçerli olacaktır.

CSS3 text-shadow'un CSS syntax'i şöyle;
 
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
 
Javascript içerisinde ise şu syntax ile kullanılabiliyor;
 
object.style.textShadow="h-shadow v-shadow blur-radius color"
 
Syntax'i açacak olursak;
 
  • h-shadow - zorunlu, yatay gölge pozisyonu, negatif değer verilebiliyor
  • v-shadow - zorunlu, dikey gölge pozisyonu, negatif değer verilebiliyor
  • blur-radius - opsiyonel, gölgenin blur yarıçapı, default değeri 0
  • color - opsiyonel, gölge rengi
  • none - default değer, gölge yok anlamında
  • initial - bu özelliği default değerlerine sabitler
  • inherit - bu özelliğin değerlerini ana elemanından taşıması gerektiğini belirtir
 
Çok basit bir syntax örneği verelim:

 

p { 
  text-shadow: 2px 2px 2px #000;
}

 

...ve burada işler güzelleşiyor, virgülle ayırarak yeni gölgeler ekleyebiliyor ve yaratıcılığımızı konuşturabiliyoruz:

 

p { 
  text-shadow: 2px 2px 2px #000,
  3px 3px 4px #c00000,
  4px 4px 5px #ff4040;
}


Biraz baharatlandırarak aşağıdaki inline örnekteki gibi çok hoş sonuçlar elde edebilirsiniz:

<div style="background: #8687c2; padding: 20px 0 30px 0; font-weight: bold; text-align:center; line-height: 50px; font-size: 40px; color: #fff;  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);">CSS3 text-shadow</div>



CSS3 text-shadow


Sevgiyle kalın...

Mustafa Odabaşı

Bu e-Posta adresi istenmeyen posta engelleyicileri tarafından korunuyor. Görüntülemek için JavaScript etkinleştirilmelidir.

Mustafa Odabaşı

Virgo'nun kurucu ortaklarından Mustafa Odabaşı, bundan 20 küsür sene önce, bilişim sektörüne profesyonel olarak ADA NET'de adım atmıştır. Cyberspace ile Türkiye'ye internetin gelmesinden çok önce BBS'ler vasıtasıyla tanışan Mustafa Odabaşı, Türkiye'nin ilk ve en geniş mesaj ağı HiTNeT'in de eski SysOp'larındandır. Halen bilgi ve tecrübelerini Virgo'da hizmet üreterek değerlendirmektedir.