CSS Gradient Arkaplan ve Performans

CSS in background kod satırı içerisinde desteklenen onlarca arka plan türü var. Bu yazımda ise gradient (renk geçişlerini) türünü konuşacağız.

Görsel sıkıştırma üzerine konuştuğumuzda renk geçişleri içeren bir objenin dosya boyutunun yüksek olduğundan bahsetmiştik. Hele ki bu görsel zıt tonlamalar arasında geziyorsa onu yayınlamak hem sunucunuzu hem de ziyaretçinizi fazlasıyla rahatsız eder.

CSS ise bunu farklı bir yolla yapıyor. Rengin atanması ve gradient olarak arka plana yerleşmesi kişinin siteyi ziyaret ettiği bilgisayarda işlenmekte ve bant genişliğini rahatsız etmemekte.

Nedir?Ne değildir?

Aşağıdaki uzun uzun kod satırları sizi korkutmasın. En üstteki sıradan background-color satırı ile sitenize adı sanı duyulmamış ve başarısız bir tarayıcı ile girildiğinde gösterilecek renk tonunu belirliyoruz. Sonrasındakiler ise kodların tüm tarayıcılarda çalışmasını sağlamakta.

Örneğin soldan sağa ve yukarıdan aşağı örneklere bakalım. İkinci satırdaki webkit-gradient kodu haric hepsinde kaynağı left veya top olarak belirtiyoruz. Yani ilk renk tonumuz olan #000 oradan başlıyor. Ve beyaza doğru gidiyor. İkinci satırdaki webkit-gradient kodunda ise left-top yazmadan açıya 100% vererek gradientin yönünü belirliyoruz.

Örnekler

• Soldan Sağa Çizgisel

background-color: #000;
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#000), to(#fff));
background-image: -webkit-linear-gradient(left, #000, #fff);
background-image: -moz-linear-gradient(left, #000, #fff);
background-image: -ms-linear-gradient(left, #000, #fff);
background-image: -o-linear-gradient(left, #000, #fff);

• Yukarıdan Aşağı Çizgisel

background-color: #000;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#fff));
background-image: -webkit-linear-gradient(top, #000, #fff);
background-image:    -moz-linear-gradient(top, #000, #fff);
background-image:     -ms-linear-gradient(top, #000, #fff);
background-image:      -o-linear-gradient(top, #000, #fff);

• Soldan Sağa Oval

background-color: #000;
background-image: -webkit-gradient(radial, 0% 0%, 100% 0%, from(#000), to(#fff));
background-image: -webkit-radial-gradient(left, #000, #fff);
background-image:    -moz-radial-gradient(left, #000, #fff);
background-image:     -ms-radial-gradient(left, #000, #fff);
background-image:      -o-radial-gradient(left, #000, #fff);

• Yukarıdan Aşağı Oval

background-color: #000;
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(#000), to(#fff));
background-image: -webkit-radial-gradient(top, #000, #fff);
background-image:    -moz-radial-gradient(top, #000, #fff);
background-image:     -ms-radial-gradient(top, #000, #fff);
background-image:      -o-radial-gradient(top, #000, #fff);

Performans

Aşağıda karşılaştırma yaptım. Birinci sonuç sadece CSS ile yapılmış versiyonu ve raporu, ikinci sonuç ise aynı boyutlardaki PNG dosyasıyla hazırladığım gradient ve raporunu göstermekte.

Yani 6 kata kadar çıkan bir dosya boyutu avantajı sağlıyor CSS. Bu rakam tabii ki yukarı aşağı oynayabilir. İyi bir sıkıştırma ile görselin boyutu 3/4 oranında küçültülüp 1.1kB’a kadar indirilebilir. Fakat kesin olay şey kalitede bozulmalar olacağıdır. Fakat CSS hiçbir şekilde bozulmaya sebep olmaz.

Not : Ayrıca buradaki linkten Microsoft’un gradient oluşturma aracına erişebilirsiniz.