Membuat Form Login menggunakan Bootstrap dan SCSS
Pada tutorial ini kita akan membahas cara membuat form login sederhana dengan menggunakan Framework Bootstrap dan SCSS. Namun sebelumnya, saya harap Anda sudah pernah menggunakan bootstrap dalam pembuatan kerangka layout sebuah website. Jika Anda belum menggunakan bootstrap, anda dapat mendownload dan mempelajari dasar penggunaanya disini : GetBootstrap.
Selain Bootstrap, dalam tutorial ini, kita akan menggunakan CSS Pre-processors SASS/SCSS, dan pastikan Anda sudah menginstall NPM (Node Package Manager) dan menggunakan task runner seperti Gulp atau Grunt untuk meng-compile file SASS/SCSS menjadi file (.css).
Untuk mengetahui lebih lanjut tentang SASS/SCSS anda dapat melihat dokumentasinya disini : sass-lang.com.
1. Membuat kerangka file HTML
Langkah pertama yang kita lakukan yaitu membuat kerangka file HTML seperti dibawah ini :
<body> <div class="wrap-form-contact"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="form-contact"> <h3><span>INDOSMART</span> Login Form</h3> <form> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control" id="pwd" placeholder="Password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> <a href="#">Forgot Password?</a> </div> <button type="submit" class="btn btn-default">login</button> </form> </div> </div> </div> </div> </div> </body>
Jika Anda mengetikan kode dengan benar, maka tampilan form sementara seperti gambar dibawah ini :
2. Membuat File SCSS : Variable & Mixin
Sebelum melakukan styling untuk keseluruhan objek HTML, kita akan membuat variable dan mixin terlebih dahulu agar file SCSS kita lebih terstruktur dan mempermudah pekerjaan selanjutnya.
Variable
Pembuatan variable dalam file SCSS bertujuan untuk mempermudah kita dalam me-manage setiap nilai yang sama dalam suatu properti css yang digunakan berulang kali. Pada latihan ini kita akan membuat variable untuk memberikan nilai pada warna yang akan kita gunakan.
$tosca:#3cb4ab; $purple:#5b5476; $pink:#ff3366; $grey:#666666;
Mixin
Selanjutnya, kita akan membuat mixin, dalam SCSS kita dapat menggunakan mixin untuk mengumpulkan beberapa properti yang dapat kita gunakan berulang kali hanya dengan mengisi nilai (value) nya saja tanpa mengetikan properti berulang - ulang.
Seperti fungsi pada CSS3 yang sering digunakan untuk Cross browser compability.
Kali ini kita akan membuat mixin untuk properti box-shadow, border-radius, dan animasi.
@mixin box-shadow($shadow) { box-shadow: $shadow; -ms-box-shadow: $shadow; -moz-box-shadow: $shadow; -o-box-shadow: $shadow; -webkit-box-shadow: $shadow; } @mixin border-rad($radius) { border-radius: $radius; -ms-border-radius: $radius; -moz-border-radius: $radius; -o-border-radius: $radius; -webkit-border-radius: $radius; } @mixin anim-ease($anim){ -webkit-transition:$anim; -moz-transition:$anim; -o-transition:$anim; -ms-transition:$anim; }
3. Mengatur warna background
Selanjutnya kita akan mengatur warna background menggunakan CSS3 linear gradient menggunakan warna yang sudah kita atur pada variable sebelumnya. Saat ini class yang kita atur adalah .wrap-form-contact.
.wrap-form-contact { background: $tosca; background: -webkit-linear-gradient(-45deg, $purple, $tosca); background: -o-linear-gradient(-45deg, $purple, $tosca); background: -moz-linear-gradient(-45deg, $purple, $tosca); background: linear-gradient(-45deg, $purple, $tosca); }
Untuk menggunakan warna pada latihan kali ini, kita tidak perlu memberikan nilai warna menggunakan kode heksa seperi #000 dan lainnya. Namun hanya perlu memanggil nama dari variable warna yang sudah kita buat sebelumnya seperti $tosca, $pink dan lainnya.
4. Mengatur Form
Selanjutnya kita akan melakukan styling pada class .form-contact seperti kode berikut ini :
.form-contact { width:400px; margin:50% auto; padding:60px 50px 60px 50px; background-color:rgba(white,0.25); @include box-shadow(0px 0px 20px rgba(black,0.15)); h3 { margin:0px 0px 40px 0px; font-weight:400; font-size:16px; color:white; span { font-weight:600; font-size:26px; margin-right:10px; } } }
Perintah @include kita gunakan untuk memanggil properti yang sudah kita buat sebelumnya didalam @mixin seperti box-shadow, border-radius dan animation.
5. Mengatur Input text
Setelah itu kita lanjutkan untuk mengatur styling dari input text agar pada kedua sisinya berbentuk bulat dan berubah opacity ketika dalam keadaan aktif
.form-group { input[type=email], input[type=password] { margin-bottom:20px; border:none; color:$grey; @include border-rad(30px); @include box-shadow(none); @include anim-ease(all 0.3s ease); &:focus, &:active { background-color:rgba(white,0.6); border:none; @include box-shadow(none); } } }
6. Mengatur Label dan Button
Pada bagian akhir kita akan melakukan styling untuk bagian label dan button dengan menggunakan kode dibawah ini.
.checkbox { label { color:white; } a { color:white; float:right; } } .btn-default { color:white; font-size:16px; background-color:$pink; padding:6px 40px; margin-top:30px; border:solid $pink 2px; text-transform:uppercase; @include border-rad(30px); @include box-shadow(none); @include anim-ease(all 0.3s ease); &:hover, &:focus, &:active { background-color:transparent; border:solid white 2px; color:white; } }
Untuk melihat hasil dari latihan kali ini, Anda dapat melihat demo nya disini : VIEW DEMO
Terima kasih. Sampai jumpa di tutorial berikutnya ya.
Portal Edukasi seputar digital marketing, web design dan web programming bagi Anda yang ingin memulai dan mengembangkan karir freelancer atau bekerja di startup digital. 100% Gratis!
Dapatkan beragam artikel tutorial, tips menarik dan pengetahuan seputar digital marketing, web design dan web programming langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan Anda!