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

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

«    Eylül 2010    »
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
 

MyBB için css ile al... Blackinci Seri 4 MyB... Blackinci Seri 5 MyB...

2. Versiyon Temasını Nasıl Buldunuz?
Mükemmel
Çok İyi
İyi
Eh İşte
Beğenmedim

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

Eylül 2010 (2)
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: 496)
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...

16 May 2008 23:32 5Baybars demiş ki:
Hiç aklıma gelmezdi bunu kodlamak. Gerçekten eline sağlık hocam.

16 May 2008 14:18 4ByResul demiş ki:
Herzamanki Gibi konuşturmuşun CSS yi :D

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.. :/


Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • Blackinci Seri 4 MyBB İphone Teması
  • orkun19 demiş ki 
  • ellerine sağlık arkadaşım telefon sitesi olanlara bire bir.
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Kaç zamandır yazacaktım bir türlü nasip olmadı,demek ki bu güne nasipmiş.
    Her zaman olduğu gibi yine başarılı bir tasarıma imza atmışsınız,sizi canı gönülden kutlarım Davut bey.

    Ayrıca temanız şu adreste yayınlanmıştır bilginiz olsun.
    http://www.mybbgrup.com/blackinci-seri-5-mybb-1-6-temasi-t-1170.html
  • Üye Giriş Paneli Tasarımları
  • blackinci demiş ki 
  • ALeeNN,
    Bu genel olarak yapılmış bir üye giriş paneli tasarımı. Siz bunu istediğiniz scripte monte edebilirsiniz yapmanız gereken mevcut inputlara ve butona
    1- Class isimlerini eklemek
    2- Grafikleri Uygun yere aktarmak
    3- CSS kodlarını eklemek
    bu kadar yani bunu birazcık web le uğraşan bir çok kişi zorlanmadan yapabilir
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Yine Harika Bir Tasarim olmus. Eline Saglik. :)
  • Üye Giriş Paneli Tasarımları
  • ALeeNN demiş ki 
  • Hocam herşey çok güzel ama bunun mybb'ye uyarlanmışını bizler yapamadık. Sizde vermemişsiniz. Onun içinde mybb'de bunu kullanamıyorum. Eğer mümkünse birde 1. giriş şeklinin mybb'ye uyarlanmış halini verebilirmisiniz????
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Teşekkrüler hocam Bu siteyi bilmiyordum deniyeceğim winked
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • Cracker-16,
    Çok İstiyosanız kullanın ama ben o arka planı bgpatterns sitesinden yaptım dilerseniz siz kendiniz için yapabilirsiniz
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Hocam Çok Güzel Bir Tema Yapmışsınız Ellerinizie Sağlık.Bu arada Arkaplanını Başka Temalarda Kullanmamıza İzin Verirmisiniz?
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Elinize sağlık harika bir tema olmuş wink

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

Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2