IE6-9 için linear-gradient Renk Tanımlama Sorunu

Bildiğiniz gibi css3 ile birlikte linear-gradient özelliği geldi. Ancak css3 özelliği olduğundan IE6-9 için kullanabilmek adına filter özelliğine başvuruyoruz.. Ve burada ise ilginç şekilde bir renk tanımlama sorunu oluşuyor..

Sorun: Renk tanımlamalarında kısa renk tanımı kullanamıyoruz.. Örneğin #333333 olan renk kodunu #333 şeklinde yaptığımızda da aynı mantığa geliyor ancak bunu filter için uygulayamıyoruz, aksi taktirde başka bir renk ortaya çıkıyor..

Örnek;

<style type="text/css">
a {
	text-decoration: none;
	font: 14px Arial;
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	border-radius: 3px;
	border: 2px solid #444;
	background: #333; /* eski tarayıcılar için */
	background: -moz-linear-gradient(top, #333 0%, #9999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #999)); 
	background: -webkit-linear-gradient(top, #333 0%, #999 100%);
	background: -o-linear-gradient(top, #333 0%, #999 100%);
	background: -ms-linear-gradient(top, #333 0%, #999 100%);
	background: linear-gradient(to bottom, #333 0%, #999 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );
}
</style>
<a href="#">erbilen.net</a>

Burada #333 ve #999 renk değerlerinin her ikisinide kısa tanım olarak kullandık.. Örneğin chrome’da şöyle gözükmekte;

IE6-9 için linear-gradient Renk Tanımlama Sorunu

Normal şartlarda da olması gereken görüntü bu.. Ancak birde buna IE6-9 arasında bakalım.. Sonuç;

IE6-9 için linear-gradient Renk Tanımlama Sorunu

Çözüm: yapmamız gereken #333 ve #999 değerlerini uzun haliyle yazmak.. Ancak sadece filter için;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );

yerine;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );

yazmak olacak 🙂 Şimdilik bu sorununda üstesinden gelmiş olduk.

IE6-9 için linear-gradient Renk Tanımlama Sorunu

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“IE6-9 için linear-gradient Renk Tanımlama Sorunu” için bir yorum

  1. Gerçekten güzel ama w3'te hata olarak algılıyor bunu, o yüzden resim eklemek daha iyi bence. 1px genişliğinde yeter.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir