tarihinde Fatih Hayrioğlu

CSS ile renk değeri ataması yapılırken çeşitli yöntemler kullanıyoruz. Daha önce CSS Birimleri  makalemizde anlatmıştık. İki tip renk tanımı var. Renk isimleri ile tanımlama(İngilizce renk isimleri)

background-color:red

tanımı kırmızı renkli bir ardalan elde etmemizi sağlar

RGB(Red-Green-Blue) yani Kırmızı-Yeşil-Mavi renklerin baz alındığı renk standardı. Açıkçası ben projelerimde her zaman rgb standardını kullanmaktayım.

background-color:#ff0000

Tanımı kırmızı renkte ardalanlar elde etmemizi sağlar. Bu tanımı birde kısaltması mevcuttur. Eğer bir birine benzer 2’li elemanlardan oluşan bir renk tanımı varsa yukarıdaki gibi benzer değerleri bir kere yazarakta aynı sonucu elde edebiliriz.

background-color:#f00

Yukarıdaki tanımda bize kırmızı rengi verecektir.

Buraya kadar mevcut durumu özetlemeye çalıştım. Şimdi ise CSS3 ile gelen renk tanımı yeniliğine göz atalım. RGBA ve HSLA tanımları yukarıdaki renk tanımlarına ek olarak gelmiştir. Benzer kullanıma sahip olduğu için ben sadece RGBA tanımı hakkında bilgi vereceğim sizlere, HSLA tanımıda standart olarak farklı ama işlevsel olarak RGBA ile etkiyi vereceği için RGBA tanımı anlatmak ile yetineceğim.

Renk değerlerini genelde web sitelerini kodlarken resim işleme araçları(örn. Adobe Phoshop, Adobe Fireworks) aracılığı ile alırız. Bu araçlar bize renk paleti olarak RGB, HSL değerlerini verir.

CSS3 ile birlikte RGBA renk tanımıda eklenmiştir. Buradaki A harfi Alfa’ya karşılık gelen bir karşılıktır. Alfa değeri renk tanımımıza saydamlık etkisi katmaktadır. 0.0 ile 1 arasında değer alır. 0 değeri etkisiz kılarken 1 değeri de katı bir renk ortaya çıkaracaktır. Ara değerler bize saydamlık etkisi tanımlamamızı sağlayacaktır.

RGBA Tanımı

Normalde css ile renk tanımı yaparken

background-color:#1259C7

tanımı kullanıyorum. Benzer şekilde

background-color:rgb(18,89,199)

Tanımıda bize aynı sonucu verir. RGBA ile dördüncü değer olarak alfa saydamlık derecesini ekleriz.

background-color:rgba(18,89,199,0.4)

Şeklinde bir tanım yapıyoruz. 0.4 değeri bize % 40’lık bir saydamlık sağlayacaktır.

Durumu daha iyi anlamak için bir örnek yapalım

p.renk1{ background-color:rgba(18,89,199,0.2); width:70px; height:70px}
p.renk2{ background-color:rgba(18,89,199,0.4); width:70px; height:70px}
p.renk3{ background-color:rgba(18,89,199,0.6); width:70px; height:70px}
p.renk4{ background-color:rgba(18,89,199,0.8); width:70px; height:70px}
p.renk5{ background-color:rgba(18,89,199,1); width:70px; height:70px}

HTML kodu

<p class="renk1"></p>
<p class="renk2"></p>
<p class="renk3"></p>
<p class="renk4"></p>
<p class="renk5"></p>

Örneği görmek için tıklayınız.

RGBA ve opacity arasındaki fark; opacity tanımı yapılan bir eleman ve tüm alt elemanlarına saydamlık uygulanırken, rgba ile tanımlanan ardalanlarda sadece uygulanan elemanın ardalanı saydam olur içindeki elemanlar saydam olmaz. Önceden bu gibi durumlarda 1x1 px değerinde saydam bir png hazırlayıp ardalan resmi olarak tanımlardık.

Farklı kullanım alanları ve birçok avantajı vardır bizim için bu tanımın. Örneği Facebook lightbox’ı olarak nitelendirilen bir görüntüyü elde etmek çok basit bir hal alıyor bu özelliği kullanarak.

...
border:10px solid rgba(0, 0, 0, 0.2);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
...

Örneği görmek için tıklayınız.

CSS3 bize birçok avantaj sağlamaktadır. Bir nevi bize resim düzenleme araçlarındaki esnekliği sağlamaktadır.

Örneğin text-shadow özelliğindeki renk tanımında rgba kullanılırsa çok güzel görüntüler elde ederiz. Örnek için nicewebtype.com/notes/2009/07/12/rgba-text-shadow-in-safari-firefox sitesini ziyaret ediniz.

Benzer bir şekilde box-shadow özelliğindeki renk tanımında rgba kullanılarak daha gerçekçi gölgeler elde ederiz.

Bu özelliğinde tek sorunu diğer CSS3 özelliklerindeki sorunumuz olan İnternet Explorer desteğinin olmaması sorunu var. Henüz betası çıkmış olan ie9 hariç hiç bir İnternet Explorer sürümü bu özelliği desteklememektedir, ne yazıkki ie8 dahil hiç bir ie sürümü bu özelliği desteklemiyor.

Tarayıcı Desteği

Chrome explorer Firefox
1.0+ 9+ 3.0+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

İnternet Explorer için Çözüm Önerileri

Çözüm için CSS-Tricks’te bir çözüm önerisi var

p.renk1{
  background: rgb(200, 54, 54); /* desteklemeyenler icin */
  background: rgba(200, 54, 54, 0.5);
}

Bu çözüm önerisinde desteklemeyen tarayıcılarda katı renk hali görüntülenirken destekleyen tarayıcılar için saydam hali görüntülenecektir.

Diğer bir yöntem;

<!--[if IE]>
  	<style type="text/css">
	.color-block {
		background:transparent;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
		zoom: 1;
	}
	</style>
<![endif]-->

Şeklinde sadece ie için üretilen bir kod ile çözüm sağlanır destekleyen tarayıcılar için standart kod kullanılır.

Kaynaklar

tarihinde Fatih Hayrioğlu

Webkit tabanlı tarayıcılarda(Google Chrome ve Safari) textarea’ların sağ alt köşesinde textarea’yı genişletmeye yarayan bir işaret bulunur bu işretin üzerine mouse ile basıp genişliği ve yüksekliği arttıra biliriz. Bu işlem kullanıcının uzun içerik girdiği durumlar düşünülerek konulmuştur ve yararlı bir özelliktir. Ancak bazen bu işaret ve işlevini kullanmak istemediğimiz durumlar olur ve bu işareti kaldırmak isteriz. Bu durum için çok kısa bir css kodu işimizi görüyor.

textarea{
	resize:none
}

Sadece bu kod ile istediğimizi elde edebiliriz. Tek sakıncası bu kodu sadece webkit tabanlı tarayıcılar desteklediği için sayfamızı w3c CSS kontrolünden geçirdiğimizde hata verecek olmasıdır.

Kaynak

tarihinde Fatih Hayrioğlu

Web sitelerimizi hızlandırmak için çeşitli yöntemler ve metotlar deneriz. Amacımız kullanıcıya daha hızlı cevap vermektir. Bunlardan bir tanesi önden resimleri kullanıcı bilgisayarına yükletip sonra açılacak sayfaların hızlı açılmasını sağlamak gibi bir amacımız olduğu durumlardır. Rollover resimleri, araç ipucu(tooltip), background resimleri vb. resimleri önceden yükletmek bize hem sayfa ilk açıldığında kötü görüntüyü engellememizi sağlar hemde kullanıcıya daha sonraki tercihlerinde daha hızlı cevap vermemizi sağlar.

Ben genelde daha önce kullanmadığım metotları kullanmadan önce bir araştırma yaparım ve sonuçta bana göre iyi olan yöntemi uygularım. Web ajanslarında çalışırken bu araştırmayı kısa tutmam gerekirken tek bir proje geliştirirken bu iş için daha uzun zamanımız oluyor.

Bu işi çin CSS, javascript ve ajax ile çözümler mevcut.

Ben bu yöntemlerden javascript yöntemi ile yapmayı tercih ettim. Diğer yöntemler hakkında genel bir bilgi verip geçeceğim.

