Menüyü geç

 
28 Kas 2005
14yorum

Arkaplan Resmi KaydırmacaAnahtar Kelimeler : arkaplan, background, css, position

 
Arkaplan Resmi Kaydırmaca - arkaplan imajının pozisyonunu değiştirerek kolay efektlerarkaplan imajının pozisyonunu değiştirerek kolay efektler

Bloglar alıp başını gitti son 1 senedir, Türkiye interneti ise son 6 aydır blog mevzusu konusunda tartışmalar, oluşumlar, nedir/ne değildir muhabbetleriyle meşgul görünüyor.

İyi ya da kötü, herhangi bir konuda anlatacağınız bir şey var, ve blog kurmak fikri size gayet mantıklı geliyor. Eleştirecek değilim, ama en azından biraz farklı olmanıza yardım edebilirim!

Karen Cheng, Avustralya'da grafik/web tasarım alanında çalışan pek şeker bir insan, yazıya mevzu bahis olmasının sebebi ise, kişisel blog'u.. Sitesinde hepimizin bahsettiği şeylerden bahsediyor çoğunlukla, ama blog'u en beğenilen blog'lar arasında çoğu zaman. Sitesinde benim en beğendiğim fikir ise, tarihleri gösterme şekli..

Salı günü eklediği yazıların tarih alanı bu şekilde gözükürken,

Balık Baştan Kokar - body id kullanımı ile kolay güncellemeLink : Karen Cheng

Pazar günü yazdığı yazılar için,

Balık Baştan Kokar - body id kullanımı ile kolay güncellemeLink : Karen Cheng

böyle gözüküyor..

Ufak ve güzel bir detay, üstelik sitesinin hatırlanmasını da sağlıyor.. Karen, bunu yapmak için, 7 ayrı imaj hazırlayıp, günün ismine göre çağırıyor.

  1. <img src="sunday.gif" width="420"
  2. height="25" alt="Sunday" />

Fakat biz biraz daha değişik bir şey yapacağız, 7 gün için, 7 ayrı imaj hazırlayıp, 7 imajımızı altalta ekleyip bir tek imaj hazırlayacağız.

Arkaplan Resmi Kaydırmaca - arkaplan imajının pozisyonunu değiştirerek kolay efektlerLink : Orjinal boyutunda görmek için tıklayın

490 piksel genişliğinde 140 piksel yüksekliğinde , son derece kafa karıştıran bir imaj elde ettik.

Anne? Anneeee?

Gözünüz korktuysa kusura bakmayın, sadece bir kaç dakika daha sabredin, sabrettiğinize değecek..
<body> tagları arasında şunlar yazan bir blog sayfamız olsun...

  1. <h2 class="sali">Salı</h2>
  2. <p>Bu yazı salı günü yazıldı..</p>

  3. <h2 class="persembe">Perşembe</h2>
  4. <p>Cuma'ya bir gün kaldı, ha gayret...</p>

  5. <h2 class="pazar">Pazar</h2>
  6. <p>Tatilde bile sıkılmadan
  7. yazıyorum blog'uma,..</p>

  8. <h2 class="cumartesi">Cumartesi</h2>
  9. <p>Cumartesi?..</p>

  10. <h2 class="carsamba">Çarşamba</h2>
  11. <p>Haftanın ortası, moral kaynağı...</p>

  12. <h2 class="pazartesi">Pazartesi</h2>
  13. <p>Haftanın başında, pazartesi günü
  14. yazılmış bir yazı daha...</p>

  15. <h2 class="cuma">Cuma</h2>
  16. <p>heyyo cuma..</p>

Sitemizin içeriği bundan ibaret olduğundan, fazla okuyucumuz yok malesef, üstelik henüz oldukça kötü gözüküyor. Hazırladığımız imajıda kullanarak biraz çeki düzen verelim hemen..

