โฮมเพจ » การเข้ารหัส » วิธีการสร้าง Switch UI โดยใช้ CSS Mask

    วิธีการสร้าง 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 กฎเพื่อ .วิทยุ ชั้นเรียนเพื่อ ซ่อนปุ่มตัวเลือก. กฎสุดท้ายในบล็อกรหัสด้านล่าง, เคอร์เซอร์: ตัวชี้; แสดงเคอร์เซอร์ตัวชี้สำหรับปุ่มตัวเลือกที่ไม่ถูกตรวจสอบเพื่อให้ผู้ใช้ทราบว่าจะคลิกปุ่มใดเพื่อสลับสถานะการสลับ.

    สกรีนช็อตของสวิตช์ UI พร้อมปุ่มตัวเลือกในเบราว์เซอร์ Chrome

    ขั้นตอนที่ 2 เพิ่มสกินลงในสวิตช์

    ในขั้นตอนนี้เราจะเพิ่มสองรายการ

    แท็กสำหรับสองสกินใต้ปุ่มตัวเลือกในไฟล์ HTML ของเราและภาพพื้นหลังสำหรับแต่ละสกินใน CSS ของเรา.

    ฉันใช้ "วัน" และ "กลางคืน" เป็นสองสถานะของสวิตช์ที่ได้รับแรงบันดาลใจจาก Dribbble shot โดย Minh Killy Le.

    เดย์สกิน
    ไนท์สกิน

    HTML

    CSS

    #daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin width: 100%; ความสูง: 100%; ตัวชี้เหตุการณ์: ไม่มี; ตำแหน่ง: สัมบูรณ์; กำไรขั้นต้น: 0; 

    ตัวชี้เหตุการณ์: ไม่มี; กฎถูกเพิ่มในสกินเพื่อให้เหตุการณ์การคลิกบนสวิตช์สามารถ ผ่านพวกเขา, และ เข้าถึงปุ่มตัวเลือก.

    ด้วยคุณสมบัติตัวชี้เหตุการณ์ CSS คุณสามารถกำหนดสถานการณ์ภายใต้องค์ประกอบกราฟิกที่สามารถ กำหนดเป้าหมายโดยเหตุการณ์เมาส์.

    เป็นทางเลือกสำหรับรหัสด้านบนทั้งสอง แท็ก (พร้อมภาพต้นฉบับ) ภายใน

    แท็กยังสามารถทำงานได้ พวกเขาจะเป็น สกินสำหรับสถานะสวิตช์ทั้งสอง.

    สกรีนช็อตของสวิตช์พร้อมสกินในโครเมียม

    ขั้นตอน 3a เพิ่มรูปแบบ (รุ่น Webkit)

    สำหรับ Chrome และเบราว์เซอร์ที่ใช้ Webkit อื่น ๆ ฉันจะใช้ หน้ากากภาพ คุณสมบัติ CSS ซึ่ง - จากการเขียนโพสต์นี้ - ใช้งานได้เฉพาะกับ -WebKit คำนำหน้าในเบราว์เซอร์ Webkit หน้ากากภาพ คุณสมบัติช่วยให้คุณ ระบุภาพ ที่จะใช้ เช่นเดียวกับ หน้ากาก.

    โดยทั่วไปมีการพรางสองชนิด: ความสว่าง และ แอลฟา.

    • ใน กำบังความส่องสว่าง, ส่วนที่มืดของภาพหน้ากากจะซ่อนภาพที่ถูกปิดบัง: ส่วนที่เข้มกว่าอยู่ในภาพหน้ากาก, ยิ่งซ่อนส่วนนั้นมาก ในภาพที่ถูกหลอกลวง.
    • ใน กำบังอัลฟา, ส่วนที่โปร่งใสของภาพหน้ากากจะซ่อนภาพที่ถูกปิดบัง: ยิ่งส่วนที่อยู่ในภาพหน้ากากมีความโปร่งใสมากเท่าใดส่วนที่ซ่อนอยู่ก็ยิ่งมากขึ้นเท่านั้นในภาพที่ถูกปิดบัง.

    ใน Chrome (ตั้งแต่รุ่น 51.0.2704.103, Win10) ดูเหมือนว่าเฉพาะอัลฟาเท่านั้นที่ใช้งานได้ในปัจจุบัน.

    ใน CSS, แอลฟา และ ความสว่าง คือคุณค่าของ หน้ากากชนิด คุณสมบัติ.

    นี่คือ CSS ที่ เพิ่มหน้ากาก เป็นภาพพื้นหลังในเบราว์เซอร์ Webkit:

    CSS

    #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 ที่ใช้ในการสร้างภาพจากรูปร่างที่กำหนดไว้ล่วงหน้าการไล่ระดับสีเรเดียลและศูนย์กลางของการไล่ระดับสี.

    สำหรับผิวกลางคืนฉันสร้างวงกลมโปร่งใสและฉันสร้างส่วนที่เหลือของทึบแสงของภาชนะ สำหรับผิวกลางวันฉันทำตรงกันข้าม: สร้างวงกลมทึบแสงด้วย รัศมีการไล่ระดับสี () ฟังก์ชั่นและทำให้ส่วนที่เหลือโปร่งใส.

    แม้ว่ามันจะยังไม่รองรับในเบราว์เซอร์ Webkit แต่ฉันก็เพิ่ม หน้ากากชนิด คุณสมบัติกับ CSS สำหรับการอ้างอิงในอนาคต.

    สกรีนช็อตของสวิตช์พร้อมกับเลือก Night Skin
    สกรีนช็อตของสวิตช์พร้อมเลือก Day skin

    ดังที่คุณเห็นด้านบนขอบของวงกลมไม่ราบรื่นมาก ไปยัง ซ่อนขอบที่ขรุขระ, เพิ่ม

    ด้านหลังสกินในรูปของวงกลม (ขนาดเดียวกับรูปแบบวงกลม) ที่มีเงากล่อง เงาจะซ่อนขอบขรุขระของมาสก์วงกลม.

    HTML

    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 เป็นภาพมาสก์ที่มีประเภทมาสก์ ความสว่าง.

         

    ภาพ SVG ด้านบนดูเหมือนว่าการรวมกันของ สี่เหลี่ยมผืนผ้าสีขาว และ วงกลมสีดำ. เพิ่มสิ่งนี้และอีกอันด้วย สี่เหลี่ยมผืนผ้าสีดำ และ วงกลมสีขาว เป็นมาสก์สำหรับ HTML ที่เราใช้ในเวอร์ชัน Webkit.

    ภาพ SVG (สี่เหลี่ยมสีขาวและวงกลมสีดำสำหรับหน้ากาก)

    HTML

                 

    แทนที่ (หรือรวมกับ) โค้ด CSS สำหรับ #nightSkin เราใช้ในเวอร์ชัน Webkit ด้วยรหัสต่อไปนี้ และคุณทำเสร็จแล้ว.

    ตอนนี้เรามีรูปแบบของหน้ากากสองแบบ (CSS gradient & SVG), สองรูปแบบต่าง ๆ (Alpha & Luminance), และทั้ง Webkit และ Firefox รองรับ.

    CSS

    #nightSkin background-image: url ('night.png'); หน้ากากชนิด: ความส่องสว่าง; หน้ากาก:: url (#leftSwitchMask);  #leftRadio: ทำเครื่องหมาย ~ # nightSkin mask-type: luminance; หน้ากาก:: url (#rightSwitchMask); 

    ตรวจสอบการสาธิต

    • การสาธิต
    • แหล่งดาวน์โหลด
    © PHHSNEWS
    ข้อมูลที่เป็นประโยชน์และเคล็ดลับในการพัฒนาเว็บ การเขียนโปรแกรม, ออกแบบเว็บไซต์, CSS, HTML, JAVASCRIPT กำหนดค่าและติดตั้ง WINDOWS อีกครั้ง การสร้างเว็บไซต์และแอปพลิเคชันตั้งแต่เริ่มต้น