23 Eylül 2015, 15:49 | #1 |
Üyelik tarihi: 01 Mart 2015
Mesajlar: 203 WEB Sitesi: www.code.com IRC Sunucusu: irc.code.com İlgi Alanı: Alınan Beğeni: 33 |
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.. |
Alıntı
|
Etiketler |
giriş, kullanıcı, paneli |
Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir) | |
Seçenekler | |
Stil | |
|
|
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 |