Cara Membuat Form Login Dengan CSS3

Cara Membuat Form Login Dengan CSS3 - Sahabat Coding membuat coding simple sangat membantu dalam duania pemograman ,dan kali ini kita akan membahas mengenai rahasia simple Cara Membuat Form Login Dengan CSS3, buktikan saja sesuai tutorial Cara Membuat Form Login Dengan CSS3, dan pastikan temukan pengalaman tersendiri dalam dunia pemograman

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

pada sehat semua kan ? hehe ,kali ini saya mau berbagi Cara Membuat Form Login Dengan CSS3

form login ini cukup simple namun indah bila di pandang mata heheh ^_^

tidak usah berlama lagi ya, silahkan simak tutorial berikut ini .

1. seperti biasanya, silahkan buat file html bernama index.html dan ketikkan script berikut ini .

 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Form Login With CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body>
<form>
  <h1>Silahkan Login</h1>
  <input type="text" placeholder="Username"/>
  <input type="password" placeholder="Password"/>
  <button>Login</button>
</form>
</body>
</html>

2. buatlah file css bernaya style.css dan ketikkan script berikut .

 * {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font: 15px/1.25 'Alef';
  color: #111111;

}
form {
  margin: 70px auto;
  background: #2a3644;
  width: 347px;
  text-align: center;
  padding: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
 box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
form > h1 {
  color: #f4f4f4;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
  font-weight: 400;
  margin-bottom: 20px;
  
}
input {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  display: block;
  width: 269px;
  padding: 15px;
  margin-bottom: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  outline: none;
}
input:focus {
  background: rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
::-webkit-input-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
:-moz-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
::-moz-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
:-ms-input-placeholder {
  color: rgba(225, 225, 225, 0.4);
}
button {
  position: relative;
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 17px;
  width: 270px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  font-size: 1.2em;
  background: #f26964;
  color: #f4f4f4;
  box-shadow: 0px 3px 0px #ab4b47;
  cursor: pointer;
}
button:active {
  top: 3px;
  box-shadow: none;
}

akhirnya jadi juga, gimana ? simple bukan, hehe
mohon maaf jika tidak ada demonya .
silahkan kalian praktekan ya .
dan Semoga bermanfaat bagi Anda semua

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Dan sekian tutorial Cara Membuat Form Login Dengan CSS3 kali ini

Salam sahabat coding Cara Membuat Form Login Dengan CSS3, semoga dapat membantu untuk mencari solusi permasalahan seputar coding anda,teruslah ikuti simple coding diportal ini.

Tags : CSS

Related : Cara Membuat Form Login Dengan CSS3

Doraemon Pure CSS3السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ apa kabar semua ? ^_^berjumpa lagi dengan saya, admin codingpintar ^_^ semoga sehat semua yah, dan masi ...
Cara Membuat CRUD Dengan PHP MySQL Disini saya akan menjelaskan Cara Membuat CRUD Dengan PHP MySQL, (CRUD) sendiri merupakan singkatan dari Create, Read, Update, Delete, jadi di tutorial kali ini ki ...
Cara Membuat Table Fixed Header Dengan CSSالسَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ apa kabar semuanya ? ^_^semoga sehat semua yah, dan masih semangat untuk belajar coding nya heheh ...
Cara Membuat Menu Bar Dengan CSSالسَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُapa kabar semuanya ? hehe ^_^pada pagi hari ini saya akan membuat tutorial tentang Cara Membuat Menu Bar Dengan CSS3w ...
Cara Membuat 3D Button Dengan CSSالسَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ apa kabar semua ? ^_^masih semangat kan belajar codingnya ? :DTutorial kali ini saya akan memberikan tutorial ...