Tek çerçeveye giriş, üye ol, şifremi unuttum ekleme

By

gir

jQuery ve Css3  kullanılarak hazırlanmış fazla yer kaplamayan bir  form örneği.  Form örneğimiz giriş formu, üyelik formu ve şifremi unuttum bölümlerinden oluşuyor. Biraz basit olarak hazırlanmış olabilir  ve tam kullanıma hazırbir form örneğide değildir. Sizin yapmanız gereken websitenizdeki form alanlarını bu form örneği ile birleştirmek.

Tab dediğimiz sekmelerden oluştuğu için her üç form  alanıda aynı çerçevede  bulunuyor ve bu sayede  websitenizde fazla yer kaplamıyor. Ayrıca  sekmeler  arası geçiş esnasında websayfanız tekrar tekrar yenilenmiyor. Aynı tarayıcı penceresinden bütün işlemleri yapmanızı sağlıyor.

Demonun üst kısmında bulunan kırmızı alan içinde bulunan  linklere tıkladığınızda sekmeler arasında gezinti yapabiliyorsunuz.  Sekmelere arası geçiş esnasında jQuery fadein efekti devreye girerek bir önceki sekmenin solup kaybolmasını sağlıyor ve aynı şekilde tıklamış olduğunuz sekmede netleşip ekrandaki yerini alıyor.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);

body {
  color: white;
  font-family: 'Roboto';
}
.flat-form {
  background: #34495e;  /*tablebg e74c3c #34495e  #88565b ed7271*/
  margin: 100px auto;
  width: 390px;
  height: 340px;
  position: relative;
  font-family: 'Roboto';
}
.tabs {
  background: #ed7271;  /*topbar #c0392b #88565b*/
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px;
}
.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
.tabs a {
  background: #ed7271;  /*topbar c0392b  #88565b */
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight:900;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/

}
.tabs li:last-child a {
  border-right: none;
  width: 174px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
.tabs a.active {
  background: #ed7271;  /*topbar e74c3c  */
  border-right: none;
  -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.form-action {
  padding: 0 20px;
  position: relative;
}

.form-action h1 {
  font-size: 42px;
  padding-bottom: 10px;
}
.form-action p {
  font-size: 12px;
  padding-bottom: 10px;
  line-height: 25px;
}
form {
  padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
	font-family: 'Roboto';
	font-weight: 16px;
	font-size: 16px;
}

form input[type=text],
form input[type=password] {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #ffffff; /* #44454a  */
  border: none;
  color: #e74c3c;   /* e74c3c e9e9e9  */
  outline: none;
}

.dark-box {
  background: #5e0400;
  box-shadow: 1px 3px 3px #3d0100 inset;
  height: 40px;
  width: 50px;
}
.form-action .dark-box.bottom {
  position: absolute;
  right: 0;
  bottom: -24px;
}
.tabs + .dark-box.top {
  position: absolute;
  right: 0;
  top: 0px;
}
.show {
  display: block;
}
.hide {
  display: none;
}

.button {
    border: none;
    display: block;
    background: #136899;
    height: 40px;
    width: 80px;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    /*box-shadow: 0px 3px 1px #2075aa;*/
  	-webkit-transition: all 0.15s linear;
	  -moz-transition: all 0.15s linear;
	  transition: all 0.15s linear;
}

.button:hover {
  background: #1e75aa;
  /*box-shadow: 0 3px 1px #237bb2;*/
}

.button:active {
  background: #136899;
  /*box-shadow: 0 3px 1px #0f608c;*/
}

::-webkit-input-placeholder {
  color: #e74c3c;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #e74c3c;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #e74c3c;
}
:-ms-input-placeholder {
  color: #e74c3c;
}
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

        

Login on webapp

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius bladit sit amet non

Register

You should totally sign up for our super awesome service. It's what all the cool kids are doing nowadays.

Reset Password

To reset your password enter your email and your birthday and we'll send you a link to reset your password.

Js dosya adresi :

JavaScript :



Leave a Comment

Your email address will not be published.

You may also like

Trend