#main width: 400px; ความสูง: 50px; พื้นหลัง: # f2f2f2; การขยาย: 6px 10px; เส้นขอบ: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), ภาพประกอบ 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;  

ส่วนสำคัญของรหัสที่นี่คือ border-radius ประกาศและ กล่องเงา การประกาศ สำหรับการสร้างมุมโค้งมนเราได้ใช้การประกาศขอบเขตของรัศมี CSS3, "-moz-" และ "-webkit-" คำนำหน้าเบราว์เซอร์ถูกนำมาใช้เพื่อให้แน่ใจว่าการทำงานในเบราว์เซอร์ที่ใช้ตุ๊กแกและ webkit การประกาศเงาของกล่องอาจดูสับสนเล็กน้อย แต่จริงๆแล้วมันง่ายมาก.

 box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 

คำอธิบาย: ที่นี่ตัวแทรกคำหลักระบุว่าเงาจะอยู่ในกล่องหรือไม่ สองศูนย์แรกแสดง x-offset และ y-offset และ 3px หมายถึงการเบลอ ถัดไปคือการประกาศสี ฉันใช้ค่า rgba ที่นี่; rgba ย่อมาจากสีแดงสีเขียวสีน้ำเงินและอัลฟา (ทึบ) ดังนั้นค่า 4 ในวงเล็บแสดงจำนวนแดง, เขียว, น้ำเงินและอัลฟา (ทึบ) คุณจะสังเกตเห็นว่ามีการประกาศเงา 5 ชุดด้วยกัน สามารถทำได้โดยคั่นด้วยเครื่องหมายจุลภาค สองเงาแรกกำหนดเอฟเฟกต์สีขาว "ด้านใน" และการประกาศถัดไปทำให้กล่องมีลักษณะทึบ / เป็นก้อน.

เล่นกับค่าเหล่านี้เพื่อทำความเข้าใจว่ามันทำงานอย่างไร.

ดูตัวอย่าง

3. จัดแต่งทรงผมฟิลด์อินพุต

ตอนนี้กล่องเสร็จสมบูรณ์ให้ย้ายเพื่อใส่สไตล์ฟิลด์อินพุต.

 อินพุต [type = "text"] float: left; ความกว้าง: 230px; การขยาย: 15px 5px 5px 5px; margin-top: 5px; ระยะขอบซ้าย: 3px; เส้นขอบ: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;  

สไตล์ที่ประกาศสำหรับฟิลด์อินพุตนั้นค่อนข้างคล้ายคลึงกับสไตล์กล่องใหญ่ #หลัก. เราใช้รัศมีเส้นขอบเดียวกัน (5px) อีกครั้งเงาของกล่องหลายชิ้นถูกนำมารวมกัน.

 box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; 

คำอธิบาย: คุณจะสังเกตเห็นว่าในเวลานี้เงาเบลอนั้นถูกเก็บไว้ที่ 0 เพื่อให้ได้เงาที่คมชัดและใช้การชดเชยแนวตั้ง 5px ในการประกาศอย่างต่อเนื่องความพร่ามัวจะถูกเก็บไว้ที่ 0px แต่สีและค่าชดเชย y ได้เปลี่ยนไป ลองเล่นกับค่าเหล่านี้อีกครั้งเพื่อให้ได้ผลลัพธ์ที่แตกต่างกัน.

ดูตัวอย่าง

4. จัดแต่งทรงผมปุ่มส่ง

ลองจัดสไตล์ปุ่มค้นหา.

 อินพุต [type = "submit"]. solid float: left; เคอร์เซอร์: ตัวชี้; ความกว้าง: 130px; การขยาย: 8px 6px; ระยะขอบซ้าย: 20px; สีพื้นหลัง: # f8b838; สี: rgba (134, 79, 11, 0.8); การแปลงข้อความ: ตัวพิมพ์ใหญ่; น้ำหนักตัวอักษร: ตัวหนา; เส้นขอบ: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px; ข้อความเงา: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), ภาพประกอบ 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # CCC; -webkit-transition: พื้นหลัง 0.2s ใช้งานง่าย;  

