Mencipta Borang Masuk Kesan Stacked-paper

Artikel ini adalah sebahagian daripada kami "Siri Tutorial HTML5 / CSS3" - khusus untuk membantu menjadikan anda pereka dan / atau pemaju yang lebih baik. Tekan di sini untuk melihat lebih banyak artikel dari siri yang sama.

Borang masuk adalah bahagian penting dari mana-mana laman web dinamik. Mereka menyediakan mekanisme untuk pengguna laman web mengakses kandungan terhad. Dalam tutorial ini, kami akan meneroka banyak ciri CSS3 seperti bayang-bayang teks, bayang-bayang, gradien linear dan peralihan untuk mencipta borang masuk yang mudah dan elegan dengan paparan kertas yang disusun.

Imej di atas menunjukkan pratonton borang login yang akan kami bina. Bersedia untuk menyelam? Mari kita mulakan!

1. Asas markup HTML

Penanda HTML yang akan kami gunakan sangat mudah, selepas deklarasi Doktor HTML5, kami ada dan </code> tag. Di antara <code><body></code> tag, kami mempunyai <code><section></code> tag dengan kelas 'disusun'. Ini <code><section></code> tag digunakan untuk menentukan lebar kotak kandungan dan untuk menyelaraskannya ke tengah halaman. Kami juga akan menggunakan nama kelas tag ini untuk menargetkan teg ini menggunakan CSS. A <code><form></code> tag berikut <code><section></code> tag. Tag borang tidak mempunyai nilai yang sah untuk atribut 'tindakan', kerana ia hanya digunakan untuk tujuan demonstrasi. Di dalam medan borang adalah pengisytiharan untuk label e-mel dan kata laluan dan medan input, diikuti dengan butang penyerah. Titik penting untuk diperhatikan di sini ialah kami telah menggunakan medan input dengan jenis 'e-mel'. Ini diberikan kepada kami melalui perisytiharan HTML5 dan ia menurunkan anggun ke medan input teks biasa dalam pelayar lama.</p> <p>Inilah markup HTML keseluruhan:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Borang Masuk Mudah

  Log masuk
   E-mel  
   Kata laluan

     Dan inilah pratonton apa yang telah kita buat sejauh ini:
  
 2. Menambah Gaya Asas
 Buat fail css baru yang dipanggil master.css dan tambah pautan ke fail ini dalam fail HTML utama anda. Kami akan memulakan fail CSS kami dengan menetapkan semula pantas untuk mendapatkan keseragaman merentas pelayar yang berbeza. Mari juga tambahkan imej latar belakang yang bagus ke halaman kami. Imej yang telah saya gunakan telah diambil dari SubtlePatterns. Jangan ragu untuk melayari laman web ini untuk mencari imej latar belakang yang sesuai dengan citarasa anda. Kita boleh menambah imej latar belakang dengan bantuan perisytiharan berikut. Juga ambil perhatian bahawa saya menggunakan Open Sans font dari Google Web Font untuk teks badan.
  / * -------- Gaya Asas --------- * / badan, html margin: 0; padding: 0;  badan latar belakang: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") berulang kali teratas; fon: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margin: 80px auto; 
 3. Kesan stacked Paper
 Sekarang kita mempunyai susun atur asas dan berjalan, mari bermula dengan merancang bentuk. Untuk mendapatkan kesan kertas yang disusun, kami akan menggunakannya : selepas dan : sebelum unsur-unsur pseudo. Unsur-unsur pseudo ini kebanyakannya digunakan untuk menambahkan kesan visual kepada mana-mana pemilih. 
 The : sebelum elemen pseudo digunakan untuk menambah kandungan sebelum kandungan pemilih dan : selepas pseudo-elemen untuk selepas kandungan pemilih. 
 Kami akan mulakan dengan memberi bahagian, dengan kelas 'disusun', lebar 400px dan ketinggian 300px. Selanjutnya, kami akan memberikan kotak ini warna latar belakang # f6f6f6 dan sempadan 1-pixel-tebal dengan warna #bbb. Perkara-perkara penting yang perlu diperhatikan di sini adalah deklarasi radius sempadan dan pengisytiharan kotak-bayangan. Di sini, awalan pelayar "-moz-" dan "-webkit-" telah digunakan untuk memastikan bahawa ini berfungsi dalam pelayar berasaskan web gecko dan webkit. 
 Pengisytiharan radius sempadan sangat mudah dan digunakan untuk membuat sudut bulat, dengan 3px mewakili kelengkungan. Sintaks untuk pengisytiharan kotak-bayangan mungkin kelihatan rumit, tetapi marilah kita memecahkannya ke dalam bahagian-bahagian yang lebih kecil untuk memahami dengan lebih baik. 
  / * -------- Radius Sempadan --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; jejari sempadan: 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 sifar pertama menunjukkan x-offset dan y-offset dan 3px menandakan kabur. Seterusnya adalah perisytiharan warna. Saya telah menggunakan nilai rgba di sini; rgba bermaksud biru hijau dan alpha merah (opacity). Jadi 4 nilai di dalam kurungan menunjukkan jumlah merah, hijau, biru dan alfa (kelegapan).
  .disusun latar belakang: # f6f6f6; sempadan: 1px pepejal #bbb; ketinggian: 300px; margin: 50px auto; kedudukan: 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; jejari sempadan: 3px; 
 Sekarang kita telah membuat kotak pengikat asas untuk borang, mari kita mulakan dengan : selepas dan : sebelum unsur-unsur pseudo. 
  .disusun: selepas, .stacked: sebelum latar belakang: # f6f6f6; border: 1px solid #aaa; bawah: -8px; kandungan: ", tinggi: 250px; kiri: 2px; kedudukan: mutlak; lebar: 394px; z-index: -10; -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; - jejari moz-border: 3px; radius sempadan: 3px; .stacked: sebelum bawah: -14px; kiri: 5px; lebar: 388px; -webkit-border radius: 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); box -shadow: 0 0 15px rgba (0,0,0,0.5);
 Kod untuk: selepas dan: sebelum elemen-elemen pseudo hampir sama dengan kotak kotak yang dibincangkan di atas. Satu-satunya perkara yang penting untuk diperhatikan di sini adalah bahawa unsur-unsur pseudo ini diletakkan sama sekali berkenaan dengan kotak sempadan. Setiap elemen pseudo semakin diturunkan oleh beberapa piksel untuk memberikan paparan stacked paper.
 4. Bidang Input
 Dalam markup HTML, kami telah menambahkan satu kelas 'input teks' ke kedua bidang e-mel dan bidang kata laluan untuk membolehkan kami dengan mudah menyasarkan unsur-unsur ini dengan pengumuman CSS kami. Inilah perisytiharan CSS yang digunakan untuk kedua-dua medan input.
  masukkan input.text-input outline: 0; paparan: blok; lebar: 330px; padding: 8px 15px; sempadan: 1px kelabu pepejal; saiz fon: 16px; font-weight: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; jejari jejari: 25px; box-shadow: inset 0 2px 8px rgba (0,0,0,0.3); 
 Di sini, sekali lagi kami telah menggunakan perbatasan jejari dan kotak-bayangan pengisytiharan. Dalam bidang teks, radius sempadan diberi nilai yang lebih tinggi untuk memastikan kelengkungan lebih. Dalam kes pengisytiharan kotak-bayangan, kata kunci kata kunci telah digunakan untuk menentukan bahawa bayangan akan berada di dalam medan teks. Di sini, offset menegak untuk bayangan adalah 2px dan ia mempunyai kabur 8px, warna yang diisytiharkan menggunakan format rgba.
 Untuk menambahkan beberapa interaktiviti ke medan input, kami akan menukar harta kotak-bayangan untuk medan input pada keadaan 'hover'. Pengisytiharan kotak-bayangan baru mempunyai sifar x dan y offset tetapi mempunyai 5px kabur, dengan warna yang diisytiharkan dalam format rgba.
 5. Hantar Butang
 Bahagian akhir borang ini yang perlu kita selesaikan ialah butang penyerah. Sama seperti medan input, kami akan memberikan butang penyerahan jejari 25px menggunakan harta radius sempadan. Harta kotak-bayangan dengan y-offset 1px juga telah ditambah untuk memberikan butang an “bayang dalaman” kesan.
  masukkan input [type = 'submit'] float: right; padding: 10px 20px; paparan: blok; kursor: penunjuk; saiz fon: 16px; font-weight: 700; warna: #fff; teks-bayangan: 0 1px 0 # 000; warna latar belakang: # 0074CC; sempadan: 1px pepejal # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; jejari jejari: 25px; background-image: -moz-linear-gradient (atas, # 08C, # 05C); latar belakang-imej: -ms-linear-kecerunan (atas, # 08C, # 05C); background-image: -webkit-linear-gradient (atas, # 08C, # 05C); latar belakang-imej: linier-kecerunan (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); 
 Perkara penting yang perlu diperhatikan di sini adalah pengisytiharan untuk menambah kecerunan pada butang ini. Gradien CSS3 adalah topik yang agak besar dan kami hanya akan menggaru permukaan. Untuk butang submit ini, kami akan menambahkan kecerunan linear dari # 08C ke # 05C. Seperti semua ciri CSS3 yang telah kami gunakan setakat ini, kami akan menambah awalan vendor "-moz," -webkit, dan "-ms" untuk memastikan bahawa kecerunan berfungsi merentas pelayar yang berbeza.
 6. Demo dan Muat Turun
 Borang login kami kini selesai. Lihat demo untuk melihat bagaimana borang yang lengkap kelihatan. Sekiranya anda hilang pada bila-bila masa atau tidak dapat mengikuti tutorial, jangan risau, hanya muat turun fail ke desktop anda dan tinker dengan kod CSS sedia ada untuk memahami bagaimana ia berfungsi.
 Harap anda menikmati tutorial ini. Jangan ragu untuk bereksperimen dengan ciri-ciri ini dan jangan lupa berkongsi pendapat anda.
 Demo
 Muat turun Fail
 
Nota editor: Jawatan ini ditulis oleh Bharani M untuk Hongkiat.com. Bharani adalah pereka / pemaju dari New Delhi, India. Beliau kini bekerja di Resumonk.com - sebuah pembina resume dalam talian yang membantu anda membuat resume profesional dan cantik dalam beberapa minit. Juga lihat projek sampingannya - Quotescube.com - dos sebut harga harian anda.