Membuat Halaman Login Cantik Dengan CSS3

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

Membuat Halaman Login Cantik Dengan CSS3

Posted by kiekie Sunday, 27 December 2015 0 comments

Membuat Halaman Login Dengan CSS3

Kali ini kita akan belajar cara membuat halaman login keren dengan CSS3. Tahapannya masih sama seperti sebelumnya, untuk membuat tabel loginnya menggunakan perintah HTML dan untuk memodifikasi tampilannya menggunakan perintah CSS3. Oke, langsung saja kita mulai ya, percuma kita ketik panjang lebar kalo yang masuk cuma 1%. hehe

Kalau begitu buatkanlah sebuah folder dulu untuk menyimpan file yang akan kta buat nanti. dan ingat usahakan jangan di copy paste ya biar nanti kita tau kemana penggunaan peintah HTML dan CSS3-nya.

Berikut Script HTML-nya

Setelah diketik Source HTML kemudian disimpan dengan nama login.html. Selanjutnya ketik buka halaman baru pada editor kesayangan Anda lalu ketik Source Code CSS-nya.

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);

body{
 margin: 0;
 padding: 0;
 background: #ff6;
 color: #ff6;
 font-family: Arial;
 font-size: 12px;
}

.body{
 position: absolute;
 top: -20px;
 left: -20px;
 right: -40px;
 bottom: -40px;
 width: auto;
 height: auto;
 background-size: cover;
 -webkit-filter: blur(5px);
 z-index: 0;
}

.grad{
 position: absolute;
 top: -20px;
 left: -20px;
 right: -40px;
 bottom: -40px;
 width: auto;
 height: auto;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,23,4,0)), color-stop(100%,rgba(0,0,0,0.65)));
 z-index: 1;
 opacity: 0.7;
}

.header{
 position: absolute;
 top: calc(50% - 35px);
 left: calc(50% - 255px);
 z-index: 2;
}

.header div{
 float: left;
 color: #fff;
 font-family: 'Exo', sans-serif;
 font-size: 35px;
 font-weight: 200;
}

.header div span{
 color: #53e9fa !important;
}

.submit{
width: 260px;
 height: 30px;
 background: transparent #fff;
 border: 1px solid rgba(255,255,255,0.6);
 border-radius: 2px;
 color: #fff;
 font-family: 'Exo', sans-serif;
 font-size: 16px;
 font-weight: 400;
 padding: 4px;
}

.login{
 position: absolute;
 top: calc(50% - 75px);
 left: calc(50% - 50px);
 height: 150px;
 width: 350px;
 padding: 10px;
 z-index: 2;
}

.login input[type=text]{
 width: 250px;
 height: 30px;
 background: transparent;
 border: 1px solid rgba(255,255,255,0.6);
 border-radius: 2px;
 color: #ff7;
 font-family: 'Exo', sans-serif;
 font-size: 16px;
 font-weight: 400;
 padding: 4px;
}

.login input[type=password]{
 width: 250px;
 height: 30px;
 background: transparent;
 border: 1px solid rgba(255,255,255,0.6);
 border-radius: 2px;
 color: #ff7;
 font-family: 'Exo', sans-serif;
 font-size: 16px;
 font-weight: 400;
 padding: 4px;
 margin-top: 10px;
}

.login input[type=button]{
 width: 260px;
 height: 35px;
 background: #ff7;
 border: 1px solid #fff;
 cursor: pointer;
 border-radius: 2px;
 color: #a18d6c;
 font-family: 'Exo', sans-serif;
 font-size: 16px;
 font-weight: 400;
 padding: 6px;
 margin-top: 10px;
}

.login input[type=button]:hover{
 opacity: 0.8;
}

.login input[type=button]:active{
 opacity: 0.6;
}

.login input[type=text]:focus{
 outline: none;
 border: 1px solid rgba(255,255,255,0.9);
}

.login input[type=password]:focus{
 outline: none;
 border: 1px solid rgba(255,255,255,0.9);
}

.login input[type=button]:focus{
 outline: none;
}

::-webkit-input-placeholder{
   color: rgba(255,255,255,0.6);
}

::-moz-input-placeholder{
   color: rgba(255,255,255,0.6);
}

Simpan file tersebut dengan nama style.css.

Setelah selesai membuat file HTML dan CSS nya kini saatnya Anda mencoba dan melihat hasilnya. Langsung saja buka pada browser kesayangan Anda.

Isi Planet

Membuat Halaman Login Cantik Dengan CSS3

Membuat Halaman Login Dengan CSS3

Related Post:

0 komentar:

Post a Comment