Πώς να δημιουργήσετε ένα UI Switch χρησιμοποιώντας τη μάσκα CSS

Στην επεξεργασία εικόνας, συγκάλυψη είναι μια τεχνική που σας επιτρέπει να απόκρυψη μιας εικόνας με άλλον. Μια μάσκα χρησιμοποιείται για να δημιουργήσει ένα τμήμα μιας εικόνας βλέπε-μέσω. Μπορείτε να εκτελέσετε τη μάσκα χρησιμοποιώντας το CSS με τη βοήθεια των ιδιοτήτων κάλυψης.

Στη σημερινή ανάρτηση θα δημιουργήσουμε μια μάσκα με δύο εικόνες PNG και τεχνικές κάλυψης CSS και θα επιτρέψουμε στους χρήστες να χειριστούν τις δύο καταστάσεις της εικόνας (ημέρα και Νύχτα) με τη βοήθεια μιας διεπαφής UI.

Λόγω ορισμένων προβλημάτων συμβατότητας του προγράμματος περιήγησης - δεν υποστηρίζονται όλες οι ιδιότητες κάλυψης σε κάθε πρόγραμμα περιήγησης (από τον Ιούνιο του 2016) - θα σας δείξω δύο τεχνικές για την προσθήκη μάσκες, ένα για προγράμματα περιήγησης Webkit και ένα για τον Firefox. Τα δύο πρώτα βήματα σε αυτό το σεμινάριο τριών βημάτων είναι τα ίδια για κάθε πρόγραμμα περιήγησης, αλλά θα υπάρξει διαφορά στο τρίτο βήμα.

Βήμα 1. Δημιουργήστε έναν βασικό διακόπτη

Δεδομένου ότι ένας τυπικός διακόπτης έχει δύο καταστάσεις με μόνο ένα ενεργοποιημένη σε μια στιγμή, μπορείτε να χρησιμοποιήσετε ένα ομάδα κουμπιών επιλογής δύο για να δημιουργήσετε τα λειτουργικά στοιχεία του διακόπτη. Τοποθετήστε κάθε κουμπί επιλογής στο αριστερό και το δεξί άκρο του γονικού στοιχείου.

Οι ομάδες κουμπιών ραδιοφώνου δημιουργούνται δίνοντας το ίδιο το κουμπί επιλογής όνομα Χαρακτηριστικό. Σε μια ομάδα κουμπιών επιλογής, μόνο ένα κουμπί επιλογής μπορούν να ελέγχονται κάθε φορά.

Ξεκινάμε με τα ακόλουθα HTML και CSS:

HTML

CSS

Στο CSS παρακάτω, χρησιμοποίησα απόλυτη τοποθέτηση για να τοποθετήσω τα κουμπιά επιλογής στην οθόνη ακριβώς εκεί που θέλω.

#outerWrapper πλάτος: 450px; ύψος: 90px; padding: 10px; περιθώριο: 100px αυτόματη 0 αυτόματη; ακτίνα-ακτίνα: 55px; κουτί-σκιά: 0 0 10px 6px #EAEBED; background: #fff;  #innerWrapper ύψος: 100%; ακτίνα-ακτίνα: 45px; υπερχείλιση: κρυφή; θέση: σχετική. . ραδιόφωνο πλάτος: 90px; ύψος: 100%. θέση: απόλυτη; περιθώριο: 0; αδιαφάνεια: 0;  #rightRadio δεξιά: 0;  .radio: όχι (: επιλεγμένο) cursor: pointer;  

Προσθέτω το αδιαφάνεια: 0 κανόνα στο .ραδιόφωνο τάξη για να απόκρυψη των κουμπιών επιλογής. Ο τελευταίος κανόνας στο μπλοκ κώδικα παρακάτω, δρομέας: δείκτης; δείχνει τον δείκτη του δείκτη για το μη επιλεγμένο κουμπί επιλογής, έτσι ώστε οι χρήστες να γνωρίζουν σε ποιο κουμπί να κάνουν κλικ για να αλλάξουν την κατάσταση του διακόπτη.

Βήμα 2. Προσθέστε Skins στον διακόπτη

Σε αυτό το βήμα, θα προσθέσουμε δύο

ετικέτες για τα δύο δέρματα κάτω από τα κουμπιά επιλογής στο αρχείο HTML και μια εικόνα φόντου σε κάθε δέρμα στο CSS.