CSS Dosyamızın henüz pürüpak derecede boş olduğunu varsayarak, şu satırlarla giriş yapalım...

  1. body{background:#F3F4F0;}
  2. h2{font:20px/20px Arial;}

Kimi kandırıyoruz? Hala içler açısı bir halde sitemiz,.. Bişiler eklemeye devam...

  1. p{
  2. margin:0px 0 50px 0;
  3. padding:10px 20px;
  4. font:10px/15px Arial;
  5. color:#000;
  6. }

Ok, Şimdi zurnamızın son deliğine geldik, lütfen dikkatinizi yoğunlaştırın ve iyice okuyun. Sadece bir kez anlatıcam - Şaka, CSS denilen şey pratikte bundan ibaret olduğu için döndürüp döndürüp bunu anlatıcam ayda bir kez -...

Zaman, classları verilmiş <h2>'lerimizi değerlendirme zamanıdır dedikten sonra, CSS dosyamıza şunları ekliyoruz...

  1. h2.pazartesi{background:url(bg.png)
  2. no-repeat 0px 0px;}
  1. h2.sali{background:url(bg.png)
  2. no-repeat 0px -20px;}
  1. h2.carsamba{background:url(bg.png)
  2. no-repeat 0px -40px;}
  1. h2.persembe{background:url(bg.png)
  2. no-repeat 0px -60px;}
  1. h2.cuma{background:url(bg.png)
  2. no-repeat 0px -80px;}
  1. h2.cumartesi{background:url(bg.png)
  2. no-repeat 0px -100px;}
  1. h2.pazar{background:url(bg.png)
  2. no-repeat 0px -120px;}

background:#renkkodu url(resimyolu.png) tekrarlama soldan pozisyon yukarıdan pozisyon;

sırasıyla özellikleri tanımlanabilir. Biraz çalışmak lazım üzerinde ama öğrendiğinizde hayat kurtaran bişidir. (CSS'e gerektiğinden fazla önem vermeye devam ediyorum, gözünüz korkmasın)

Şimdi sayfamıza bakalım, eğer imajın yolu doğruysa, her başlığın arkasında imajımız çıkacak.

Çıkacak ama okunmayacak? Çünkü <h2> tagları arasında gün isimleri yazıyor.

Aramızdan çakal olanlar, gün isimlerini silip &nbsp; yazarak sonuca ulaşabilirler, biz biraz daha zor bir yol seçiyoruz belki ama şöyle bişi yapıyoruz...

  1. h2{margin:0;
  2. padding:0;
  3. font:20px/20px Arial;
  4. text-indent:-9000em;}

Bir de biraz daha düzgün bir görüntü için,

  1. p{margin:0px 0 50px 0;
  2. padding:10px 20px;
  3. font:10px/15px Arial;
  4. background:#B4C1C5;
  5. color:#000;}

Şunu ekledik mi tamamdır..

Unutmayın ki, arkaplan resmi kaydırma tekniğini kullanabileceğiniz yerler neredeyse sınırsız, birazcık ufkunuzu açmanız yeterli.

İlgili Dosyalar

Arkaplan Kaydırmaca Makalesinin Örnek Kodları, .zip 3kb.
Arkaplan Kaydırmaca Makalesi PDF Dosyası, .pdf 156kb.

1.

cemshid
cevapla | yukarı

cemshid

Kasım 28, 2005 06:14 tarihinde şöyle demiş

Haha, süpermiş.. 2 ay beklettim makaleyi yayınlamak için, benden tam 59 dk. önce aynı konuda başka birisi yazmış, ingilizce ama...

Dersimi aldım yalnız, yazdığım gibi ekleyeceğim siteye ...

 

2.

azizk
cevapla | yukarı

azizk

Kasım 28, 2005 07:34 tarihinde şöyle demiş

çok güzel açıklamışsın eline sağlık. bence bu method en faydalı şekilde menülerde kullanılıyor. zeldman sitesinden esinlendiğim diyelim kodla bir tane menü yapmıştım ben de, her bir imajı tek tek load etmediği için başta bir kere load ediyor, oh gerisi gel keyfim gel. çok pratik. menü örneğini www.zeldman.com'da görebilir tüm ilgililer. bu arada heralde bu kadar korkunç cümle yapısına sahip başka bir paragraf yazmamışımdır. artık sana kısmetmiş :D

 

3.

fyrari
cevapla | yukarı

fyrari

Kasım 28, 2005 08:50 tarihinde şöyle demiş

Nereye varacak ya bu işin sonu?

Ben daha blogspotu bile doğru dürüst kullanamıyorken!

 

4.

poorgod
cevapla | yukarı

poorgod

Kasım 29, 2005 12:11 tarihinde şöyle demiş

Akıllıca bir yöntemmiş gerçekten bu :) Sanırım ben de benzer bir şey yapmaya kalksam Karen gibi bir şey yapardım, ama kabul etmek gerekiyor ki bu örnek çok daha esnek. Tabular olmayan durumlarda problem çıkabilir ama çoğu durumda çok kullanışlı.

Bu arada MT kullanan insanlar templatelere bulaşmamak için ne CSS oyunları icat ediyor, en azından bu açıdan MT'nin üstünlüğüne katılacağım :P

Şimdi düşündüm de, tabular olmayan durumlarda da kullanılabilir, mesela -eğer şablonumuz likit değilse- header diye tabir ettiğimiz bölgede içinde bulunduğumuz saati göre güneş/ay, aydınlık/karanlık efektleri olan bir resim olabilir, 990px'lik bir sitede 1880px'lik bir resim kullanıp, benim muhtemelen 990 gün uğraşıp çıkartamayacağım bir formül kullanarak kaydırabiliriz, sitemiz cıvıl cıvıl olur.

 

5.

sevban
cevapla | yukarı

sevban

Kasım 29, 2005 07:10 tarihinde şöyle demiş

güzel bir makale olmuş tebrikler. belki yersiz olacak ama yarışma sonuçları ne zaman açıklanacak :)

 

6.

junkie
cevapla | yukarı

junkie

Kasım 29, 2005 08:02 tarihinde şöyle demiş

efendim bu günleri tuesday wednesday olarak kodlarsak bazı blog programlarında otomatiğede bağlamamız mümkün gün değişkenini kullanarak otomatik değişme olur yani <h2 class=<?php blogday?>> gibi bi komutla şahane uyum sağlar. o zaman <h2 class=wednesday> çıktısı alarak daha dinamik olur. güzel olur bilhassa bloggerlar için.

 

7.

cemshid
cevapla | yukarı

cemshid

Kasım 29, 2005 08:14 tarihinde şöyle demiş

@sevban : sanıyorum ki bir iki gün içerisinde sonuçlar açıklanacak...

@junkie : ben o dediğin Blog yazılımından hazzetmediğim için böyle bir yönteme sıcak bakmıyorum :P
haklısın vallahi, gayet kolay biçimde halledilebilir, pekala blogger.com hizmeti için bile böyle bir şey yapılabilir.

 

8.

skykhan
cevapla | yukarı

skykhan

Aralık 5, 2005 12:53 tarihinde şöyle demiş

Vay be hocam pek bi şahane bi olaymış. Devamını bekliyoruz makalelerin :)

 

