‘background’ etiketi için sonuçlar

CSS İpucu 30 : background() tanımında tırnak kullanımı

Ocak 20th, 2011 • 7 yorum CSS, XHTML
Etiketler: , ,

CSS kodu yazarken background tanımlarında bazı yerlerde tırnaklı tanım yapıldığını, bazı yerlerde ise tırnaksız tanım yapıldığını görmüşsünüzdür. 

	background("deneme.gif");

veya

	background(deneme.gif);

Ben birkaç güne kadar arada bir farkın olmadığını düşünüyordum.(Aslında benim gibi özel durumlar hariç bir fark olmadığı hakkındaki düşüncem devam ediyor.)

Projede css’de kullanılan resimlerin ön belleğe alınmaması için background:url(denem.gif?v={VERSION}) diye bir yol izliyoruz versiyon kısmına her atılan versiyonun numarası yazıyor ve böylelikle tarayıcılar resimler önbelleğe almıyor özelliklede Chrome!

Tabi bu kullanım Dreamweaver’da css otomatik tamamlamasını ve bu tanımdan sonraki özelliklerin renklendirmesini bozuyor.

	background(deneme.gif?v={VERSION});

Dün ise eğer bu tanımı tırnak içinde yazarsam Dreamweaver otomatik tamamlaması ve kod renklendirmesini bozmadığını gördüm ve sevindim. 

	background("deneme.gif?v={VERSION}");

Sağlıcakla kalın.

CSS İpucu 29: CSS ile Önden Resim Yükleme Teknikleri

Ocak 6th, 2011 • 6 yorum CSS
Etiketler: , ,

:hover display:none ile gizlenmiş öğelere atanmış ardaalan resimlerini tarayıcı yüklemiyor. Bu durum :hover haline geldiğimizde resim yüklenmeye başlar ve görüntü sonra gelir ve kötü bir görüntü oluşturur. Bu sorunu çözmek için css sprite tekniğini kullanırız. Benzer bir sorun ajax ile çalışan bir yapıda sayfa ilk yüklendiğinde yüklenmemiş alanlarda tanımlı ardalan resimleri içinde geçerlidir. Bu durumda ise resimleri ön yükleme yapmak önemlidir.

Daha önceki makalemizde bir iki yöntem anlatmıştık. http://www.fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/

Şimdi daha basit bir yöntemi daha bilgi dağarcığımıza ekleyelim.

Ajax ile sonradan yüklenen elemanlarımızın ardalanına atadığımız resimleri önceden yüklemek için mevcut ardalan atanmamış bir elemana bu ardalan resmini tanımlarız ve konumunuda sayfa dışına vererek(-9999px) görünmez yaparız. Böylelikle resim yüklenmiş olur ve sonradan yüklenen alanlar açıldığında görüntü problemi yaşamamış oluruz.

<div class="resimYukle"></div>

CSS kodumuzda 

.resimYukle{ background:url(/images/bg.gif) -9999px -9999px no-repeat}

Bu durum için fazladan bir div açıp onun ardalanına bu resmi atayabiliridk ama eğer sayfa içinde ardalan tanımı olmayan bir eleman varsa bunu tanımlayarak fazladan bir divden kurtulmuş oluruz. Bir not bu kodu css kodumuzun sonuna eklememiz daha mantıklıdır. 

.baskaBirEleman{ background:url(/images/bg.gif) -9999px -9999px no-repeat}

Benzer bir kodu :after seçicisi ve content özelliği ile de yapabiliriz. 

body:after {content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) url(img05.png)}

Bu kodu ie7 ve ie6 desteklemiyor maalesef.

Ayrıca CSS3 ile bir elemana birden fazla background tanımıda yapabiliyoruz bu özellik yardımı ile de yapabiliriz. Tabi tüm tarayıcılar desteklemediği için beklemek gerekiyor.

Kaynaklar

“CSS’e başlamak” kitabı hazır

Şubat 26th, 2008 • 7 yorum Haberler
Etiketler: , , , , , , , , , , , , , ,

