Css3 ile hazırlanmış kullanışlı bir giriş formu örneği. Tamamen css kullanılarak hazırlanmış olan bu giriş formu örneğinde herhangi bir resim dosyası bulunmuyor. Giriş formundaki input bölümlerinin solunda bulunan ikonlarda font avesome kullanılmış. Ayrıca aynı css kodları ile beraber demosayfasında birde kişi kartıda bulunuyor. Kullanıcıların giriş işleminden sonraki sayfalarında kullanıcı bilgileri ve fotoğrafının görüntülenebileceği bir bölüm. Bu özellik daha çok sosyal ağ siteerini andırsada çoğu forum sitesinde de kullanılabilir bir örnek diye düşünüyorum.
Form örneğinin en güzel tarafı input alanlarının görünmemesi. Tıklanılabilir olduğundan bile insan şüphe duyabiliyor. E-mail ve Password yazan yerlere tıkladığınızda kaybolup görünen bir dikey çizgi beliriyor ve siz yazmaya başladıktan sonra E-mail ve Password yazısı kayboluyor. Yeşil renkle hazırlanmış olan login butonu mouse ile üzerine geldiğinizde hafif bir renk değişimine uğruyor ve tıkladığınızda ise içeri batarmış gibi görünüyor.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Font awesome adresi :
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Css :
body{
background: #4E535B;
font-family: 'Montserrat', Arial;
font-size: 1em;
}
h2{
text-align: center;
color: #F1F2F4;
text-shadow: 0 1px 0 #000;
}
a{
text-decoration: none; color: #EC5C93;
}
.ribbon{
background: rgba(200,200,200,.5);
width: 50px;
height: 70px;
margin: 0 auto;
position: relative;
top: 19px;
border: 1px solid rgba(255,255,255,.3);
border-top: 2px solid rgba(255,255,255,.5);
border-bottom: 0;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
.ribbon:before{
content:"";
display: block;
width: 15px;
height: 15px;
background: #4E535B;
border: 4px solid #cfd0d1;
margin: 18px auto;
box-shadow: inset 0 0 5px #000, 0 0 2px #000, 0 1px 1px 1px #A7A8AB;
border-radius: 100%;
}
.login{
background: #F1F2F4;
border-bottom: 2px solid #C5C5C8;
border-radius: 5px;
text-align: center;
color: #36383C;
text-shadow: 0 1px 0 #FFF;
max-width: 300px;
margin: 0 auto;
padding: 15px 40px 20px 40px;
box-shadow: 0 0 3px #000;
}
.login:before{
content:"";
display: block;
width: 70px;
height: 4px;
background: #4E535B;
border-radius: 5px;
border-bottom: 1px solid #FFFFFF;
border-top: 2px solid #CBCBCD;
margin: 0 auto;
}
h1{
font-size: 1.6em;
margin-top: 30px;
margin-bottom: 10px;
}
p{
font-family:'Helvetica Neue';
font-weight: 300;
color: #7B808A;
margin-top: 0;
margin-bottom: 30px;
}
.input{
text-align: right;
background: #E5E7E9;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 0 0 3px #65686E;
border-bottom: 1px solid #FFF;
}
input{
width: 260px;
background: transparent;
border: 0;
line-height: 3.6em;
box-sizing: border-box;
color: #71747A;
font-family:'Helvetica Neue';
text-shadow: 0 1px 0 #FFF;
}
input:focus{
outline: none;
}
.blockinput{
border-bottom: 1px solid #BDBFC2;
border-top: 1px solid #FFFFFF;
}
.blockinput:first-child{
border-top: 0;
}
.blockinput:last-child{
border-bottom: 0;
}
.blockinput i{
padding-right: 10px;
color: #B1B3B7;
text-shadow: 0 1px 0 #FFF;
}
::-webkit-input-placeholder {
color: #71747A;
font-family:'Helvetica Neue';
text-shadow: 0 1px 0 #FFF;
}
button{
margin-top: 20px;
display: block;
width: 100%;
line-height: 2em;
background: rgba(114,212,202,1);
border-radius: 5px;
border:0;
border-top: 1px solid #B2ECE6;
box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389;
color: #FFFFFF;
font-size: 1.5em;
text-shadow: 0 1px 2px #21756A;
}
button:hover{
background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%);
}
button:active{
box-shadow: inset 0 0 5px #000;
background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%);
}
/* ### TEST PASS GOOGLE IO ### */
hr{
border-top: 1px solid rgba(0,0,0,.5);
border-bottom: 1px solid rgba(255,255,255,.5);
border-left: 0;
border-right: 0;
margin-top: 30px;
}
.io{
padding: 0;
padding-bottom: 10px;
}
.press{
background: #D73D32;
height: 40px;
margin-top: -7px;
border-radius: 5px 5px 0 0;
text-align: left;
line-height: 40px;
padding: 0 10px;
color: #FFF;
text-shadow: none;
}
.press span{
float: right;
font-family: Georgia;
}
.io:before{
position: relative;
top: 15px;
border-top: 2px solid #E78B84;
border-bottom: 1px solid #6C1E19;
}
.ior{
position:relative;
z-index: 1;
}
.io img{
width: 150px;
border-radius: 100%;
border: 4px solid
margin-top: 10px;
border: 4px solid #FFF;
margin: 18px auto 0;
box-shadow: 0 1px 1px 1px #A7A8AB;
}
.io h2{
margin-top: 0;
}
.io p{
font-size: 1.5em;
margin-bottom: 5px;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="ribbon"></div>
<div class="login">
<h1>Let's get started.</h1>
<p>This will be an amazing experience</p>
<form action="login">
<div class="input">
<div class="blockinput">
<i class="icon-envelope-alt"></i><input type="mail" placeholder="Email">
</div>
<div class="blockinput">
<i class="icon-unlock"></i><input type="password" placeholder="Password">
</div>
</div>
<button>Login</button>
</form>
</div>
<hr>
<h2>Another way to use the concept ...</h2>
<div class="ribbon ior"></div>
<div class="login io">
<div class="press">Developer<span>Turkey</span></div>
<a href="https://www.mintik.com/?p=1372"><img src="profile.jpg" alt="Mintik"></a>
<h1>Halis Muhlis</h1>
<p>Javascript Developer</p>
</div>
<br><br>