Toggle Width

EndFRM
 
Konuyu Oyla:
  • Toplam: 25 Oy - Ortalama: 2.76
  • 1
  • 2
  • 3
  • 4
  • 5
Html Ve Css Giriş Paneli
Sado Çevrimdışı Muhammet Çolak
*
Yeni Üye
Üye No: 1
Konu Sayısı:
Yorum Sayısı: 662
101
Yorum: #1
Html Ve Css Giriş Paneli
Arkadaşlar Ben Bu Dersimde Sizlere Bir giriş panelini kodlamayı ve şekiller vermeye çalışcaz ben bu örneği kendim için bir oyun da admin paneli yaparken kullanmıştım kenarda duruyodu paylaşıyım dedim güzel bir panel Açık Ağızlı Gülümseme

Öncelikle Bir Div Oluşturalım

<div id="girisPaneli"></div

Şimdi Css Kısmına Gelelim Ve Bu Kodu Kullanalım

#girisPaneli {
        
width655px;
        
background-color#fff;


Şimdi de Başlık Kısmını Yapalım
html Kısmına Bun Kodu Kullanalım
<div id="girisPaneli">
<
div class="girisBaslik">Html Css Giriş Paneli</div>
</
div

Css

#girisPaneli {
        
width355px;
        
margin0 auto;
        
background-color#fff;
        
font-familySegoe UI;
}
.
girisBaslik {
        
background-imagelinear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -o-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -moz-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -webkit-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -ms-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -webkit-gradient(
    
linear,
    
left bottom,
    
left top,
    
color-stop(0.25#2D72A4),
    
color-stop(0.75#2B8ED5)
        
);
        
border1px solid #3b78a4;
        
color#fff;
        
padding5px;
        
text-aligncenter;
        
font-weightbold;
        
text-shadow1px 1px 1px #555;
        
border-radius6px 6px 0 0;
        
box-shadow0 0 5px #777, 0 1px 0 #63acdf inset;



Şimdi De Form Öğrelerini Ayarlayalım Bu Kısım Önemli

html
<div class="girisPaneliIcerik">
<
form action="" method="" id="girisPaneliForm">
<
input type="text" name="kullaniciAdi" class="girisIn" />
<
input type="password" name="kullaniciSifre" class="girisIn" />
<
button type="submit" class="girisButon"></button>
</
form>
</
div

css

#girisPaneli {
        
width355px;
        
margin0 auto;
        
background-color#fff;
        
font-familySegoe UI;
}
.
girisBaslik {
        
background-imagelinear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -o-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -moz-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -webkit-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -ms-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -webkit-gradient(
    
linear,
    
left bottom,
    
left top,
    
color-stop(0.25#2D72A4),
    
color-stop(0.75#2B8ED5)
        
);
        
border1px solid #3b78a4;
        
color#fff;
        
padding5px;
        
text-aligncenter;
        
font-weightbold;
        
text-shadow1px 1px 1px #555;
        
border-radius6px 6px 0 0;
        
box-shadow0 0 5px #777, 0 1px 0 #63acdf inset;
}
.
girisContent {
        
color#999;
        
overflowauto;
        
padding20px;
        
border2px solid #ddd;
        
border-topnone;
        
border-radius0 0 6px 6px;
        
box-shadow0 0 1px #aaa;
}
input.girisIn {
        
width320px;
        
padding5px;
        
margin-bottom10px;
        
border1px solid #ccc;
        
border-radius3px;
        
box-shadow0 0 10px #e5e5e5 inset;
}
button.girisButon {
        
floatright;
        
background-imagelinear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -o-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -moz-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -webkit-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -ms-linear-gradient(bottom#2D72A4 25%, #2B8ED5 75%);
        
background-image: -webkit-gradientlinearleft bottomleft topcolor-stop(0.25#2D72A4), color-stop(0.75, #2B8ED5) );
        
border1px solid #3b78a4;
        
color#fff;
        
padding5px 15px;
        
text-aligncenter;
        
font-weightbold;
        
text-shadow1px 1px 1px #555;
        
border-radius6px;
        
box-shadow0 0 1px #777, 0 1px 0 #63acdf inset;
        
font-size11px;


Arkadaşlar Bu Örnek Bayağadır Var Bende Hatam Olduysa Affola Sorununuz Olursa Yorumlarla Belirtebilirsiniz

Örnek Bunun Gibi Bişi Ortaya Çıkıcak Açık Ağızlı Gülümseme

[Resim: 65bwb.png]

Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız.
___________________________________

[Resim: 9gmju.gif]
19-05-2012 10:03
Bul Alıntı
asimavi Çevrimdışı @simavi
***
Gold Üye
Platin Üye
Üye No: 13
Konu Sayısı:
Yorum Sayısı: 717
187
Yorum: #2
RE: Html Ve Css Giriş Paneli
güzel olmus ben admin panelimi genelde basit yapıyorum çünkü benden baska kimse kullanmadığı için Açık Ağızlı Gülümseme

@simavi
19-05-2012 10:10
Bul Alıntı
Sado Çevrimdışı Muhammet Çolak
*
Yeni Üye
Üye No: 1
Konu Sayısı:
Yorum Sayısı: 662
101
Yorum: #3
RE: Html Ve Css Giriş Paneli
evet Açık Ağızlı Gülümseme ama ben şöle düşündüm hani mesela global paneller vardır ya mesela counter server için panel tek kişi kullanmıyo mesela onu düşünerek paylaştım Açık Ağızlı Gülümseme yoksa bende basit yapıom admin panelini Gülümseme

Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız.
___________________________________

[Resim: 9gmju.gif]
19-05-2012 10:15
Bul Alıntı
Mucit Çevrimdışı Bilim, Teknoloji ve PC
Yasaklı Kullanıcı
Senarist
Coder
Üye No: 11
Konu Sayısı:
Yorum Sayısı: 2,250
Yorum: #4
RE: Html Ve Css Giriş Paneli
vaybe çok işime yaradı Gülümseme sağol +10
19-05-2012 12:12
Bul Alıntı
Oyuncu Çevrimdışı Unity 3d - Ses & Dj
*
Yeni Üye
Üye No: 129
Konu Sayısı:
Yorum Sayısı: 2,693
811
Yorum: #5
RE: Html Ve Css Giriş Paneli
Evet gerçekten güzel sağol....

Linkleri Görebilmeniz İçin Üye Olmanız Gerekiyor. Üye Olabilmek İçin Lütfen Buraya Tıklayınız.
19-05-2012 14:24
Bul Alıntı


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  HTML ve CSS Temel Komutlar Mucit 0 496 24-11-2015 23:31
Son Yorum: Mucit
  [DERS] Html Kodlar RPG MAKER 8 2,294 07-07-2014 21:55
Son Yorum: RPG MAKER
  [DERS] html dersleri ders 2 ömer faruk ayvaz 4 1,578 06-07-2014 11:23
Son Yorum: RPG MAKER
Genel İzleyici [DERS] Html Ders 1 darkness6162 1 1,002 29-05-2014 17:11
Son Yorum: ömer faruk ayvaz
Güvenlik [DERS] Html Tüm Renk Kodları ve İsimileri darkness6162 1 921 29-05-2014 17:08
Son Yorum: ömer faruk ayvaz

Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi