Tutorial Pemrograman

Cara Membuat Transparan Login Form dengan HTML dan CSS

Seiring berkembangnya website, kini kita dapat menambahkan bermacam-macam efek di login form. Salah satunya adalah transparan template. Berbekal pemahaman tentang bahasa pemrograman HTML dan CSS3, kamu dapat membuat login form cantik di website.

Tak perlu berlama-lama lagi, yuks kita langsung saja bahas bagaimana caranya membuat login form transparan dengan HTML dan CSS:

1. Sediakan 1 gambar untuk backgroundnya. Gambar harus berada pada folder yang sama dengan file.

2. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.

3. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.

Simpan script code di atas, simpan di folder xampplite → htdocs → buat folder baru (disini saya buat folder baru dengan nama “inwepo”) → saya simpan dengan nama file “transparant-loginform.php”.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/transparant-loginform.php.

5. Tampilannya masih sangat berantakan, untuk mempercantik dan menambahkan efek transparan, kamu bisa menambahkan kode css berikut:

Simpan script code di atas, simpan di folder xampplite → htdocs → buat folder baru (disini saya buat folder baru dengan nama “inwepo”) → saya simpan dengan nama file “style- transparant-loginform.php”.

6. Reload kembali http://localhost/inwepo/transparant-loginform.php.

  • Tampilan awal login form.

  • Tampilan ketika login form di-input.

7. Karena simbol berasal dari:

maka, kamu harus terkoneksi internet. Bila tidak simbol tidak akan muncul.

Catatan:

1. Mungkin ada yang masih bingung kenapa harus disimpan di htdocs? Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.

2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/inwepo/transparant-loginform.php. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. Inwepo menunjuk pada folder inwepo saya di xampplite → htdocs. Dan, transparant-loginform.php adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial tentang ‘Cara Membuat Transparan Login Form dengan HTML dan CSS’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Berlangganan tutorial gratis melalui email

Copyright © 2019 Inwepo - All Rights Reserved.

To Top