Χρησιμοποιώ την "Ημέρα" και τη "Νύχτα" ως τις δύο καταστάσεις του διακόπτη, εμπνευσμένες από ένα πυροβολισμό Dribbble από τον Minh Killy Le.

HTML

CSS

# daySkin φόντο-εικόνα: url ('day.png');  #nightSkin φόντο-εικόνα: url ('night.png');  .skin πλάτος: 100%; ύψος: 100%. δείκτες-δείκτες: κανένας. θέση: απόλυτη; περιθώριο: 0; 

ο δείκτες-δείκτες: κανένας. κανόνας προστίθεται στις επιφάνειες έτσι ώστε τα συμβάντα κλικ στον διακόπτη να μπορούν να περάσουν μέσα από αυτά, και φτάσετε στα κουμπιά επιλογής.

Με την ιδιότητα CSS του δείκτη-συμβάντων μπορείτε να ορίσετε τις περιστάσεις κάτω από τις οποίες μπορεί να είναι ένα γραφικό στοιχείο που στοχεύουν γεγονότα ποντικιών.

Ως εναλλακτική λύση για τον παραπάνω κώδικα, δύο ετικέτες (με εικόνες προέλευσης) μέσα στο

οι ετικέτες μπορούν επίσης να λειτουργούν. Θα είναι το δέρματα για τις δύο καταστάσεις μεταγωγής.

Βήμα 3α. Προσθήκη μάσκας (έκδοση Webkit)

Για το Chrome και άλλα προγράμματα περιήγησης που βασίζονται στο Webkit, θα χρησιμοποιήσω το μάσκα-εικόνα CSS ιδιοκτησία, η οποία - από τη σύνταξη αυτής της θέσης - λειτουργεί μόνο με το -webkit πρόθεμα σε προγράμματα περιήγησης Webkit. ο μάσκα-εικόνα ακίνητα σας επιτρέπει καθορίστε την εικόνα για να χρησιμοποιηθεί ως μάσκα.

Σε γενικές γραμμές, υπάρχουν δύο είδη κάλυψης: φωτεινότητα και άλφα.

• Σε φωτισμός φωτεινότητας, το σκοτεινό τμήμα της εικόνας μάσκας κρύβει την εικόνα που καλύπτει: το πιο σκοτεινό τμήμα είναι στην εικόνα μάσκας, τόσο πιο κρυμμένο είναι αυτό το τμήμα στην εικόνα που καλύπτεται.
• Σε άλφα κάλυψη, το διαφανές τμήμα της εικόνας της μάσκας κρύβει την εικόνα που καλύπτει: όσο πιο διαφανές είναι ένα τμήμα στην εικόνα της μάσκας, τόσο πιο κρυφά το τμήμα είναι στην εικόνα που καλύπτεται.

Στο Chrome (από την έκδοση 51.0.2704.103, Win10), μόνο το alpha φαίνεται να λειτουργεί αυτήν τη στιγμή.

Στο CSS, άλφα και φωτεινότητα είναι οι τιμές του μάσκα τύπου ιδιοκτησία.

Εδώ είναι το CSS προσθέτει μια μάσκα σε εικόνες φόντου σε προγράμματα περιήγησης Webkit:

CSS

#nightSkin φόντο-εικόνα: url ('night.png'); μάσκα τύπου: άλφα; / * διαφανής κύκλος με το υπόλοιπο τμήμα αδιαφανές * / -webkit-μάσκα-εικόνα: ακτινική κλίση (κύκλος 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) .  / * Όταν επιλεγεί το δέρμα ημέρας * / #leftRadio: ελεγμένο ~ # nightSkin type mask: alpha; / * αδιαφανής κύκλος με το υπόλοιπο τμήμα διαφανές * / -webkit-μάσκα-εικόνα: ακτινική κλίση (κύκλος σε 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) . 

Χρησιμοποίησα το -webkit-μάσκα-εικόνα για να δημιουργήσετε την αρχική εικόνα μάσκας. Η αξία του χρησιμοποιεί το ακτινική κλίση () Η λειτουργία CSS που χρησιμοποιείται για τη δημιουργία μιας εικόνας από ένα προκαθορισμένο σχήμα, μια ακτινική κλίση και το κέντρο της κλίσης.

