วิธีการสร้าง Switch UI โดยใช้ CSS Mask
ในการประมวลผลภาพ, การกำบัง เป็นเทคนิคที่ช่วยให้คุณ ซ่อนภาพ กับอีก หน้ากากถูกใช้เพื่อสร้างส่วนของภาพ ดูผ่าน. คุณสามารถทำการปิดบังโดยใช้ CSS โดยใช้คุณสมบัติการปิดบัง.
ในโพสต์ของวันนี้เราจะสร้างภาพที่ถูกหลอกลวงโดยใช้ภาพ PNG สองภาพและเทคนิคการปิดบัง CSS และอนุญาตให้ผู้ใช้จัดการกับสองสถานะของภาพ (วัน และ กลางคืน) ด้วยความช่วยเหลือของสวิตช์ UI.
เนื่องจากปัญหาความเข้ากันได้ของเบราว์เซอร์ - คุณสมบัติการปิดบังไม่ได้รับการสนับสนุนในทุกเบราว์เซอร์ (จนถึงเดือนมิถุนายน 2559) - ฉันจะแสดง สองเทคนิคสำหรับการเพิ่มมาสก์, หนึ่งสำหรับเบราว์เซอร์ที่ใช้ Webkit และอีกอันสำหรับ Firefox สองขั้นตอนแรกในบทช่วยสอนสามขั้นตอนนี้เหมือนกันสำหรับทุกเบราว์เซอร์ แต่จะมีความแตกต่างในขั้นตอนที่สาม.
ขั้นตอนที่ 1 สร้างสวิตช์พื้นฐาน
เนื่องจากสวิตช์ทั่วไปมีสองสถานะด้วย เพียงคนเดียว เปิดการใช้งาน ในแต่ละครั้งคุณสามารถใช้ กลุ่มปุ่มตัวเลือกของทั้งสอง เพื่อสร้างส่วนประกอบการทำงานของสวิตช์ วางปุ่มตัวเลือกแต่ละปุ่มที่ด้านซ้ายและขวาขององค์ประกอบหลัก.
กลุ่มปุ่มเรดิโอถูกสร้างขึ้นโดยให้แต่ละปุ่มเหมือนกัน ชื่อ คุณลักษณะ ในกลุ่มปุ่มตัวเลือก, ปุ่มตัวเลือกเดียวเท่านั้น สามารถตรวจสอบได้ตลอดเวลา.
เราเริ่มต้นด้วย HTML และ CSS ต่อไปนี้:
HTML
CSS
ใน CSS ด้านล่างฉันใช้การจัดตำแหน่งแบบสัมบูรณ์เพื่อวางปุ่มตัวเลือกบนหน้าจอตรงตามที่ฉันต้องการ.
#outerWrapper width: 450px; ความสูง: 90px; การขยาย: 10px; กำไร: 100px อัตโนมัติ 0 อัตโนมัติ; รัศมีเส้นขอบ: 55px; box-shadow: 0 0 10px 6px #EAEBED; พื้นหลัง: #fff; #innerWrapper height: 100%; border-radius: 45px; ล้น: ซ่อน; ตำแหน่ง: ญาติ; .radio width: 90px; ความสูง: 100%; position: absolute; margin: 0; ความทึบ: 0; #rightRadio right: 0; .radio: ไม่ (เลือก:) เคอร์เซอร์: ตัวชี้;
ฉันเพิ่ม ความทึบ: 0 กฎเพื่อ .วิทยุ ชั้นเรียนเพื่อ ซ่อนปุ่มตัวเลือก. กฎสุดท้ายในบล็อกรหัสด้านล่าง, เคอร์เซอร์: ตัวชี้; แสดงเคอร์เซอร์ตัวชี้สำหรับปุ่มตัวเลือกที่ไม่ถูกตรวจสอบเพื่อให้ผู้ใช้ทราบว่าจะคลิกปุ่มใดเพื่อสลับสถานะการสลับ.
ขั้นตอนที่ 2 เพิ่มสกินลงในสวิตช์
ในขั้นตอนนี้เราจะเพิ่มสองรายการ ฉันใช้ "วัน" และ "กลางคืน" เป็นสองสถานะของสวิตช์ที่ได้รับแรงบันดาลใจจาก Dribbble shot โดย Minh Killy Le. HTML CSS ด้วยคุณสมบัติตัวชี้เหตุการณ์ CSS คุณสามารถกำหนดสถานการณ์ภายใต้องค์ประกอบกราฟิกที่สามารถ กำหนดเป้าหมายโดยเหตุการณ์เมาส์. เป็นทางเลือกสำหรับรหัสด้านบนทั้งสอง สำหรับ Chrome และเบราว์เซอร์ที่ใช้ Webkit อื่น ๆ ฉันจะใช้ โดยทั่วไปมีการพรางสองชนิด: ความสว่าง และ แอลฟา. ใน Chrome (ตั้งแต่รุ่น 51.0.2704.103, Win10) ดูเหมือนว่าเฉพาะอัลฟาเท่านั้นที่ใช้งานได้ในปัจจุบัน. ใน CSS, นี่คือ CSS ที่ เพิ่มหน้ากาก เป็นภาพพื้นหลังในเบราว์เซอร์ Webkit: CSS ฉันใช้ สำหรับผิวกลางคืนฉันสร้างวงกลมโปร่งใสและฉันสร้างส่วนที่เหลือของทึบแสงของภาชนะ สำหรับผิวกลางวันฉันทำตรงกันข้าม: สร้างวงกลมทึบแสงด้วย แม้ว่ามันจะยังไม่รองรับในเบราว์เซอร์ Webkit แต่ฉันก็เพิ่ม ดังที่คุณเห็นด้านบนขอบของวงกลมไม่ราบรื่นมาก ไปยัง ซ่อนขอบที่ขรุขระ, เพิ่ม HTML CSS แม้ว่า ดังนั้นแทนที่จะเป็น ภาพ SVG ด้านบนดูเหมือนว่าการรวมกันของ สี่เหลี่ยมผืนผ้าสีขาว และ วงกลมสีดำ. เพิ่มสิ่งนี้และอีกอันด้วย สี่เหลี่ยมผืนผ้าสีดำ และ วงกลมสีขาว เป็นมาสก์สำหรับ HTML ที่เราใช้ในเวอร์ชัน Webkit. HTML แทนที่ (หรือรวมกับ) โค้ด CSS สำหรับ ตอนนี้เรามีรูปแบบของหน้ากากสองแบบ (CSS gradient & SVG), สองรูปแบบต่าง ๆ (Alpha & Luminance), และทั้ง Webkit และ Firefox รองรับ. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin width: 100%; ความสูง: 100%; ตัวชี้เหตุการณ์: ไม่มี; ตำแหน่ง: สัมบูรณ์; กำไรขั้นต้น: 0; ตัวชี้เหตุการณ์: ไม่มี; กฎถูกเพิ่มในสกินเพื่อให้เหตุการณ์การคลิกบนสวิตช์สามารถ ผ่านพวกเขา, และ เข้าถึงปุ่มตัวเลือก.
ขั้นตอน 3a เพิ่มรูปแบบ (รุ่น Webkit)
หน้ากากภาพ คุณสมบัติ CSS ซึ่ง - จากการเขียนโพสต์นี้ - ใช้งานได้เฉพาะกับ -WebKit คำนำหน้าในเบราว์เซอร์ Webkit หน้ากากภาพ คุณสมบัติช่วยให้คุณ ระบุภาพ ที่จะใช้ เช่นเดียวกับ หน้ากาก.แอลฟา และ ความสว่าง คือคุณค่าของ หน้ากากชนิด คุณสมบัติ.#nightSkin background-image: url ('night.png'); หน้ากากชนิด: อัลฟา; / * วงกลมโปร่งใสที่มีส่วนที่ทึบแสงเหลืออยู่ * / -webkit-mask-image: radial-gradient (วงกลมที่ 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * เมื่อเลือก day day * / #leftRadio: ทำเครื่องหมาย ~ # nightSkin mask-type: alpha; / * วงกลมทึบแสงที่มีส่วนที่เหลือโปร่งใส * / -webkit-mask-image: radial-gradient (วงกลมที่ 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -WebKit หน้ากากภาพ คุณสมบัติเพื่อสร้างอิมเมจมาสก์เริ่มต้น ค่าของมันใช้ รัศมีการไล่ระดับสี () ฟังก์ชั่น CSS ที่ใช้ในการสร้างภาพจากรูปร่างที่กำหนดไว้ล่วงหน้าการไล่ระดับสีเรเดียลและศูนย์กลางของการไล่ระดับสี.รัศมีการไล่ระดับสี () ฟังก์ชั่นและทำให้ส่วนที่เหลือโปร่งใส.หน้ากากชนิด คุณสมบัติกับ CSS สำหรับการอ้างอิงในอนาคต.
#switchBtnOutline width: 90px; ความสูง: 100%; border-radius: 45px; box-shadow: 0 0 2px 2px grey inset, 0 0 10px grey; ชี้เหตุการณ์: ไม่มี; position: absolute; margin: 0; / * วาง #switchBtnOutline ทางด้านขวาเมื่อเลือก day skin * / #leftRadio: ทำเครื่องหมาย ~ # switchBtnOutline right: 0;
ขั้นตอนที่ 3b เพิ่มรูปแบบ (รุ่น Firefox)
หน้ากากภาพ คุณสมบัติ CSS เป็นจริง ทรัพย์สินมือสอง, และเป็นส่วนหนึ่งของคุณสมบัติจดชวเลข หน้ากาก ที่ช่วยให้คุณระบุภาพที่จะใช้เป็นหน้ากากได้เช่นกัน ในขณะที่ หน้ากากภาพ ยังไม่รองรับใน Firefox, หน้ากาก คือ.หน้ากาก สถานที่ให้บริการควรยอมรับภาพที่สร้างขึ้นด้วย รัศมีการไล่ระดับสี () ฟังก์ชั่น CSS เป็นค่าเช่นเดียวกับ หน้ากากภาพ คุณสมบัติไม่ได้รับการสนับสนุนใน Firefox.รัศมีการไล่ระดับสี () อิมเมจให้ใช้รูปภาพ SVG เป็นภาพมาสก์ที่มีประเภทมาสก์ ความสว่าง.
#nightSkin เราใช้ในเวอร์ชัน Webkit ด้วยรหัสต่อไปนี้ และคุณทำเสร็จแล้ว.#nightSkin background-image: url ('night.png'); หน้ากากชนิด: ความส่องสว่าง; หน้ากาก:: url (#leftSwitchMask); #leftRadio: ทำเครื่องหมาย ~ # nightSkin mask-type: luminance; หน้ากาก:: url (#rightSwitchMask); ตรวจสอบการสาธิต
