Membuat Formulir Efek Masuk Stacked-paper

Artikel ini adalah bagian dari kami "Seri Tutorial HTML5 / CSS3" - didedikasikan untuk membantu Anda menjadi desainer dan / atau pengembang yang lebih baik. Klik disini untuk melihat lebih banyak artikel dari seri yang sama.

Formulir masuk adalah bagian penting dari situs web dinamis apa pun. Mereka menyediakan mekanisme bagi pengguna situs web untuk mengakses konten yang dibatasi. Dalam tutorial ini, kita akan mengeksplorasi banyak fitur CSS3 seperti text-shadow, box-shadow, gradien linier dan transisi untuk membuat formulir login yang sederhana dan elegan dengan tampilan kertas yang ditumpuk.

Gambar di atas menunjukkan pratinjau formulir masuk yang akan kami buat. Siap menyelam? Mari kita mulai!

1. Markup HTML dasar

Markup HTML yang akan kita gunakan sangat sederhana, setelah deklarasi HTML5 Doctype, kita memiliki dan </code> tag. Dalam <code><body></code> tag, kami memiliki <code><section></code> tag dengan kelas 'ditumpuk'. Ini <code><section></code> tag digunakan untuk menentukan lebar kotak konten dan untuk menyelaraskannya ke tengah halaman. Kami juga akan menggunakan nama kelas tag ini untuk menargetkan tag ini menggunakan CSS. SEBUAH <code><form></code> tag mengikuti <code><section></code> menandai. Tag formulir tidak memiliki nilai yang valid untuk atribut 'tindakan', karena hanya digunakan untuk tujuan demonstrasi. Di dalam bidang formulir adalah deklarasi untuk label email dan kata sandi dan bidang input, diikuti oleh tombol kirim. Poin penting yang perlu diperhatikan di sini adalah bahwa kami telah menggunakan bidang input dengan jenis 'email'. Ini diberikan kepada kami oleh deklarasi HTML5 dan menurunkan anggun ke bidang input teks biasa di browser lama.</p> <p>Inilah keseluruhan markup HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Formulir Login Sederhana

  Masuk
   E-mail  
   Kata sandi

     Dan inilah pratinjau dari apa yang telah kami buat sejauh ini:
  
 2. Menambahkan Gaya Dasar
 Buat file css baru bernama master.css dan tambahkan tautan ke file ini di file HTML utama Anda. Kami akan memulai file CSS kami dengan reset cepat untuk mendapatkan keseragaman di berbagai browser. Mari kita juga menambahkan gambar latar belakang yang bagus ke halaman kami. Gambar yang saya gunakan telah diambil Pola Halus. Silakan menjelajahi situs untuk menemukan gambar latar belakang yang sesuai dengan selera Anda. Kita dapat menambahkan gambar latar belakang dengan bantuan deklarasi berikut. Perhatikan juga bahwa saya menggunakan Buka Sans font dari Google Web Font untuk teks isi.
  / * -------- Gaya Dasar --------- * / tubuh, html margin: 0; bantalan: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") kiri atas; font: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margin: 80px otomatis; 
 3. Efek Stacked-Paper
 Sekarang kita memiliki tata letak dasar dan berjalan, mari kita mulai dengan merancang formulir. Untuk mendapatkan efek tumpukan kertas, kami akan menggunakan :setelah dan :sebelum elemen semu. Elemen pseudo ini sebagian besar digunakan untuk menambahkan efek visual ke pemilih mana pun. 
 Itu :sebelum pseudo-element digunakan untuk menambahkan konten sebelum konten pemilih dan :setelah pseudo-element untuk setelah konten pemilih. 
 Kita akan mulai dengan memberikan bagian, dengan kelas 'ditumpuk', lebar 400px dan tinggi 300px. Selanjutnya, kami akan memberikan kotak ini warna latar belakang # f6f6f6 dan perbatasan 1-pixel-tebal dengan warna #bbb. Hal-hal penting yang perlu diperhatikan di sini adalah deklarasi radius-perbatasan dan deklarasi box-shadow. Di sini, awalan peramban "-moz-" dan "-webkit-" telah digunakan untuk memastikan bahwa ini berfungsi di peramban berbasis tokek dan webkit. 
 Deklarasi radius batas sangat sederhana dan digunakan untuk membuat sudut bulat, dengan 3px mewakili lengkungan. Sintaks untuk deklarasi box-shadow mungkin terlihat rumit, tetapi mari kita memecahnya menjadi potongan-potongan kecil untuk memahaminya dengan lebih baik. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; batas-jari-jari: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 Dua nol pertama menunjukkan x-offset dan y-offset dan 3px menunjukkan blur. Berikutnya adalah deklarasi warna. Saya telah menggunakan nilai rgba di sini; rgba adalah singkatan dari red green blue dan alpha (opacity). Jadi 4 nilai di dalam tanda kurung menunjukkan jumlah merah, hijau, biru dan alfa (opacity).
  .ditumpuk background: # f6f6f6; perbatasan: 1px solid #bbb; tinggi: 300px; margin: 50px otomatis; posisi: relatif; lebar: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; batas-jari-jari: 3px; 
 Sekarang kita telah membuat kotak pembatas dasar untuk formulir, mari kita mulai dengan :setelah dan :sebelum elemen semu. 
  .ditumpuk: setelah, .stacked: before background: # f6f6f6; perbatasan: 1px solid #aaa; bawah: -8px; isi: "; tinggi: 250px; kiri: 2px; posisi: absolut; lebar: 394px; z-indeks: -10; -webkit-kotak-bayangan: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px; .stacked: sebelum bawah: -14px; kiri: 5px; lebar: 388px; -webkit-radius-perbatasan: 3px; -moz-border-radius: 3px ; border-radius: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0.5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5); kotak -shadow: 0 0 15px rgba (0,0,0,0.5);
 Kode untuk: after dan: before pseudo-elements hampir persis mirip dengan kotak pembatas yang dibahas di atas. Satu-satunya hal penting yang perlu diperhatikan di sini adalah bahwa elemen pseudo ini diposisikan secara absolut sehubungan dengan kotak pembatas. Setiap elemen pseudo secara progresif diturunkan beberapa piksel untuk memberikan tampilan kertas-ditumpuk.
 4. Bidang Masukan
 Di markup HTML, kami telah menambahkan kelas 'input teks' ke bidang email dan bidang kata sandi untuk memungkinkan kami menargetkan elemen-elemen ini dengan mudah dengan deklarasi CSS kami. Berikut deklarasi CSS yang diterapkan pada kedua bidang input.
  form input.text-input outline: 0; display: blok; lebar: 330px; padding: 8px 15px; perbatasan: 1px abu-abu solid; ukuran font: 16px; font-weight: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; batas-radius: 25px; box-shadow: inset 0 2px 8px rgba (0,0,0,0,3); 
 Di sini, sekali lagi kita telah menggunakan deklarasi batas-radius dan kotak-bayangan. Dalam kasus bidang teks, radius batas diberi nilai yang lebih tinggi untuk memastikan lebih banyak kelengkungan. Dalam hal deklarasi bayangan kotak, inset kata kunci telah digunakan untuk menentukan bahwa bayangan akan berada di dalam bidang teks. Di sini, offset vertikal untuk bayangan adalah 2px dan memiliki kekaburan 8px, warna dinyatakan menggunakan format rgba.
 Untuk menambahkan beberapa interaktivitas ke bidang input, kami akan mengubah properti bayangan kotak untuk bidang input pada status 'hover'. Deklarasi box-shadow baru memiliki nol dan offset x tetapi memiliki blur 5px, dengan warna yang dinyatakan dalam format rgba.
 5. Tombol Kirim
 Bagian terakhir dari formulir ini yang harus kita selesaikan adalah tombol kirim. Serupa dengan bidang input, kami akan memberikan tombol kirim radius 25px menggunakan properti border-radius. Properti box-shadow dengan y-offset 1px juga telah ditambahkan untuk memberikan tombol “bayangan dalam” efek.
  form input [type = 'submit'] float: right; padding: 10px 20px; display: blok; kursor: pointer; ukuran font: 16px; font-berat: 700; warna: #fff; text-shadow: 0 1px 0 # 000; warna latar: # 0074CC; perbatasan: 1px solid # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; batas-radius: 25px; background-image: -moz-linear-gradient (atas, # 08C, # 05C); background-image: -ms-linear-gradient (atas, # 08C, # 05C); background-image: -webkit-linear-gradient (atas, # 08C, # 05C); background-image: linear-gradient (atas, # 08C, # 05C); -webkit-box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); 
 Hal penting yang perlu diperhatikan di sini adalah deklarasi untuk menambahkan gradien ke tombol ini. Gradien CSS3 adalah topik yang cukup besar dan kami hanya akan menggaruk permukaan. Untuk tombol kirim ini, kami akan menambahkan gradien linier dari # 08C ke # 05C. Seperti semua properti CSS3 lain yang telah kami gunakan sejauh ini, kami akan menambahkan "-moz", "-webkit", dan "-ms" awalan vendor untuk memastikan bahwa gradien berfungsi di berbagai browser yang berbeda.
 6. Demo dan Unduh
 Formulir login kami sekarang lengkap. Lihat demo untuk melihat bagaimana formulir yang sudah diisi terlihat. Jika Anda tersesat pada titik mana pun atau tidak bisa melanjutkan dengan tutorial, jangan khawatir, cukup unduh file ke desktop Anda dan mengotak-atik kode CSS yang ada untuk memahami cara kerjanya.
 Semoga Anda menikmati tutorial ini. Jangan ragu untuk bereksperimen dengan fitur-fitur ini dan jangan lupa untuk membagikan pemikiran Anda.
 Demo
 Unduh File
 
Catatan Editor: Posting ini ditulis oleh Bharani M untuk Hongkiat.com. Bharani adalah seorang desainer / pengembang dari New Delhi, India. Dia saat ini bekerja di Resumonk.com - pembuat resume online yang membantu Anda membuat resume profesional dan cantik dalam hitungan menit. Lihat juga proyek sampingannya - Quotescube.com - dosis kutipan harian Anda.