Για το νυχτερινό δέρμα, δημιούργησα ένα διάφανο κύκλο και έκανα το υπόλοιπο τμήμα του δοχείου αδιαφανές. Για το δέρμα ημέρας, έκανα το αντίθετο: δημιούργησε έναν αδιαφανή κύκλο με το ακτινική κλίση () λειτουργία και έκανε το υπόλοιπο τμήμα διαφανές.

Παρόλο που δεν υποστηρίζεται ακόμα σε προγράμματα περιήγησης Webkit, πρόσθεσα το μάσκα τύπου ιδιοκτησίας στο CSS για μελλοντική αναφορά.

Όπως μπορείτε να δείτε παραπάνω, τα όρια του κύκλου δεν είναι πολύ ομαλά. Προς το κρύψτε τις τραχείες άκρες, πρόσθεσε ένα

μετά τα δέρματα σε σχήμα κύκλου (ίδιο μέγεθος με τον κύκλο μάσκας) με σκιά κουτιού. Η σκιά θα κρύψει τις τραχείες άκρες της μάσκας κύκλου.

HTML

CSS

#switchBtnOutline πλάτος: 90px; ύψος: 100%. ακτίνα-ακτίνα: 45px; κουτί-σκιά: 0 0 2px 2px γκρι ένθετο, 0 0 10px γκρι; δείκτες-δείκτες: κανένας. θέση: απόλυτη; περιθώριο: 0;  / * Τοποθετήστε #switchBtnOutline στο δεξιό τέλος όταν επιλέγεται το δέρμα ημέρας * / #leftRadio: checked ~ # switchBtnOutline δεξιά: 0; 

Βήμα 3β. Προσθήκη μάσκας (έκδοση Firefox)

ο μάσκα-εικόνα Η ιδιότητα CSS είναι στην πραγματικότητα ένα μακροχρόνιο ακίνητο, και είναι μέρος της περιουσίας στενογραφίας μάσκα που σας επιτρέπει να καθορίσετε την εικόνα που θα χρησιμοποιηθεί και ως μάσκα. Ενώ μάσκα-εικόνα δεν υποστηρίζεται ακόμα στον Firefox, μάσκα είναι.

παρόλο που το μάσκα ιδιότητα θα πρέπει να αποδεχθεί μια εικόνα που δημιουργήθηκε με το ακτινική κλίση () Η λειτουργία CSS λειτουργεί ως τιμή, όπως και η μάσκα-εικόνα ακίνητα, δεν υπάρχει υποστήριξη για αυτό στο Firefox ακόμα.

Έτσι, αντί για ένα ακτινική κλίση () εικόνα, ας χρησιμοποιήσουμε μια εικόνα SVG ως εικόνα μάσκας με τον τύπο της μάσκας φωτεινότητα.

Η παραπάνω εικόνα SVG μοιάζει με συνδυασμό a λευκό ορθογώνιο και ένα μαύρο κύκλο. Προσθέστε αυτό, και ένα άλλο με ένα μαύρο ορθογώνιο και ένα λευκό κύκλο ως μάσκες στο HTML που χρησιμοποιήσαμε στην έκδοση Webkit.

HTML

Αντικαταστήστε (ή συνδυάστε) τον κώδικα CSS για #nightSkin χρησιμοποιήσαμε την έκδοση Webkit με τον ακόλουθο κώδικα. Και τελειώσατε.

Έχουμε τώρα δύο διαφορετικές εικόνες μάσκας (CSS gradient & SVG), δύο διαφορετικούς τύπους μάσκας (Alpha & Luminance), και την υποστήριξη Webkit και Firefox.

CSS

#nightSkin φόντο-εικόνα: url ('night.png'); Τύπος μάσκας: φωτεινότητα. μάσκα: url (#leftSwitchMask);  #leftRadio: Έλεγξε ~ # nightSkin τύπου μάσκας: φωτεινότητα; μάσκα: url (#rightSwitchMask); 

Ελέγξτε την επίδειξη

• Διαδήλωση
• Λήψη πηγής

Πώς να δημιουργήσετε ένα σημείο επαναφοράς συστήματος στα Windows 7

Πώς να δημιουργήσετε μη αυτόματα ένα σημείο επαναφοράς συστήματος στο XP

Πώς να δημιουργήσετε έναν ισχυρό κωδικό πρόσβασης (και να το θυμάστε)