Google Fan Webmaster Forumu

Geri git   Google Fan Webmaster Forumu > Client side Programlama > HTML - CSS - XML

HTML - CSS - XML HTML & CSS Programlama

Seçenekler Stil
  #1  
Okunmamış 05.07.2014, 02:43
 
İstanbul Avrupa Şubesi
Yaş: 24
Mesajlar: 28
Konular: 28
Ticaret Sayısı: (0)
Aktiflik: 0 / 75
Wink Web Sayfanıza Etkileyici Giriş Paneli

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Üyelik sistemi ve yönetici sayfaları bulunan tüm web sayfaları kullanıcıların giriş yapabileceği formlar barındırmakta. Siz kendi kullanıcı giriş formunuzun tasarımından memnun musunuz?

Uzun bir aradan sonra tekrar bir giriş formu tasarımıyla sizlerleyiz. Bu sefer açık tonlar ve basit bir tasarım kullandık. Bu sefer iskeletimiz ise son teknoloji CSS3 ve HTML5 kod satırlarından oluşmakta!

Nasıl hazırlanır?

Sizler için hazırladığımız tasarım, form ile uygun bir arka plan rengi kullanmakta. Geçişli olan bu renk body tagına uygulanan linear-gradient ve box-shadow ile hazırlanmakta. Söz konusu arka plan daha önce “CSS ile Yumuşak Geçişli Arka Planlar” isimli konumuzda paylaşmıştık.

İlk olarak HTML kodlarımızla başlayalım. Kodlarımızı biraz tanıyacak olursak ;
Section HTML5 ile aramıza katılan bir element. Detaylar için buradaki makalemize göz atabilirsiniz.
Form objelerimizdeki placeholder tanımlamaları text formunun varsayılan değeridir. Kişi formu doldurmak için tıkladığında otomatik olarak silinirler.
Bildiğiniz gibi button oluşturmak için artık inputlarla cebelleşmemize gerek yok. Button tagına merhaba deyin!

Kod:
<section>
<input class="giris-yap" type="text" name="kullanici-adi" placeholder="Kullanıcı adı"/><input class="giris-yap" type="password" name="parola" placeholder="Şifreniz"/>
<button>GİRİŞ YAP</button>
<h3>Şifremi Unuttum</h3><input class="radio-button" name="" value="" type="checkbox"/><h2>Beni Hatırla</h2>
</section>
Sırada CSS kodlarımız var.

Kod:
section{
background:rgba(225, 225, 225, 0.4);
margin:0 auto;
width:300px;
padding:20px;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:0 0 65px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 65px rgba(0,0,0,0.2);
box-shadow:0 0 65px rgba(0,0,0,0.2);
}

.giris-yap {
margin:5px 5px 15px 5px;
width:120px;
padding:10px;
outline:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:none;
background:rgba(225, 225, 225, 0.5);
font:0.7em Arial;
color:#fff;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}

.giris-yap:focus {
background:#fff;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
color:#1d2b37;
}

button{
border:none;
padding:17px;
width:100%;
color:white;
letter-spacing:2px;
text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5);
cursor:pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-top:5px;
font-family: Helvetica, serif;
background: #fff6e4;
background: -moz-linear-gradient(top,#8b9da9 0%, #687e8d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b9da9), color-stop(100%,#687e8d));
background: -webkit-linear-gradient(top,#8b9da9 0%,#687e8d 100%);
background: -o-linear-gradient(top,#8b9da9 0%,#687e8d 100%);
background: -ms-linear-gradient(top,#8b9da9 0%,#687e8d 100%);
background: linear-gradient(to bottom,#8b9da9 0%,#687e8d 100%);
}

button:active {
box-shadow:inset 0px 2px 1px rgba(0, 0, 0, 0.4);
}

.radio-button{
-webkit-appearance: none;
margin:15px 0 0 70px;
background-color:#687e8d;
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}

.radio-button:checked {
background-color: #fff;
color: #fff;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}

.radio-button:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 1px;
left: 3px;
color: #000;
}

h2,h3 {
display:inline-block;
position:relative;
bottom:5px;
margin:0px;
left:6px;
color:white;
font: 300 0.8em Arial;
}

h3{float:left; margin-top:20px; border-bottom:1px dotted white;}
Ve tasarımımız burada son buluyor.

Kapanış

Üyeler için hazırladığınız giriş ekranları fazlasıyla önemli. Google, Yahoo, Hotmail, Twitter, Facebook, Ubuntu ve türevi tüm büyük isimlerin giriş ekranlarına ve bu tasarımı oluşturan CSS kodlarına göz atın. Gayet emek harcandığını göreceksiniz. Sizler de basit bir arayüz kullanarak kullanıcıya kolaylık sağlayan giriş ekranları kullanmalısınız. Yukarıda hazırladığımız örnek ise sizin için bir taslak niteliğinde.

İyi çalışmalar.
Alıntı ile Cevapla

Reklam
Cevapla

Tag Ekle
etkileyici, giris, paneli, sayfaniza, web


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



İçerik sağlayıcı paylaşım sitelerinden biri olan TurkWebmasterlar.Com WebMaster Forum Adresimizde T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. TurkWebmasterlar.Com hakkında yapılacak tüm hukuksal Şikayetler buradan iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde TurkWebmasterlar.Com yönetimi olarak tarafımızdan gereken işlemler yapılacak ve Avukatlarımız size dönüş yapacaktır.