giriş

Marco  Biedermann  tarafından hazırlanmış bir  giriş formu örneği. Form örneği  sadece  tasarımdan ibaret olup  herahngi  bir işlevi  bulunmuyor.  Eklenmiş olan Twitter ve  Facebook butonlarıda formalite  icabı  zaten. Facebook  ve Twitter butonları  için kullanılan iconlar Fonta Awasome  ile eklenmiş. Bunun dışında örnekte  kullanılan herhangi bir resim dosyası bulunumuyor. Tamamen Css3   kullanılarak  hazırlanmış  bir tasarım örneği. Görüntüsü  gayet  güzel  görünüyor  o  yüzden sizlerle paylaşmak istedim.  Dilerseniz sitenizin giriş panelinde  kullanabilirsiniz.

 

Kullanım

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

IE9  üzerinden  düzgün görüntülenebilmesi  için Html5 Shiv kodu :

	<!--[if lt IE 9]>
		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

 Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */

@import url(https://weloveiconfonts.com/api/?family=fontawesome);

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */

@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);

/* ---------- FONTAWESOME ---------- */

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* ---------- GENERAL ---------- */

body {
	background-color: #f4f4f4;
	color: #5a5656;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
}

a { text-decoration: none; }

h1 { font-size: 1em; }

h1, p {
	margin-bottom: 10px;
}

strong {
	font-weight: bold;
}

.uppercase { text-transform: uppercase; }

/* ---------- LOGIN ---------- */

#login {
	margin: 50px auto;
	width: 300px;
}

form fieldset input[type="text"], input[type="password"] {
	background-color: #e5e5e5;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #5a5656;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 14px;
	height: 50px;
	outline: none;
	padding: 0px 10px;
	width: 280px;
	-webkit-appearance:none;
}

form fieldset input[type="submit"] {
	background-color: #008dde;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #f4f4f4;
	cursor: pointer;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	height: 50px;
	text-transform: uppercase;
	width: 300px;
	-webkit-appearance:none;
}

form fieldset a {
	color: #5a5656;
	font-size: 10px;
}

form fieldset a:hover { text-decoration: underline; }

.btn-round {
	background-color: #5a5656;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	color: #f4f4f4;
	display: block;
	font-size: 12px;
	height: 50px;
	line-height: 50px;
	margin: 30px 125px;
	text-align: center;
	text-transform: uppercase;
	width: 50px;
}

.facebook-before {
	background-color: #0064ab;
	border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	color: #f4f4f4;
	display: block;
	float: left;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
}

.facebook {
	background-color: #0079ce;
	border: none;
	border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	color: #f4f4f4;
	cursor: pointer;
	height: 50px;
	text-transform: uppercase;
	width: 250px;
}

.twitter-before {
	background-color: #189bcb;
	border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	color: #f4f4f4;
	display: block;
	float: left;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
}

.twitter {
	background-color: #1bb2e9;
	border: none;
	border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	color: #f4f4f4;
	cursor: pointer;
	height: 50px;
	text-transform: uppercase;
	width: 250px;
}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

	<div id="login">
		<form action="javascript:void(0);" method="get">
			<fieldset>
				<p><input type="text" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Username" -->
				<p><input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Password" -->
				<p><a href="#">Forgot Password?</a></p>
				<p><input type="submit" value="Login"></p>
			</fieldset>
		</form>
		<p><span class="btn-round">or</span></p>
		<p>
			<a class="facebook-before"><span class="fontawesome-facebook"></span></a>
			<button class="facebook">Login Using Facbook</button>
		</p>
		<p>
			<a class="twitter-before"><span class="fontawesome-twitter"></span></a>
			<button class="twitter">Login Using Twitter</button>
		</p>
	</div> <!-- end login -->

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • sahra:

    Güzel ve basit kullanım. Oldukça işime yarayacak....

  • isimsiz:

    Senin sitenden buyurindir.org sitemize köpek gibi link çıkışı yapılmış?...

  • fhghg:

    YouPhpTube scriptini kullanan hazır bi site var mı peki varsa ismi nedir?...

  • Ali:

    Eski butonlarda sorun vardı diye yenilerini ekledim. Acaba sende hala eski buto...

  • HASBA:

    hocam nasıl alıcam demoya indire başıyorum hiç birşey olmuyor...

  • Araç çubuğuna atla