Basit bir giriş paneli

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 ---------- */
/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- https://weloveiconfonts.com/ ---------- */

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

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- https://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 -->