Web Sayfanıza Etkileyici Giriş Paneli

Ü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!

ÖRNEĞİ GÖRÜNTÜLE

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!

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

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.