Membuat Halaman Login Cantik Dengan CSS3

Home » CSS » Tutorial » Membuat Halaman Login Cantik Dengan CSS3

Membuat Halaman Login Cantik Dengan CSS3

Posted by kiekie Thursday, 24 December 2015 0 comments

Cara membuat halaman login dengan CSS3

Kali ini kita akan belajar membuat halaman login menggunaka CSS3. Usahakan perintah HTML dan CSS nya jangan di copy, tapi di ketik. Biar keliatan kalau ada kesalahan. Mari kita mulai dan buka editor kesayangan Anda.

Pertama, terlebih dahulu buat sebuah folder dengan nama terserah Anda.

Kedua, ketik source code berikut pada editor Anda lalu simpan ke dalam folder yang telah dibuat.

Ke tiga, ketik seperti source code yang ada dibawah kemudian simpan dengan nama style.css kedalam folder yang telah Anda buat tadi.

/* CSS Document */
.body{
 position: absolute;
 background-size: cover;
 -webkit-filter: blur(5px);
 z-index: 0;
}

.H1 {
position: absolute;
 top: calc(13% - 70px);
 left: calc(55% - 50px);
 height: 50px;
 width: 300px;
 z-index: 2;
 color: #5379fa !important;
}

#header {
 width: 500px;
 height: 200px;
 -webkit-border-radius:200px 20px;
 border-radius:200px 20px;
 -moz-box-shadow:13px 0px 2px #0bb;
 -webkit-box-shadow:13px 0px 2px #0bb;
 box-shadow:13px 0px 2px #000;
 margin-right: auto;
 margin-bottom: auto;
 margin-left: auto;
 padding-top: 1em;
 padding-right: 1em;
 padding-bottom: 11em;
 padding-left: 4em;
 -moz-border-radius-bottomleft: 50px;
 -moz-border-radius-topright: 50px;
 margin-top: 80px;
 border: 20px solid #0099cc;
 box-shadow: 0px 0px 10px 5px #cccccc;
}

.hea {
 width: 350px;
 height: 8px;
 -webkit-border-radius:150px 20px;
 border-radius:150px 20px;
 -moz-box-shadow:5px 0px 2px #0bb;
 -webkit-box-shadow:5px 0px 2px #0bb;
 box-shadow:13px 0px 2px #000;
 margin-right: auto;
 margin-bottom: auto;
 margin-left: auto;
 padding-top: 5em;
 padding-right: 1em;
 padding-bottom: 1em;
 padding-left: 4em;
 -moz-border-radius-bottomleft: 50px;
 -moz-border-radius-topright: 50px;
 margin-top: 12px;
 border: 5px solid #cccccc;
 box-shadow: 0px 0px 0px 0px #f6f6f6;
}

.hea2 {
 width: 150px;
 height: 35px;
 background: #a36f0d;
 background: -webkit-gradient(linear, left top, left bottom, from(#f5b9f1), to(#a36c0d));
 background: -webkit-linear-gradient(top, #f5b9f1, #a36c0d);
 background: -moz-linear-gradient(top, #f5b9f1, #a36c0d);
 background: -ms-linear-gradient(top, #f5b9f1, #a36c0d);
 background: -o-linear-gradient(top, #f5b9f1, #a36c0d); 
 -webkit-border-radius:150px 20px;
 border-radius:150px 20px;
 -moz-box-shadow:5px 0px 2px #0bb;
 -webkit-box-shadow:5px 0px 2px #0bb;
 box-shadow:13px 0px 2px #000;
 padding-top: 2em;
 padding-right: 1em;
 padding-bottom: 1em;
 padding-left: 2em;
 -moz-border-radius-bottomleft: 20px;
 -moz-border-radius-topright: 20px;
 margin-top: 10px;
 border: 5px solid #0099cc;
 box-shadow: 0px 0px 0px 0px #f6f6f6;
}
.hea2:hover {
 background:#FF0300;
 color: #ccc;
 -moz-box-shadow:0px 0px 4px #000c00;
 -webkit-box-shadow:0px 0px 4px #000c00;
 box-shadow:0px 0px 4px #000c00;
 box-shadow: 0 2px 6px white inset, 0 1px 1px rgba(0, 0, 0, 0.6);
   }
   
   .hea2 a {
    font-family:"Courier New", Courier, mono;
 text-decoration: none;
 vertical-align: middle;
    font-size:38px;
 color: #EEEEee;
}

.hea2 a:hover {
 color: #FFFFCC;
}

Selesai. Semoga tutorial cara membuat halaman login dengan CSS3 ini bisa membantu membuat Anda creative dalam mendesain halaman-halaman web lainnya.

Isi Planet

Membuat Halaman Login Cantik Dengan CSS3

Cara membuat halaman login dengan CSS3

Related Post:

0 komentar:

Post a Comment