lookjapan.COM - IRC ve mIRC dünyasının forumu!   buy vps


  lookjapan.COM - IRC ve mIRC dünyasının forumu! IF - Programlama / Yazılım HTML - CSS - XML


Yeni Konu   Cevap Yaz

 
LinkBack Seçenekler Stil
Alt 23 Eylül 2015, 15:49   #1
 
Code - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: 01 Mart 2015
Mesajlar: 203
WEB Sitesi: www.code.com
IRC Sunucusu: irc.code.com
İlgi Alanı:
Alınan Beğeni: 33
Standart Kullanıcı Giriş Paneli

Çeşitli sitelerde gördüğünüz kullanıcı giriş panellerinin Html & Css’e dökülmüş halinin ikinci örneği

Bu örneği yaparken internette bulduğum bir psd (Photoshop) dosyasını CSS'e dökmem gerekiyordu. Yaptığım bu ufak çalışmayı sizlerle paylaşıyorum. Örnekte tasarım öğeleri (resim..) bulunmaktadır. Öncelikle CSS betiklerimizi yazalım.

CSS Betikleri
Kod:
html, body{}
body{font-size:12px;line-height:22px;font-family:'Arial',Tahoma,sans-serif;color:#606569;background-color:#353535;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-font-smoothing:antialiased;} 
.kapsul{background:url('../images/bg.png');width:250px;height:204px;margin:100px auto;padding-top:34px;padding-left:37px;padding-right:38px;}
.kapsul .e-posta{background:url('../images/bg-e-posta.png');width:200px;height:40px;margin:0px auto;display:block;border:0px;padding-left:50px;line-height:40px;outline:none;margin-bottom:30px;color:#929292;}
.kapsul .sifre{background:url('../images/bg-sifre.png');width:200px;height:40px;margin:0px auto;display:block;border:0px;padding-left:50px;line-height:40px;outline:none;margin-bottom:24px;color:#929292;}
.kapsul input.hatirla{position:relative;cursor:pointer;margin-left:6px;}
.kapsul input.hatirla:after{background:url('../images/bg-hatirla.png') no-repeat;width:23px;height:17px;content:'';position:absolute;left:0px;top:0px;}
.kapsul input.hatirla.aktif:after{background:url('../images/bg-hatirla-aktif.png');width:23px;height:17px;content:'';position:absolute;left:0px;top:0px;}
.kapsul span.hatirla{margin-left:14px;color:#929292;line-height:21px;}
.kapsul .buton{background:url('../images/bg-buton.png');height:40px;margin:0px auto;display:block;border:0px;line-height:40px;outline:none;color:#fff;padding:0px 50px;cursor:pointer;border-radius:4px;margin-top:22px;}

Betikleri

Kod:
<section class="kapsul">
<input type="text" class="e-posta" value="mail@mail.com" data-deger="mail@mail.com" />
<input type="password" class="sifre" value="*****" data-deger="*****" />
<input type="checkbox" class="hatirla" />
<span class="hatirla">Beni hatırla</span>
<button class="buton">Giriş Yap</button>
</section>

Örnek
-


-Alıntı

İyi forumlar..
 Code isimli Üye şimdilik offline konumundadır   Alıntı

Yeni Konu   Cevap Yaz

Etiketler
giriş, kullanıcı, paneli


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık


Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
Html ve Css ile Sohbet paneli Entrance HTML - CSS - XML 3 23 Haziran 2018 10:25
Sesli Sohbet Paneli hata Web Site Tanıtımları 0 25 Ocak 2017 16:49
Facebook'un Kayıt Paneli Entrance HTML - CSS - XML 4 01 Mayıs 2016 23:51
vbulletin 5 connect - Hoşgeldin paneli - [DBTech] InfoPanels v2 Derin vBulletin 5.x.x 0 22 Mart 2015 01:43
Radyo İstek Paneli Toprak Hazır Kodlar 0 27 Şubat 2015 22:40

web hosting web hosting
 buy vds
 vps buy

Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.