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


Give Me Everything

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    May 2012    »
PtSaÇrPrCuCtPz
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 


blackinci.com da bir forum sayfası olsun mu?
Evet Olsun
Hayır Olmasın
Kararsızım
Fikrim yok

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (4)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)

Css İle Yükleniyor Cubuğu Yapmak

Css İle Yükleniyor Cubuğu Yapmak

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
<meta http-equiv="Refresh" content="1;url=http://www.blackinci.com/" />
<meta http-equiv="Refresh" content="1;url=/forum/" />


Bu uygulamayı bilgisayarınıza indirmek için alttaki bağlantıyı kullanabilirisiniz
yukleniyor.rar [1.61 Kb] (İndirme: 801)
9 Ocak 2011 16:33 15blackinci demiş ki:
Fırat,
Bir yere birleşmesi gerekmiyor ki zaten

4 Ocak 2011 11:50 14Fırat demiş ki:
Kardeşim Bunları Birleştiriyomuyuz

29 Ekim 2010 17:53 13bugrahan demiş ki:
Süper winked

15 May 2009 14:42 12HAKAN demiş ki:
ellerine sağlık ders için çok teşekkürler usta :)

8 Aralık 2008 11:01 11Alperen Güneysu demiş ki:
Gerçekten çok quzeL olmus.Elinize emeqinize saqlık

25 Haziran 2008 14:48 10byesrarengiz demiş ki:
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.

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

31 May 2008 21:51 8Oguzcan demiş ki:
'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...

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

17 May 2008 17:21 6minor demiş ki:
Ç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...


Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • CSS3 Kutu Elementlerine Gölge Verme Box ...
  • demiş ki 
  • çok sağol üstad çok güzel anlatım olmuş. :)
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • tamer,
    Resim görebilirsem daha yardımcı olurum
  • Blackinci Seri 5 MyBB teması
  • tamer demiş ki 
  • hocam temanın çok başarılı fakat saol taraf boşlukda sosyal medya yazısı çıkıyor bunu nasıl kaldırabilirim
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Webmaster,
    Ben daha önce bir defa mybb için ücretli tema hazırladım ama hiç satmadan tekrar ücretsiz olarak dağıttım şuan için soruyorsanız mybb yi bıraktım... başka bir forum sistmei ile ilgileniyorum.
    Kendiniz bir fiyat biçmek adına bilgi edinmek için soruyorsanız bu yaptığınız grafiklere, yazdığınız kodlara ve harcadığınız emeğe göre değişir ama şuan için ücretli tema yapmanızı tavsye etmem zira mybb nin vbulletin gibi ücretli olacağı dedikoduları dolaşıyor eğer bu gerçekleşirse işte ozaman güzel olur ve ücretli temaların önü açılmış olur ozaman daha rahat ve güvenilir tema hazırlayıp satabilirsiniz iyi günler.
  • Css ile Aktif Menü Buton Yapımı
  • Webmaster demiş ki 
  • Merhabalar
    Blackinci MyBB temalarını ücretli olursa ne kadar ücrete hazırlıyorsunuz? Buradan belirtirseniz sevinirim
    İyi günler
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Kadir Kaya,
    Bedava forum sistemi sunun sitelerin sistemi nasıl işliyor bilemiyorum ama gözükmemesi normaldir bu tür siteler çok kısıtlı çalışırlar.
  • Css Balon Büyüyen Menü
  • demiş ki 
  • Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
  • Css ile Aktif Menü Buton Yapımı
  • demiş ki 
  • Usta emeğine sağlık ama tr.gg sitelerinde ve jindo.com sitelerinde çalışmıyor hatta hiç gözükmüyor niye anlayamadım.
  • Blackinci vBulletin Teması Seri 1
  • demiş ki 
  • Saol Güzel :)

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2