CSS Yöntemleri

CSS Sprite yöntemide bu kategoriye girer.

CSS yöntemleri genelde sayfa içine konulan resimlerin tarayıcı görüntüsünden kaçırılması ile yapılan yöntemlerdir ki işin bu kısmı benim hoşuma gitmiyor.

CSS ile bu işi yapan bir örnek verelim.

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px;
   top: -9999px;
   height: 1px;
   width: 1px;
}

HTML kodu

<div id="preloaded-images">
 <img src="http://deneme.com/image-01.png" width="1" height="1" alt="Image 01" />
 <img src="http://deneme.com/image-02.png" width="1" height="1" alt="Image 02" />
 <img src="http://deneme.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>

Yukarıda görüldüğü gibi html içine eklenen resimler CSS yardımı ile kullanıcının göremeyeceği bölgelere itilmiştir. Bu şekilde bir çözüm üretilmiştir.

Javascript Yöntemleri

Javascript ile yapılan yöntemlerin genel yapısı bir sıraya sokulan resimler dinamik olarak doküman içine eklenir.

Javascript ile bu işlemi yapan çeşitli kodlar var. Benim uyguladığım ise aşağıdaki koddur. Bu kodun diğerlerine göre avantajı yükleme yaptığımız sayfanın yüklenmesi bittikten sonra bizim önden yükleme yaptığımız resimleri yüklemesidir.

function preloader() {
  if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();

    img1.src = "http://domain.tld/path/to/image-001.gif";
    img2.src = "http://domain.tld/path/to/image-002.gif";
    img3.src = "http://domain.tld/path/to/image-003.gif";
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
    if (oldonload) {
      oldonload();
    }
    func();
    }
  }
}
addLoadEvent(preloader);

Yukarıdaki javascript kodu işimizi görecektir.

jQuery ile daha kısa ve basit bir kod ile bu işi yapabiliriz.

// resim onyükleme fonksiyonu
jQuery.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
{
	jQuery("<img>").attr("src", arguments[i]);
}
};

// yükleme yap
$.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");

Yukarıdaki kodu yazınca yükleme yaptığımız sayfadaki öğeler yüklenirken yükleme yaptığımız resimlerde yüklenir. Bu benim istediğim bir durum değildir. Bence yükleme yapılacak sayfanın öğeleri yüklendikten sonra yüklenecek resimler yüklenmelidir. Kullanıcı ilk önce mevcut sayfayı tam görmelidir, sonra kullanıcıya göstermeden diğer sayfa resimlerini yüklemeliyiz.

Bunun için kodumuzu aşağıdaki değiştirmeliyiz.

 $(document).ready(function() {
 $(window).bind('load', function()
 {

   // resim onyükleme fonksiyonu
   jQuery.preloadImages = function()
   {
   for(var i = 0; i<arguments.length; i++)
   {
     jQuery("<img>").attr("src", arguments[i]);
   }
   };

   // yükleme yap
   $.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");

 });
});

Eklediğimiz sadece $(window).bind(‘load’ function()) kısmıdır. Burada sayfa yüklendikten sonra bu işlemi yap diyoruz.

Örneği görmek için tıklayınız.

Örneklerde dikkatiniz bir yere çekmek istiyorum. Firebug Net sekmesini açtım çünkü sayfa yüklenmesi anını görmenizi istedim. İlk resimde sayfa yüklenirken sonradan görüntüleyeceğimiz resimleride içeren bir durum söz konusu idi. Dikkat ederseniz ilk reismde dikey kırmızı çizgi en sondadır. İkinci resimde ise kırmızı dikey çizgi sayfa öğelerini sonuncusu olan resimden sonra çizilmiştir, daha sonra yükleme yapılan resimler yüklenmiştir.

Sonuç

Ben küçük bir araştırma sonucunda bu kodu kullanmayı uygun buldum. Bulduğum bu kodun kendimce gerekçelerini yukarıda açıklamaya çalıştım, eğer sizlerin daha iyi çözümleri ve önerileri varsa yorum kısmında bizlerle paylaşırsanız sevinirim.

Kalın sağlıacakla

Kaynaklar