CSS3 Tutorial Δημιουργήστε ένα κομψό κουμπί On / Off
Η χρήση ενός κουμπιού είναι, μέχρι στιγμής, ο προτιμώμενος τρόπος αλληλεπίδρασης με ένα ηλεκτρονικό υλικό. όπως το ραδιόφωνο, η τηλεόραση, η συσκευή αναπαραγωγής μουσικής και ακόμη και ένα smartphone που διαθέτει λειτουργία φωνητικών εντολών χρειάζεται ακόμα τουλάχιστον ένα ή δύο φυσικά κουμπιά.
Επιπλέον, σε αυτήν την ψηφιακή εποχή, το κουμπί έχει εξελιχθεί και στην ψηφιακή του μορφή, γεγονός που καθιστά πιο διαδραστικό, δυναμικό και πραγματικά εύκολο να γίνει, σε σύγκριση με το φυσικό κουμπί.
Έτσι, αυτή τη φορά, πρόκειται να δημιουργήσουμε ένα κηλίδικο και διαδραστικό κουμπί το οποίο βασίζεται σε αυτό το εξαιρετικό σχέδιο πάνω στο Dribbble χρησιμοποιώντας μόνο CSS.
Λοιπόν, ας ξεκινήσουμε.
HTML
Θα ξεκινήσουμε το κουμπί τοποθετώντας την ακόλουθη σήμανση στο έγγραφο HTML. Είναι πραγματικά απλό, το κουμπί θα βασίζεται σε μια ετικέτα αγκύρωσης, έχουμε επίσης ένα σπιθαμή δίπλα σε αυτό για να δημιουργηθεί η ενδεικτική λυχνία και στη συνέχεια τυλίγονται μαζί σε ένα HTML5 Ενότητα ετικέτα.
& # xF011;
Δείτε πώς φαίνεται αρχικά το κουμπί μας.
Βασικό στυλ
Σε αυτό το τμήμα, θα αρχίσουμε να εργαζόμαστε για το Στυλ.
Αρχικά εφαρμόζουμε αυτό το σκούρο φόντο από το Λεπτό Πρότυπο στο έγγραφο του σώματος και το κέντρο του Ενότητα. Στη συνέχεια, θα αφαιρέσουμε επίσης τη διακεκομμένη περίγραμμα κατά την :Συγκεντρώνω και :ενεργός Σύνδεσμος.
σώμα φόντο: url ('images / micro_carbon.png'); τμήμα margin: 150px auto 0; πλάτος: 75px; ύψος: 95px; θέση: σχετική. κείμενο-ευθυγράμμιση: κέντρο; : ενεργή,: εστίαση περίγραμμα: 0; Χρήση προσαρμοσμένης γραμματοσειράς
Για το εικονίδιο του κουμπιού, θα χρησιμοποιήσουμε μια προσαρμοσμένη γραμματοσειρά από το στοιχείο Font Awesome και όχι μια εικόνα. Με αυτόν τον τρόπο το εικονίδιο θα είναι εύκολα στυλ και ικανό να δημιουργήσει κλίμακες μέσω του φύλλου στυλ.
Κατεβάστε τη γραμματοσειρά, αποθηκεύστε τα αρχεία γραμματοσειρών (eot, woff, ttf και svg) στο γραμματοσειρές και, στη συνέχεια, τοποθετήστε τον ακόλουθο κώδικα στο φύλλο στυλ για να ορίσετε μια νέα οικογένεια γραμματοσειρών.
@ γραμματοσειρά font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"). src: url ("fonts / fontawesome-webfont.eot? #iefix") μορφή (eot), url ("fonts / fontawesome-webfont.woff" webfont.ttf ") (" truetype "), url (" fonts / fontawesome-webfont.svg # FontAwesome ") μορφή ('svg'); γραμματοσειρά-βάρος: κανονική. γραμματοσειρά: κανονικό; 
ο εικονίδιο ισχύος που χρειαζόμαστε για αυτό το κουμπί αντιπροσωπεύεται στον αριθμό Unicode F011. αν κοιτάξετε προσεκτικά το σημάδι HTML παραπάνω, έχουμε βάλει αυτόν τον αριθμητικό χαρακτήρα & # xF011; μέσα στην ετικέτα αγκύρωσης, αλλά δεδομένου ότι δεν έχουμε ορίσει το έθιμο γραμματοσειρά-οικογένεια στο στυλ κουμπιού, το εικονίδιο δεν έχει ακόμη αποτυπωθεί σωστά.
Περαιτέρω ανάγνωση: Unicode και HTML: Χαρακτήρες εγγράφου
Σχεδίαση του κουμπιού
Πρώτα απ 'όλα, πρέπει να ορίσουμε το έθιμο γραμματοσειρά-οικογένεια για το κουμπί.
Το κουμπί μας θα είναι ένας κύκλος, μπορούμε να επιτύχουμε το αποτέλεσμα του κύκλου χρησιμοποιώντας το ακτίνα ακρόασης και ορίστε την τιμή τουλάχιστον στο ήμισυ του κουμπιού πλάτος.
Δεδομένου ότι, χρησιμοποιούμε μια γραμματοσειρά για το εικονίδιο, μπορούμε εύκολα να ορίσουμε το χρώμα και προσθέστε σκιά κειμένου για το εικονίδιο στο φύλλο στυλ επίσης.
Στη συνέχεια, θα δημιουργήσουμε επίσης ένα κωνικό αποτέλεσμα για το κουμπί. Αυτό το αποτέλεσμα είναι πολύ δύσκολο. Πρώτον, πρέπει να εφαρμόσουμε Χρώμα φόντου: rgb (83,87,93); για τη βάση χρωμάτων του κουμπιού, τότε προσθέτουμε μέχρι και τέσσερα στρώματα κουτιά-σκιές.
μια γραμματοσειρά-οικογένεια: "FontAwesome"; χρώμα: rgb (37,37,37); σκιά κειμένου: 0px 1px 1px rgba (250,250,250,0.1); μέγεθος γραμματοσειράς: 32pt; εμφάνιση: μπλοκ? θέση: σχετική. κείμενο-διακόσμηση: κανένα? Χρώμα φόντου: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1ο Σκιά * / 0px 7px 10px 0px rgb (17,17,17), / * 1ο Σκιά * / inset 0px 1px 1px 0px rgba , 250, 250, .2), / * 3η Σκιά * / ένθετο 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4η σκιά * / πλάτος: 70px; ύψος: 70px; σύνορα: 0; ακτίνα-ακτίνα: 35px; κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 79px;
Υπάρχει επίσης ένας μεγαλύτερος κύκλος στο εξωτερικό του κουμπιού και θα χρησιμοποιήσουμε το :πριν ψευδο-στοιχείο για αυτό αντί να προσθέσετε επιπλέον σήμανση.
α: πριν από την περιεχόμενο: ""; πλάτος: 80px; ύψος: 80px; εμφάνιση: μπλοκ? z-δείκτης: -2. θέση: απόλυτη; Χρώμα φόντου: rgb (26,27,29); αριστερά: -5px; κορυφή: -2px; ακτίνα-ακτίνα: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), εισάγετε 0px 1px 2px rgba (0, 0, 0, 0,5);
Περαιτέρω ανάγνωση: CSS: πριν και μετά ψευδο-στοιχεία (Hongkiat.com)
Λυχνία ένδειξης, ενδεικτικό λαμπάκι
Κάτω από το κουμπί, υπάρχει ένα μικρό φως για να ορίσετε την κατάσταση ενεργοποίησης και απενεργοποίησης. Παρακάτω, εφαρμόζουμε κόκκινο για το χρώμα του φωτός επειδή η ισχύς είναι αρχικά OFF, προσθέτουμε επίσης κουτί-σκιά για να μιμηθεί το φως της λάμψης.
a + span εμφάνιση: μπλοκ? πλάτος: 8px; ύψος: 8px; Χρώμα φόντου: rgb (226,0,0); κουτί-σκιά: ένθετο 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0.5); ακτίνα ακτίνας: 4px; σαφής: και οι δύο? θέση: απόλυτη; κάτω: 0; αριστερά: 42%.
Η επίδραση
Σε αυτό το σημείο το κουμπί μας αρχίζει να φαίνεται καλό και χρειάζεται μόνο να προσθέσουμε κάποια εφέ σε αυτό, για παράδειγμα, όταν πατηθεί το πλήκτρο 'ύπαρξη', θέλουμε το κουμπί να μοιάζει σαν να πιέζεται και να κρατείται προς τα κάτω.
Για να επιτευχθεί το αποτέλεσμα, το πρώτο κουτί-σκιά στο κουμπί θα μηδενιστεί και η θέση θα μειωθεί λίγο. Πρέπει επίσης να ρυθμίσουμε λίγο τις εντάσεις των άλλων τριών σκιών για να ταιριάξουμε τη θέση του κουμπιού.
a: ενεργός box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1ο Σκιά * / 0px 3px 7px 0px rgb (17,17,17), / * 2η Σκιά * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3η σκιά * / ένθετο 0px-10px 35px 5px rgba (0, 0, 0, .5); / * 4η σκιά * / φόντο-χρώμα: rgb (83,87,93); κορυφή: 3px;
Επιπλέον, αφού πατηθεί το κουμπί, θα πρέπει να παραμείνει πατημένο και το εικονίδιο θα πρέπει να «λάμψει» για να δείξει ότι η τροφοδοσία είναι ενεργοποιημένη.
Για να επιτύχουμε ένα τέτοιο αποτέλεσμα, θα στοχεύσουμε το κουμπί χρησιμοποιώντας το :στόχος ψευδο-τάξη, στη συνέχεια, αλλάξτε το χρώμα του εικονιδίου σε λευκό και προσθέστε ένα σκιά κειμένου με λευκό χρώμα επίσης.
α: στόχος 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, , ένθετο 0px-10px 35px 5px rgba (0, 0, 0, .5); Χρώμα φόντου: rgb (83,87,93); κορυφή: 3px; χρώμα: #fff; σκιά κειμένου: 0px 0px 3px rgb (250,250,250);
Περαιτέρω ανάγνωση: Χρήση: στόχος ψευδο-τάξη
Πρέπει επίσης να προσαρμόσουμε το κουτί-σκιά στον κύκλο έξω από το κουμπί, ως εξής.
α: ενεργή: πριν, a: στόχος: πριν από το top: -5px; Χρώμα φόντου: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), εισάγετε 0px 1px 2px rgba (0, 0, 0, 0,5);
Ο δείκτης φωτισμού θα αλλάξει από το προεπιλεγμένο κόκκινο σε πράσινο χρώμα για να υπογραμμίσει ότι η τροφοδοσία είναι ήδη ενεργοποιημένη.
a: target + span κουτί-σκιά: ένθετο 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); Χρώμα φόντου: rgb (135,187,83);
Εφέ μετάβασης
Τέλος, για να επιτύχουμε την ομαλή λειτουργία του κουμπιού, θα εφαρμόσουμε επίσης το ακόλουθο αποτέλεσμα μετάβασης.
Αυτό το απόσπασμα παρακάτω θα προσθέσει συγκεκριμένα τη μετάβαση στο χρώμα ιδιοκτησία και το σκιά κειμένου Για 350ms στο στοιχείο άγκυρας.
ένα μετάβαση: χρώμα 350ms, κείμενο σκιά 350ms; -ο-μετάβαση: χρώμα 350ms, κείμενο-σκιά 350ms? -Μοζ-μετάβαση: χρώμα 350ms, κείμενο-σκιά 350ms? -περιοχή ιστού: χρώμα 350ms, σκιά κειμένου 350ms;
Αυτό το δεύτερο απόσπασμα παρακάτω θα προσθέσει τη μετάβαση για το χρώμα του φόντου και κουτί-σκιά ιδιοκτησίας στην ένδειξη φωτός.
α: στόχος + span μετάβαση: χρώμα φόντου 350ms, κουτί-σκιά 700ms; -ο-μετάβαση: χρώμα φόντου 350ms, κουτί-σκιά 700ms; -moz-transition: χρώμα φόντου 350ms, κουτί-σκιά 700ms; -webkit-transition: χρώμα φόντου 350ms, κουτί-σκιά 700ms;
Τελικό αποτέλεσμα
Έχουμε έρθει σε όλα τα στυλ που χρειαζόμαστε, τώρα μπορείτε να δείτε το τελικό αποτέλεσμα ζωντανά καθώς και να κατεβάσετε το αρχείο προέλευσης από τους παρακάτω συνδέσμους.
- Διαδήλωση
- Λήψη πηγής
Μπόνους: Πώς να το απενεργοποιήσετε
Εδώ έρχεται το μπόνους. Εάν δοκιμάσατε το κουμπί από την παραπάνω επίδειξη, έχετε παρατηρήσει ότι το κουμπί μπορεί να γίνει μόνο μία φορά κλικ στο κουμπί, το οποίο θα το ενεργοποιήσετε, έτσι πώς θα το απενεργοποιήσουμε?.
Δυστυχώς, πρέπει να το κάνουμε με το jQuery, αλλά είναι και πολύ απλό. Παρακάτω είναι ο πλήρης κώδικας jQuery που χρειαζόμαστε.
$ (document) .ready (function () $ ('# κουμπί')) κλικ (function () $ (this) .toggleClass ('on');)); Το απόσπασμα παραπάνω θα προσθέσει την τάξη ON στο άγκυρα και χρησιμοποιήσαμε το toggleClass λειτουργία από το jQuery για να την προσθέσετε. Έτσι, όταν το #κουμπί , το jQuery θα ελέγξει αν έχει προστεθεί ή όχι η κλάση ON: όταν δεν είναι, το jQuery θα προσθέσει την κλάση και εάν έχει προστεθεί, το jQuery θα αφαιρέσει την κλάση.
Σημείωση: Μην ξεχάσετε να συμπεριλάβετε τη βιβλιοθήκη jQuery.
Τώρα πρέπει να αλλάξουμε το στυλ λίγο. Απλά αντικαταστήστε όλες τις :στόχος ψευδο-στοιχείο με το .επί επιλογής κλάσης, ως εξής:
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.on: πριν από το top: -5px; Χρώμα φόντου: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), εισάγετε 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span κουτί-σκιά: ένθετο 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); Χρώμα φόντου: rgb (135,187,83);
Τέλος, ας το δοκιμάσουμε στο πρόγραμμα περιήγησης.
- Διαδήλωση
- Λήψη πηγής