นอกเหนือจากสีปุ่มค้นหามีลักษณะเหมือนกับกล่องด้านนอกเป็นส่วนใหญ่ ปุ่มขอบรัศมีและเงากล่องที่คล้ายกันนี้ถูกใช้บนปุ่ม คุณสมบัติใหม่ที่แนะนำคือ ข้อความเงา.

 ข้อความเงา: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); 

คำอธิบาย: ใน ข้อความเงา การประกาศค่าตัวเลขสามค่าแรกคือ x-offset, y-offset และ blur ตามลำดับ ค่า rgba ระบุสีเงา ในชุดการประกาศถัดไป (คั่นด้วยเครื่องหมายจุลภาค) y-offset จะได้รับค่า -1 สิ่งนี้ทำเพื่อให้ข้อความและ “เงาภายใน” ผล สถานะโฮเวอร์ / โฟกัสของปุ่มส่งมีค่าแตกต่างกันของสีพื้นหลังและเงา.

ดูตัวอย่าง

ปุ่ม "ใช้งานอยู่" สำหรับสถานะ

สถานะการใช้งานของปุ่มมีการเปลี่ยนแปลงอีกเล็กน้อย ในที่นี้ฉันได้ให้ตำแหน่งของปุ่มสัมบูรณ์และค่า 'สูงสุด' ที่ 5px สิ่งนี้ทำเพื่อให้ดูเป็นธรรมชาติมากขึ้นเช่นรู้สึกว่าปุ่มกดลงจริงโดย 5 พิกเซล การเปลี่ยนแปลงอื่น ๆ ของสถานะการใช้งานคือสีพื้นหลังและเงา สังเกตว่าฉันได้ลดค่าชดเชย y ของเงาเพื่อให้ดู 'กดลง' นี่คือรหัสสำหรับสถานะใช้งานของปุ่มส่ง:

 อินพุต [type = "submit"]. solid: active background: # f6a000; ตำแหน่ง: ญาติ; ด้านบน: 5px; เส้นขอบ: 1px solid # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), ภาพประกอบ 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # CCC;  

รหัสที่สมบูรณ์ (CSS)

สิ่งนี้ทำให้ช่องค้นหาของเราเสร็จสมบูรณ์ เราได้ใช้คุณสมบัติใหม่ ๆ ของ CSS3 มาบ้างแล้ว นี่คือ CSS และ HTML ที่สมบูรณ์ของช่องค้นหานี้.

 #main width: 400px; ความสูง: 50px; พื้นหลัง: # f2f2f2; การขยาย: 6px 10px; เส้นขอบ: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), ภาพประกอบ 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;  input [type = "text"] float: left; ความกว้าง: 230px; การขยาย: 15px 5px 5px 5px; margin-top: 5px; ระยะขอบซ้าย: 3px; เส้นขอบ: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;  input [type = "submit"]. solid float: left; เคอร์เซอร์: ตัวชี้; ความกว้าง: 130px; การขยาย: 8px 6px; ระยะขอบซ้าย: 20px; สีพื้นหลัง: # f8b838; สี: rgba (134, 79, 11, 0.8); การแปลงข้อความ: ตัวพิมพ์ใหญ่; น้ำหนักตัวอักษร: ตัวหนา; เส้นขอบ: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px; ข้อความเงา: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), ภาพประกอบ 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # CCC; -webkit-transition: พื้นหลัง 0.2s ใช้งานง่าย;  input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), ภาพประกอบ 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # CCC;  input [type = "submit"]. solid: active background: # f6a000; ตำแหน่ง: ญาติ; ด้านบน: 5px; เส้นขอบ: 1px solid # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), ภาพประกอบ 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # CCC;  

หวังว่าคุณจะสนุกกับการกวดวิชานี้ อย่าลังเลที่จะทดสอบด้วยคุณสมบัติเหล่านี้และอย่าลืมแบ่งปันความคิดของคุณ.

หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Bharani M สำหรับ Hongkiat.com Bharani เป็นนักออกแบบ / นักพัฒนาจากนิวเดลีประเทศอินเดีย.