|
|
||
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 <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 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 |
||
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... |
||||
16 May 2008 23:32 5Baybars demiş ki: Hiç aklıma gelmezdi bunu kodlamak. Gerçekten eline sağlık hocam. |
||||
16 May 2008 01:08 3RizeliGenc89 (53HaCKeR89) demiş ki: 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.. :/ |
||||
| Son Yapılan 10 Yorum | ||
|
||
|
Yukarı
İletişim
RSS Takip
İstatistikler
Site İçeriği
Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2 |