CSS ile Yükleniyor Çubuğu Yapmak

[#Cream]

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 (: başlayalım cubuğumuzu yapmaya herzamanki gibi html kodlarımızla başlayalım


Kod:

Kod: Tümünü Seç Tümünü Kopyala

<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


Kod:

Kod: Tümünü Seç Tümünü Kopyala

.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


Kod:

Kod: Tümünü Seç Tümünü Kopyala

.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


Kod:

Kod: Tümünü Seç Tümünü Kopyala

.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 (:
evet kodlarımız yazdık bitirdik şimdi nasıl bir şey olduğunu görelim

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 

Kod:

Kod: Tümünü Seç Tümünü Kopyala

<meta http-equiv="Refresh" content="1;url=http://siteisminiz.com/" />
<meta http-equiv="Refresh" content="1;url=/forum/" />

[yusufkoc]

Teşekkürler, ön izleme mevcut mu acaba?