การสร้างฟอร์มเข้าสู่ระบบเอฟเฟ็กต์กระดาษซ้อน

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน.

แบบฟอร์มเข้าสู่ระบบเป็นส่วนสำคัญของเว็บไซต์แบบไดนามิกใด ๆ พวกเขามีกลไกสำหรับผู้ใช้เว็บไซต์ในการเข้าถึงเนื้อหาที่ จำกัด ในบทช่วยสอนนี้เราจะสำรวจคุณสมบัติ CSS3 มากมายเช่น text-shadow, box-shadow, การไล่ระดับสีเชิงเส้นและการเปลี่ยนภาพเพื่อสร้างรูปแบบการเข้าสู่ระบบที่เรียบง่ายและสง่างามด้วยรูปลักษณ์กระดาษซ้อนกัน.

ภาพด้านบนแสดงตัวอย่างของแบบฟอร์มเข้าสู่ระบบที่เราจะสร้าง พร้อมดำน้ำแล้วหรือยัง มาเริ่มกันเลย!

1. มาร์กอัป HTML พื้นฐาน

มาร์กอัป HTML ที่เราจะใช้นั้นง่ายมากหลังจากการประกาศ Doctype HTML5 เรามี และ </code> แท็ก ภายใน <code><body></code> แท็กเรามี <code><section></code> แท็กที่มีคลาส 'ซ้อนกัน' นี้ <code><section></code> แท็กใช้เพื่อกำหนดความกว้างของกล่องเนื้อหาและจัดแนวให้ตรงกลางของหน้า เราจะใช้ชื่อคลาสของแท็กนี้เพื่อกำหนดเป้าหมายแท็กนี้ด้วย CSS <code><form></code> ติดตามแท็ก <code><section></code> แท็ก แท็กแบบฟอร์มไม่มีค่าที่ถูกต้องสำหรับแอตทริบิวต์ 'การกระทำ' เนื่องจากใช้เพื่อการสาธิตเท่านั้น ภายในฟิลด์แบบฟอร์มจะมีการประกาศสำหรับป้ายกำกับอีเมลและรหัสผ่านและช่องป้อนข้อมูลตามด้วยปุ่มส่ง จุดสำคัญที่ควรทราบที่นี่คือเราได้ใช้ช่องป้อนข้อมูลกับ 'อีเมล' ประเภทหนึ่ง สิ่งนี้มีไว้สำหรับเราโดยการประกาศ HTML5 และลดระดับลงอย่างงดงามต่อฟิลด์ป้อนข้อความปกติในเบราว์เซอร์รุ่นเก่า.</p> <p>นี่คือมาร์กอัพ HTML ทั้งหมด:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>แบบฟอร์มเข้าสู่ระบบที่เรียบง่าย

  เข้าสู่ระบบ
   อีเมล์  
   รหัสผ่าน

     และนี่คือตัวอย่างของสิ่งที่เราได้สร้างขึ้น:
  
 2. การเพิ่มสไตล์พื้นฐาน
 สร้างไฟล์ css ใหม่ที่เรียกว่า master.css และเพิ่มลิงค์ไปยังไฟล์นี้ในไฟล์ HTML หลักของคุณ เราจะเริ่มต้นไฟล์ CSS ด้วยการรีเซ็ตอย่างรวดเร็วเพื่อรับความสม่ำเสมอในเบราว์เซอร์ที่แตกต่างกัน เรามาเพิ่มรูปภาพพื้นหลังที่สวยงามในหน้าของเรา รูปภาพที่ฉันใช้ถูกนำมาจาก SubtlePatterns. เรียกดูเว็บไซต์เพื่อค้นหาภาพพื้นหลังที่เหมาะกับรสนิยมของคุณ เราสามารถเพิ่มภาพพื้นหลังด้วยความช่วยเหลือของการประกาศดังต่อไปนี้ โปรดทราบด้วยว่าฉันกำลังใช้ เปิด Sans แบบอักษรจาก Google Web แบบอักษรสำหรับข้อความเนื้อหา.
  / * -------- ลักษณะพื้นฐาน --------- * / body, html margin: 0; การเติมเต็ม: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") เหลือการทำซ้ำด้านบน แบบอักษร: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; กำไร: อัตโนมัติ 80px; 
 3. เอฟเฟ็กต์ซ้อนกระดาษ
 ตอนนี้เรามีเลย์เอาต์พื้นฐานแล้วเริ่มต้นทำงานให้เริ่มต้นด้วยการออกแบบฟอร์ม เพื่อให้ได้เอฟเฟ็กต์กระดาษแบบซ้อนเราจะใช้ประโยชน์จาก :หลังจาก และ :ก่อน หลอกองค์ประกอบ องค์ประกอบหลอกเหล่านี้ส่วนใหญ่จะใช้สำหรับการเพิ่มเอฟเฟ็กต์ภาพให้กับตัวเลือกใด ๆ. 
  :ก่อน องค์ประกอบหลอกใช้เพื่อเพิ่มเนื้อหาก่อนเนื้อหาของตัวเลือกและ :หลังจาก องค์ประกอบเทียมสำหรับหลังจากเนื้อหาของตัวเลือก. 
 เราจะเริ่มต้นด้วยการให้ส่วนด้วยคลาส 'stacked' ความกว้าง 400px และความสูง 300px นอกจากนี้เราจะให้สีพื้นหลังของกล่องนี้เป็น # f6f6f6 และเส้นขอบหนา 1 พิกเซลพร้อมสี #bbb สิ่งสำคัญที่ควรทราบที่นี่คือการประกาศรัศมีและประกาศเงากล่อง ที่นี่มีการใช้คำนำหน้า "-moz-" และ "-webkit-" ของเบราว์เซอร์เพื่อให้แน่ใจว่าสามารถใช้งานได้กับเบราว์เซอร์ที่ใช้ตุ๊กแกและ webkit. 
 การประกาศรัศมีชายแดนนั้นง่ายมากและใช้เพื่อสร้างมุมโค้งมนโดยมี 3px แสดงถึงความโค้ง ไวยากรณ์สำหรับการประกาศ box-shadow อาจดูซับซ้อน แต่ให้เราแยกย่อยเป็นส่วนย่อย ๆ เพื่อทำความเข้าใจให้ดีขึ้น. 
  / * -------- รัศมีชายแดน --------- * / -webkit-border รัศมี: 3px; -moz-border-radius: 3px; รัศมี - ชายแดน: 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);
 สองศูนย์แรกแสดง x-offset และ y-offset และ 3px หมายถึงการเบลอ ถัดไปคือการประกาศสี ฉันใช้ค่า rgba ที่นี่; rgba ย่อมาจากสีแดงสีเขียวสีน้ำเงินและอัลฟา (ทึบ) ดังนั้นค่า 4 ในวงเล็บแสดงจำนวนแดง, เขียว, น้ำเงินและอัลฟา (ทึบ).
  .ซ้อนกัน พื้นหลัง: # f6f6f6; เส้นขอบ: 1px solid #bbb; ความสูง: 300px; กำไร: อัตโนมัติ 50px; ตำแหน่ง: ญาติ; ความกว้าง: 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; รัศมี - ชายแดน: 3px; 
 ตอนนี้เราได้สร้างกล่อง bounding พื้นฐานสำหรับแบบฟอร์มมาเริ่มกันด้วย :หลังจาก และ :ก่อน หลอกองค์ประกอบ. 
  .เรียงซ้อนกัน: หลัง, .stacked: ก่อน background: # f6f6f6; เส้นขอบ: 1px solid #aaa; ด้านล่าง: -8px; เนื้อหา: "; height: 250px; left: 2px; position: absolute; width: 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; - moz-border-radius: 3px; border-radius: 3px; .stacked: ก่อนหน้า ล่าง: -14px, ซ้าย: 5px; ความกว้าง: 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) กล่อง - เงา: 0 0 15px rgba (0,0,0,0.5);
 รหัสสำหรับ: after และ: ก่อนองค์ประกอบหลอกเกือบจะเหมือนกับว่าของกล่อง bounding ที่กล่าวถึงข้างต้น สิ่งสำคัญที่ควรทราบที่นี่คือองค์ประกอบหลอกเหล่านี้อยู่ในตำแหน่งอย่างแน่นอนด้วยความเคารพต่อกล่องขอบเขต องค์ประกอบหลอกแต่ละชิ้นจะถูกลดระดับลงเรื่อย ๆ ด้วยพิกเซลเพียงไม่กี่พิกเซลเพื่อให้กระดาษมีลักษณะซ้อนกัน.
 4. อินพุตฟิลด์
 ในมาร์กอัพ HTML เราได้เพิ่มคลาสของ 'การป้อนข้อความ' ทั้งในฟิลด์อีเมลและฟิลด์รหัสผ่านเพื่อให้เราสามารถกำหนดเป้าหมายองค์ประกอบเหล่านี้ได้อย่างง่ายดายด้วยการประกาศ CSS ของเรา นี่คือการประกาศ CSS ที่ใช้กับทั้งฟิลด์อินพุต.
  แบบฟอร์ม input.text-input outline: 0; จอแสดงผล: บล็อก; ความกว้าง: 330px; การขยาย: 8px 15px; เส้นขอบ: สีเทาทึบ 1px; ขนาดตัวอักษร: 16px; น้ำหนักตัวอักษร: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; รัศมีเส้นขอบ: 25px; box-shadow: inset 0 2px 8px rgba (0,0,0,0.3); 
 ที่นี่เราใช้ประโยชน์จากการประกาศรัศมีชายแดนและเงากล่อง ในกรณีของฟิลด์ข้อความรัศมีเส้นขอบจะได้รับค่าที่สูงขึ้นเพื่อให้แน่ใจว่ามีความโค้งมากขึ้น ในกรณีของการประกาศ box-shadow มีการใช้คีย์เวิร์ด inset เพื่อระบุว่า shadow จะอยู่ในฟิลด์ text ที่นี่การชดเชยแนวตั้งสำหรับเงาคือ 2px และมีความพร่ามัว 8px สีที่ถูกประกาศโดยใช้รูปแบบ rgba.
 ในการเพิ่มการโต้ตอบกับฟิลด์อินพุตเราจะเปลี่ยนคุณสมบัติ box-shadow สำหรับฟิลด์อินพุตในสถานะ 'โฮเวอร์' การประกาศ box-shadow ใหม่มีศูนย์ x และ y ออฟเซ็ต แต่มีเบลอ 5px โดยสีจะถูกประกาศในรูปแบบ rgba.
 5. ปุ่มส่ง
 ส่วนสุดท้ายของแบบฟอร์มนี้ที่เราต้องกรอกคือปุ่มส่ง เช่นเดียวกับฟิลด์อินพุตเราจะให้รัศมีการส่งปุ่มเป็น 25px โดยใช้คุณสมบัติรัศมีเส้นขอบ เพิ่มคุณสมบัติกล่องเงาที่มีค่าชดเชย y เท่ากับ 1px เพื่อเพิ่มปุ่ม “เงาภายใน” ผล.
  อินพุตแบบฟอร์ม [type = 'submit'] float: right; การขยาย: 10px 20px; จอแสดงผล: บล็อก; เคอร์เซอร์: ตัวชี้; ขนาดตัวอักษร: 16px; น้ำหนักตัวอักษร: 700; สี: #fff; ข้อความเงา: 0 1px 0 # 000; สีพื้นหลัง: # 0074CC เส้นขอบ: 1px solid # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; รัศมีเส้นขอบ: 25px; background-image: -moz-linear-gradient (ด้านบน, # 08C, # 05C); ภาพพื้นหลัง: -ms-linear-gradient (ด้านบน, # 08C, # 05C); background-image: -webkit-linear-gradient (ด้านบน, # 08C, # 05C); ภาพพื้นหลัง: เส้นไล่ระดับสี (บนสุด, # 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); 
 สิ่งสำคัญที่ควรทราบที่นี่คือการประกาศสำหรับการเพิ่มการไล่ระดับสีให้กับปุ่มนี้ การไล่ระดับสี CSS3 เป็นหัวข้อที่ค่อนข้างใหญ่และเราจะทำการขีดข่วนพื้นผิวเท่านั้น สำหรับปุ่มส่งนี้เราจะเพิ่มการไล่ระดับสีเชิงเส้นจาก # 08C เป็น # 05C เช่นเดียวกับคุณสมบัติ CSS3 อื่น ๆ ทั้งหมดที่เราใช้ไปจนถึงตอนนี้เราจะเพิ่มคำนำหน้าผู้ขาย "-moz", "-webkit" และ "-ms" เพื่อให้แน่ใจว่าการไล่ระดับสีทำงานบนเบราว์เซอร์ที่แตกต่างกัน.
 6. การสาธิตและดาวน์โหลด
 แบบฟอร์มการเข้าสู่ระบบของเราเสร็จสมบูรณ์แล้ว ตรวจสอบตัวอย่างเพื่อดูว่าแบบฟอร์มเสร็จสมบูรณ์แล้วมีลักษณะอย่างไร หากคุณหลงทางหรือไม่สามารถติดตามบทแนะนำได้ไม่ต้องกังวลเพียงดาวน์โหลดไฟล์ไปยังเดสก์ท็อปของคุณและคนจรจัดด้วยรหัส CSS ที่มีอยู่เพื่อทำความเข้าใจว่ามันทำงานอย่างไร.
 หวังว่าคุณจะสนุกกับการกวดวิชานี้ อย่าลังเลที่จะทดสอบด้วยคุณสมบัติเหล่านี้และอย่าลืมแบ่งปันความคิดของคุณ.
 การสาธิต
 ดาวน์โหลดไฟล์
 
หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Bharani M สำหรับ Hongkiat.com Bharani เป็นนักออกแบบ / นักพัฒนาจากนิวเดลีประเทศอินเดีย ปัจจุบันเขาทำงานกับ Resumonk.com - ผู้สร้างเรซูเม่ออนไลน์ที่ช่วยให้คุณสร้างเรซูเม่ที่เป็นมืออาชีพและสวยงามได้ในไม่กี่นาที ตรวจสอบโครงการด้านข้างของเขา - Quotescube.com - ปริมาณคำพูดของคุณทุกวัน.