CSS'e başlamakUzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslınada buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı; makalelerimin derlenip düzenli hale getirildiği bir e-doküman.

Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkanlar nispetinde 2. kitapta çıkacaktır.

Kitabı ve kaynak dosyalarını indirmek için tıklayınız.

17 Ağustos 2007 Web’den Seçme Haberler

Ağustos 17th, 2007 • 5 yorum Haberler
Etiketler: , , , , , , , , ,

  • Asp.net GridView ile birden fazla satır eklemeyi anlatan güzel bir makale. Link
  • Web erişilebilirliği hakkında Yahoo tiyatro takımının yayınladığı bilgilendirici bir video. Link
  • Web programcılarının işini kolaylaştıracak Firefox eklentileri, bende bunların çoğunu kullanıyorum, çok yararlı araçlar sizlerede öneriyorum. Link
  • İnternet üzerinden kullanabileceğimiz web araçları. Link
  • Javascript dosyalarımızı nasıl hafifletiriz adlı güzel bir makale. Link
  • Javascript kullanımı arttıkça boyutlarıda artıyor ve boyutları kısaltmak araçlar çıkıyor işte size YUI’nin javascript boyut azaltma aracını anlatan güzel bir makale. Link
  • CSS ile zemin resimli arama alanları yapmayı anlatan güzel bir makale. Link
  • Artık web’de bir çok ders görsel olarak yayınlanmakta işte size tüm bilgilendirme videolarını içeren bir site. Link
  • .Net ile yapılmış açık kaynak projeler artıyor. dasBlog 2.0 Released günlük script’ini yayınladı. Link
  • Javascript programcıları için jQuery anlatan bir makale. Link
  • Hasan Yalçın freelance çalışanlar için güzel bir makale yazmış. "Tasarımcılar İçin Hayır Demenin 8 Yolu!" Link
  • uzmantv.com adlı güzel bir site açılmış. Uzmanların uzmanlık alanları hakkında bizleri video ile bilgilendirdiği güzel düşünülmüş bir site. Link

28 Mayıs 2007 Web’den Seçme Haberler

Mayıs 28th, 2007 • Haberler
Etiketler: , , , , ,

  • CSS background özelliğinin ayrıntıları ile anlatıldığı bir makale. Link
  • CSS ile boyutu değişebilen resim eklemeyi anlatan bir makale. Link
  • Adobe Dreamweaver CS3′ün RSS araçlarını anlatan bir makale. Link
  • Web tasarımcıları için güzel bir kaynak. 70 kodlama tekniği + 80 tasarım ipucu pdf olarak sunulmuş. Link
  • JQuery javascript kütüphanesi ile yapılmış güzel efektler. Link
  • Basit bir şekilde form kontrolü yapmamıza olanak sağlayan bir hazır javascript kodu. Link
  • Adım adım işlemler yapılan sayfalarda kullanılan menü sisteminin CSS ile yapılmış örneği. Link

21 Mayıs 2007 Web’den Seçme Haberler

Mayıs 21st, 2007 • Haberler
Etiketler: , , , , , , ,

  • WordPress 2.2 verisiyonu çıkmış. Link
  • Nisan 2007′deki en iyi web makaleleri ve araçları. Link
  • 8 CSS hack(düzeltme) ayrıntılı anlatan bir makale. Link
  • Html buton elementini yeniden keşfetmek adlı bir makale. Link
  • Smashing Magazine bu seferde lightbox ve sildeshow scriptlerini listelemiş güzel bir liste. Link
  • Google Video artık 3. parti video sitelerinide indeksliyormuş. Google’dan tekelleşmiyoruz mesajı Link
  • Değişik bir farklı kenarlı kutu makalesi. Link
  • Saydam PNG giydirme  ile yapılmış güzel bir örnek. Link
  • 101 CSS kaynağının listelendiği güzel bir liste. Link
  • CSS ile yapılmış 5 adet açılır menü örneği. Link

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.