การสอน CSS3 สร้างปุ่มเปิด / ปิดที่ทันสมัย
การใช้ปุ่มคือวิธีที่ต้องการในการโต้ตอบกับสิ่งของอิเล็กทรอนิกส์ เช่นวิทยุโทรทัศน์เครื่องเล่นเพลงและแม้แต่สมาร์ทโฟนที่มีคุณสมบัติคำสั่งเสียงยังคงต้องการปุ่มทางกายภาพอย่างน้อยหนึ่งหรือสองปุ่ม.
นอกจากนี้ในยุคดิจิตอลนี้ ปุ่ม มีการพัฒนาในรูปแบบดิจิตอลเช่นกันซึ่งทำให้โต้ตอบได้แบบไดนามิกและจริงง่ายกว่าเมื่อเปรียบเทียบกับปุ่มทางกายภาพ.
ดังนั้นในครั้งนี้เราจะสร้างปุ่มแบบโต้ตอบและโต้ตอบซึ่งขึ้นอยู่กับการออกแบบที่ยอดเยี่ยมนี้ที่ Dribbble โดยใช้ CSS เท่านั้น.
เรามาเริ่มกันเลยดีกว่า.
HTML
เราจะเริ่มปิดปุ่มโดยวางมาร์กอัพต่อไปนี้ในเอกสาร HTML ของเรา มันง่ายจริงๆปุ่มจะยึดตามแท็กสมอเรายังมี ระยะ ถัดจากมันเพื่อสร้างไฟแสดงสถานะจากนั้นจะถูกรวมเข้าด้วยกันภายใน HTML5 มาตรา แท็ก.
& # xF011;
นี่คือลักษณะที่ปุ่มของเราเริ่มแรก.
การออกแบบพื้นฐาน
ในส่วนนี้เราจะเริ่มทำงานกับ รูปแบบ.
ก่อนอื่นเราจะใช้พื้นหลังสีดำนี้จาก Subtle Pattern บนเอกสารของร่างกายและจัดกึ่งกลาง มาตรา. จากนั้นเราจะลบจุดด้วย เค้าโครง เมื่อ : โฟกัส และ :คล่องแคล่ว ลิงค์.
body background: url ('images / micro_carbon.png'); ส่วน margin: 150px auto 0; ความกว้าง: 75px; ความสูง: 95px; ตำแหน่ง: ญาติ; จัดข้อความ: ศูนย์; : active,: focus outline: 0; ใช้แบบอักษรที่กำหนดเอง
สำหรับไอคอนของปุ่มเราจะใช้แบบอักษรที่กำหนดเองจาก Font Awesome แทนภาพ ด้วยวิธีนี้ไอคอนจะสามารถจัดสไตล์และปรับขนาดได้อย่างง่ายดายผ่านสไตล์ชีท.
ดาวน์โหลดฟอนต์จัดเก็บไฟล์ฟอนต์ (eot, woff, ttf และ svg) ใน แบบอักษร โฟลเดอร์แล้ววางรหัสต่อไปนี้บนสไตล์ชีทของคุณเพื่อกำหนดตระกูลฟอนต์ใหม่.
@ font-face font-family: "FontAwesome"; src: url ("แบบอักษร / fontawesome-webfont.eot"); src: url ("แบบอักษร / fontawesome-webfont.eot? #iefix") รูปแบบ ('eot'), url ("แบบอักษร / fontawesome-webfont.woff") รูปแบบ ('woff'), url ("แบบอักษร / fontawesome-) รูปแบบ webfont.ttf ") ('truetype'), url (" แบบอักษร / fontawesome-webfont.svg # FontAwesome ") รูปแบบ ('svg'); น้ำหนักตัวอักษร: ปกติ; แบบอักษร: ปกติ; 
ไอคอนพลังงาน ที่เราต้องการสำหรับปุ่มนี้จะแสดงเป็นจำนวน Unicode F011; หากคุณดูที่มาร์กอัป HTML อย่างใกล้ชิดเราได้ใส่อักขระตัวเลขนี้ไว้ & # xF011; ภายในสมอแท็ก แต่เนื่องจากเราไม่ได้กำหนดแบบกำหนดเอง font-family ในรูปแบบของปุ่มไอคอนนั้นยังไม่สามารถแสดงผลได้อย่างถูกต้อง.
อ่านเพิ่มเติม: Unicode และ HTML: ตัวอักษรเอกสาร
จัดแต่งทรงผมที่ปุ่ม
ก่อนอื่นเราต้องกำหนดค่ากำหนดเอง font-family สำหรับปุ่ม.
ปุ่มของเราจะเป็นวงกลมเราสามารถบรรลุผลวงกลมโดยใช้ border-radius คุณสมบัติและตั้งค่าที่อย่างน้อยครึ่งหนึ่งของปุ่ม ความกว้าง.
เนื่องจากเราใช้แบบอักษรสำหรับไอคอนเราจึงสามารถตั้งค่าได้อย่างง่ายดาย สี และเพิ่ม ข้อความเงา สำหรับไอคอนในสไตล์ชีทเช่นกัน.
ต่อไปเราจะสร้างเอฟเฟกต์มุมสำหรับปุ่ม ผลกระทบนี้ค่อนข้างยุ่งยาก ก่อนอื่นเราต้องสมัคร สีพื้นหลัง: rgb (83,87,93); สำหรับฐานสีของปุ่มจากนั้นเราเพิ่มได้มากถึงสี่เลเยอร์ กล่องเงา.
a font-family: "FontAwesome"; สี: rgb (37,37,37); ข้อความเงา: 0px 1px 1px rgba (250,250,250,0.1) ขนาดตัวอักษร: 32pt; จอแสดงผล: บล็อก; ตำแหน่ง: ญาติ; การตกแต่งข้อความ: ไม่มี; สีพื้นหลัง: rgb (83,87,93); กล่องเงา: 0px 3px 0px 0px rgb (34,34,34), / * เงา 1 * / 0px 7px 10px 0px rgb (17,17,17), * * 1nd เงา * / ภาพประกอบ 0px 1px 1px 1px 1px 1px 1px 1px , 250, 250, .2), / * เงาที่ 3 * / ภาพประกอบ 0px -12px 35px 0px rgba (0, 0, 0, .5); / * เงาที่ 4 * / ความกว้าง: 70px; ความสูง: 70px; เส้นขอบ: 0; รัศมีเส้นขอบ: 35px; จัดข้อความ: ศูนย์; ความสูงของเส้น: 79px;
นอกจากนี้ยังมีวงกลมขนาดใหญ่ที่ด้านนอกของปุ่มและเราจะใช้ :ก่อน องค์ประกอบหลอก เพราะมันเพิ่มมาร์กอัพพิเศษ.
a: before content: ""; ความกว้าง: 80px; ความสูง: 80px; จอแสดงผล: บล็อก; ดัชนี z: -2; ตำแหน่ง: สัมบูรณ์; สีพื้นหลัง: rgb (26,27,29); ซ้าย: -5px; ด้านบน: -2px; รัศมีเส้นขอบ: 40px; กล่องเงา: 0px 1px 0px 0px rgba (250,250,250,0.1) สิ่งที่ใส่เข้าไป 0px 1px 2px rgba (0, 0, 0, 0.5);
อ่านเพิ่มเติม: CSS: ก่อนและ: หลัง หลอกองค์ประกอบ (Hongkiat.com)
ไฟแสดงสถานะ
ใต้ปุ่มจะมีไฟเล็ก ๆ เพื่อกำหนดสถานะเปิดและปิด ด้านล่างนี้เราใช้สีแดงกับสีของแสงเพราะเมื่อปิดไฟเราก็เพิ่ม กล่องเงา เพื่อเลียนแบบแสงแวววาวของแสง.
+ span display: block; ความกว้าง: 8px; ความสูง: 8px; สีพื้นหลัง: rgb (226,0,0); box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0.5); รัศมีเส้นขอบ: 4px; ชัดเจน: ทั้งสอง; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; ซ้าย: 42%;
ผลกระทบ
ณ จุดนี้ปุ่มของเราเริ่มดูดีและเราต้องการเพิ่มเอฟเฟกต์บางอย่างเท่านั้นเช่นเมื่อคลิกที่ปุ่ม 'กำลัง' คลิกเราต้องการให้ปุ่มดูเหมือนว่ามันถูกกดค้างไว้.
เพื่อให้บรรลุผลแรก กล่องเงา ในปุ่มจะเป็นศูนย์และตำแหน่งจะลดลงเล็กน้อย นอกจากนี้เรายังต้องปรับความเข้มของเงาอีกสามเล็กน้อยเพื่อให้ตรงกับตำแหน่งของปุ่ม.
a: active box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * Shadow 1 * / 0px 3px 7px 7px 0px rgb (17,17,17), / * 2nd Shadow * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * เงาที่ 3 * / ภาพประกอบ 0px -10px 35px 5px rgba (0, 0, 0, .5); / * เงาที่ 4 * / background-color: rgb (83,87,93); ด้านบน: 3px;
ยิ่งไปกว่านั้นเมื่อคลิกที่ปุ่มแล้วมันก็จะยังคงถูกกดลงและไอคอนควรจะเปล่งแสงเพื่อระบุว่ากำลังเปิดอยู่.
เพื่อให้บรรลุผลดังกล่าวเราจะกำหนดเป้าหมายปุ่มโดยใช้ : เป้าหมาย หลอกชั้น, จากนั้นเปลี่ยนสีของไอคอนเป็นสีขาวแล้วเพิ่ม a ข้อความเงา มีสีขาวเช่นกัน.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), แทรก 0px 1px 1px 0px rgba (250, 250, 250, .2) , ภาพประกอบ 0px -10px 35px 5px rgba (0, 0, 0, .5); สีพื้นหลัง: rgb (83,87,93); ด้านบน: 3px; สี: #fff; ข้อความเงา: 0px 0px 3px rgb (250,250,250);
อ่านเพิ่มเติม: ใช้: เป้าหมาย หลอกชั้น
เรายังต้องทำการปรับ กล่องเงา ในวงกลมนอกปุ่มดังต่อไปนี้.
a: active: ก่อนหน้านี้ a: target: before top: -5px; สีพื้นหลัง: rgb (26,27,29); กล่องเงา: 0px 1px 0px 0px rgba (250,250,250,0.1) สิ่งที่ใส่เข้าไป 0px 1px 2px rgba (0, 0, 0, 0.5);
ไฟแสดงสถานะจะเปลี่ยนจากค่าเริ่มต้นสีแดงเป็นสีเขียวเพื่อเน้นว่าไฟเปิดอยู่แล้ว.
a: target + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px 2gx rgba (135,187,83,0.5); สีพื้นหลัง: rgb (135,187,83);
การเปลี่ยนเอฟเฟกต์
สุดท้ายเพื่อให้เอฟเฟกต์ของปุ่มทำงานอย่างราบรื่นเราจะใช้เอฟเฟกต์การเปลี่ยนแปลงต่อไปนี้.
ตัวอย่างด้านล่างนี้จะเพิ่มการเปลี่ยนไปเป็น สี ทรัพย์สินและ ข้อความเงา สำหรับ 350ms ในองค์ประกอบสมอ.
transition: color 350ms, text-shadow 350ms; -o-transition: 350ms สี, text-shadow 350ms; -moz-transition: 350ms สี, text-shadow 350ms; -webkit-transition: 350ms สี, 350ms ข้อความเงา
ตัวอย่างที่สองด้านล่างนี้จะเพิ่มการเปลี่ยนสำหรับ สีพื้นหลัง และ กล่องเงา คุณสมบัติในไฟแสดงสถานะ.
a: target + span transition: 350ms สีพื้นหลัง, box-shadow 700ms; -o-transition: พื้นหลังสี 350ms, 700ms shadow box; -moz-transition: พื้นหลังสี 350ms, 700ms เงาของกล่อง; -webkit-transition: พื้นหลังสี 350ms, 700ms shadow box;
ผลสุดท้าย
เราได้ผ่านทุกรูปแบบที่เราต้องการตอนนี้คุณสามารถเห็นผลลัพธ์สุดท้ายแล้วพร้อมดาวน์โหลดไฟล์ต้นฉบับจากลิงค์ด้านล่าง.
- การสาธิต
- แหล่งดาวน์โหลด
โบนัส: วิธีปิด
ที่นี่โบนัสมา หากคุณลองใช้ปุ่มจากตัวอย่างด้านบนคุณสังเกตเห็นว่าปุ่มสามารถคลิกได้เพียงครั้งเดียวนั่นคือการเปิดใช้ดังนั้นเราจะปิดได้อย่างไร?.
น่าเสียดายที่เราต้องทำกับ jQuery แต่มันก็ง่ายเหมือนกัน ด้านล่างคือรหัส jQuery ทั้งหมดที่เราต้องการ.
$ (เอกสาร). ready (function () $ ('# button'). click (function () $ (this) .toggleClass ('บน'););); ตัวอย่างด้านบนจะเพิ่มคลาส ON ในสมอและเราใช้ toggleClass ฟังก์ชั่นจาก jQuery เพื่อเพิ่ม ดังนั้นเมื่อ #ปุ่ม คลิกที่ jQuery จะตรวจสอบว่ามีการเพิ่มคลาส ON หรือไม่: เมื่อไม่ใช่ jQuery จะเพิ่มคลาสและหากเพิ่มแล้ว jQuery จะลบคลาสออก.
บันทึก: อย่าลืมใส่ jQuery library ด้วย.
ตอนนี้เราต้องเปลี่ยนสไตล์เล็กน้อย เพียงแค่แทนที่ทั้งหมด : เป้าหมาย องค์ประกอบหลอก กับ .บน ตัวเลือกคลาสดังนี้:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), แทรก 0px 1px 1px 0px rgba (250, 250, 250, .2) , ภาพประกอบ 0px -10px 35px 5px rgba (0, 0, 0, .5); สีพื้นหลัง: rgb (83,87,93); ด้านบน: 3px; สี: #fff; ข้อความเงา: 0px 0px 3px rgb (250,250,250); a: active: before, a.on: before top: -5px; สีพื้นหลัง: rgb (26,27,29); กล่องเงา: 0px 1px 0px 0px rgba (250,250,250,0.1) สิ่งที่ใส่เข้าไป 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px 2gx rgba (135,187,83,0.5); สีพื้นหลัง: rgb (135,187,83);
สุดท้ายเรามาลองในเบราว์เซอร์กัน.
- การสาธิต
- แหล่งดาวน์โหลด
