Blackinci » CSS » Css İle Yükleniyor Cubuğu Yapmak

(Oy Verenler: 36)

Css İle Yükleniyor Cubuğu Yapmak

1350 Kere Okunmuş

CSS blackinci 14 May 2008 Haberi Yazdır

Bazı sayfalar arası geçişlerde bazende index sayfalarında görürüz "yükleniyor lütfen bekleyiniz..." diye tabi bu geçiş sayfalarında coğunlukla bir yükleniyor grafiği kullanılıyor gayette güzeller ama bunu grafik kullanmadan yapmak da mümkün ne kadar kullanışlı olur bilemem tabi ama insan aklına gelince yapıyor işte smile

başlayalım cubuğumuzu yapmaya herzamanki gibi html kodlarımızla başlayalım

<div class="ortala">
<p>Yükleniyor Lütfen Bekleyiniz...</p>
<div class="govde">
<marquee direction="right" scrollamount="3" scrolldelay="60"><div align="center">/////////////////////////////////////////////////////////////////////////</div></marquee>
</div>
</div>

üstteki html kodumuzda adını "ortala" koyduğum ilk div elementi içerisine yazımızı yazdık "ortala" elementini kapatmadan bir div elementi daha kullandık onun adı da "gövde" olsun onun içinede marquee elementi kullandık bldiğiniz gibi marquee içindeki resim, yazı vs. gibi şeyleri sağdan sola, soldan sağa kaymasını sağlayan elementtir ve div elementlerini kapattık. Geçelim css kodumuzu yazmaya

.ortala {
width: 320px;
height: auto;
margin: auto auto;
position: relative;
padding-top: 4cm;
}

div elementine verdiğimiz ortala tanımı ilk elementten başlayalım uzunluk ve yükseklik değeri verdik margin ile ortaladık göreceli konumlandırma verdik ve üstten 4 santim ittik geçelim "gövde" kısmına

.govde {
display: block;
width: 320px;
height: 30px;
overflow: hidden;
padding:0;
margin-top: 0.5cm;
position: absolute;
left: 0px;
background: #fff url(bg.png) bottom left no-repeat;
padding: 0 3px 6px 3px;
}

ikinci elementimiz olan "govde" de ise blok görünümü verdik yine uzunluk ve genişlik değeri verdik ve taşmaların gözükmemesi için overflow:hidden kodunu kullandık gövde kutumuzun içindeki padding değerini sıfırladık üstten 0.5 santim boşluk bıraktık ve mutlak konumlandırma ile sola sıfırladık.
Neden böyle bir konumlandırma verdik daha kolay ortalayabilirdik cubuğumuzu fakat marquee elementini "align=center" yada margin ile ortaladığımızda içindeki yazımız yaklışık 5 saniye kadar geçikmeli gözüküyor zaten yapıcağımız bir meta yönlendirme ortalama 3 veya 5 saniye kadar olacağı için bu bizim işimize gelmezdi bu yüzden göreceli ve mutlak konumlandırma kullandık. Evet geçelim diğer kodumuza

.govde marquee {
font-size: 3em;
font-weight: bold;
font-family: Verdana;
font-style: italic;
letter-spacing: -17px;
width: 320px;
height: 30px;
overflow: hidden;
color: #FFF !important;
color: black;
}

Evet govde içerisindeki marquee elementi için Son kodlarımızı yazıyoruz kalın ve yatık oldukca büyük font boyutu kullanıyoruz /↔/ aralarını 17 piksel yakınlaştırıyoruz yükseklik ve genişlik değeri veriyoruz ve taşmaları gizliyoruz
iki renk kodu görüyorsunuz ie6 için siyah renk ve diğer gelişmiş modern tarayıcılar için beyaz renk görünmesi için ie6 da arka plan resmi gözükmüyor onunla uğraşmadım üşendim açıkcası onun için hemen renk verdim giçiştirdim wink

evet kodlarımız yazdık bitirdik şimdi nasıl bir şey olduğunu görelim
Örnek - Ön İzleme

En son meta yönlendirmesi yapabiliriz content="1 (bir) yazan kısım saniye olarak bekleme süresini belirleyebiliriz bir dizine yada bir web sitesi adresine yönlendirme yapabiliriz
Örnekler

Bu uygulamayı bilgisayarınıza indirmek için alttaki bağlantıyı kullanabilirisiniz
yukleniyor.rar [1.61 Kb] (İndirme: 104)

Bu Konuda 10 Yorum Yapılmış
Bu Konuda 10 Yorum Yapılmış

	RizeliGenc89	14 May 2008 21:17 Alıntı Yap #1
Süper olmuş.. Başlığı ilk okuduğumda dedim herhalde sayfa yükleniyor gösterme kodu bu.. Kodlara bi baktık yan çizgi çizli fln (///////////////////////// yani) Valla tek kelime işte Süper :)

	Arno	15 May 2008 23:05 Alıntı Yap #2
CSS ile yapılamayacak bişey yok sanırım :)

	RizeliGenc89 (53HaCKeR89)	16 May 2008 01:08 Alıntı Yap #3
OOOuuuu Arno sendemi buradaydın :) Bıraktın MyBB yi geldin Blackİnci ye :) Hakikatten CSS de çok züper özellikler varda Türkçe kaynak bulması çooook zor.. :/

	ByResul	16 May 2008 14:18 Alıntı Yap #4
Herzamanki Gibi konuşturmuşun CSS yi :D

	Baybars	16 May 2008 23:32 Alıntı Yap #5
Hiç aklıma gelmezdi bunu kodlamak. Gerçekten eline sağlık hocam.

	minor	17 May 2008 17:21 Alıntı Yap #6
Çok güzel olmuş tebrikler...Bende CSS öğrenmek istiyorum fakat nerden başlayacağımı bilemiyorum.Yardımcı olabilirmisiniz.Web'ten hangi kaynaklardan yaralanabilirim.Bildiğiniz site isimleri var ise paylaşırsanız sevinirim...

	blackinci	18 May 2008 00:33 Alıntı Yap #7
Burada bir kitap hazırlanmış türkçe kaynak olarak oldukca güzel bunun dışında css ile ilgili googlede arama yapabilirsiniz

	Oguzcan	31 May 2008 21:51 Alıntı Yap #8
'bg' dosyasını .png formatında değil de .gif formatında yaparsan daha güzel olur bence. Çünkü .bg formatında İnternet Explorer 6 Desteklemiyor...

	blackinci	31 May 2008 22:29 Alıntı Yap #9
zemin rengi resim zemin rengi beyaz aynı yaptım sorun olmaz .gif formatı .png kadar kaliteli sıkıştırma yapamaz

	byesrarengiz	25 Haziran 2008 14:48 Alıntı Yap #10
güzel teknik blackinci teşekkür ederim.eminim kimsenin aklına gelmemiştir böyle birşey basit olmasına rağmen ilham gerektiren şeyler bunlar.aslında bu tarz mantıklarla çalışıldığında flash a ve gif e pek gerek kalmıyor.javascript ve yeni nesilin bombası olan ajaxla herhalde artık acaip şeyler çıkacak piyasaya.