9.

arda
cevapla | yukarı

arda

Aralık 5, 2005 06:17 tarihinde şöyle demiş

severek okuduğum sayılı sitelerden biriside burası. çok sey öğreniyorum, sanırım daha da öğreneceğim..

büyüksün cemshid (:

 

10.

kadir
cevapla | yukarı

kadir

Aralık 28, 2005 03:19 tarihinde şöyle demiş

ben biraz abartıp yılın özel günleri için header kısmımda bu güne ait bir resim yada yazı ekliyorum.

 

11.

Faruk.Buker
cevapla | yukarı

Faruk.Buker

Ocak 2, 2006 10:13 tarihinde şöyle demiş

Merhaba, sürekli takip etmeye çalıştığım sayılı bloglardansın cemshid, tebrik ediyorum.

Makalelerinin arasına şu "Yorumlardaki önizleme kutusu"nu da katabilir misin?


Teşekkürler.

İyi Çalışmalar..

 

12.

ensar
cevapla | yukarı

ensar

Mart 19, 2006 11:53 tarihinde şöyle demiş

sayın cemshid,
bunu blogger da yapabiliyor myuz?

 

13.

miray
cevapla | yukarı

miray

Mart 20, 2006 04:56 tarihinde şöyle demiş

makaleler harika.......

 

14.

OrhanVeli
cevapla | yukarı

OrhanVeli

Mayıs 19, 2006 04:57 tarihinde şöyle demiş

Gerçekten çok hoş bir makale, bu olayın *hover*lı ornekleri menu tasarımında gerçekten de çok büyük kolaylık sağlıyor. Tam hatırlamıyorum ama süper bir ornek gormuştum buna benzer.

Evet tekrar elinize sağlık :)

 

Yorum Ekle 

*kalın yazı*
_italik yazı_
+altıçizgili yazı+
Gravatar'ı seviyoruz



 

yukarı

Yorum Önİzleme kutusu