Κουμπιά στο μοντέρνο σχεδιασμό CSS. Εισαγωγή στα βασικά στοιχεία των σύγχρονων κουμπιών CSS

Επιλέξαμε μερικά κουμπιά CSS, τα οποία, κατά τη γνώμη μου, μπορούν να χρησιμοποιηθούν σε έργα ιστού.

Γεννήτρια κουμπιών CSS3

Κοιτάξτε τη γεννήτρια CSS3 κουμπιά από το Sanwebe:

Ροζ CSS3 κουμπί με γραμματοσειρά Pacifico

Χαριτωμένο ροζ κουμπί ( Εκτός από έναν μικρό κώδικα jquery για να παίξετε μουσική και να αλλάξετε το εσωτερικό κείμενο) Δημιουργήθηκε πλήρως με βάση το CSS3:

Συλλογή κουμπιών 3D

Μια συλλογή κουμπιών 3D που δημιουργήθηκαν χρησιμοποιώντας CSS3:

Κουμπιά Κοινωνικών 3D

Εξοχος Κουτιά ΚοινωνικάΟλοκληρώθηκε με CSS3 και γραμματοσειρά για εικονίδια:

Κινούμενα κουμπιά CSS3

Κινούμενα κουμπιά CSS με μοτίβα φόντου. Δεν μπορεί να λειτουργήσει σε προγράμματα περιήγησης Firefox 3.6 και IE10:

Στρογγυλά κινούμενα κουμπιά CSS3

Ένα άλλο κινούμενα κουμπιά, στα οποία η στροφή του κειμένου όταν αιωρείται το ποντίκι δίνει ένα πραγματικά ελκυστικό αποτέλεσμα:

Κουμπιά καθαρού κύκλου

Εδώ είναι ένα άλλο παράδειγμα των κυκλικών κουμπιών CSS3:

Το CSS3 διακόπτει κουμπιά

Οι καλά διακόπτες που δημιουργήθηκαν χρησιμοποιώντας το CSS3 και τα εικονίδια γραμματοσειρών:

Κινούμενο κουμπί CSS3

Χαριτωμένο τρισδιάστατο κουμπί που δημιουργήθηκε χρησιμοποιώντας CSS3 και γραμματοσειρές Google:

Επιδράσεις των κουμπιών CSS3

Αυτά τα κουμπιά δείχνουν κινούμενα σχέδια χρησιμοποιώντας διάφορες ιδιότητες του CSS3:

Γυαλιστερά κουμπιά CSS3

Τώρα μπορείτε να είστε απολύτως βέβαιοι ότι τα γυαλιστερά κουμπιά μπορούν εύκολα να δημιουργηθούν χρησιμοποιώντας CSS3, χωρίς πλέον Photoshop:

Τρισδιάστατα κουμπιά CSS3

Είναι εκπληκτικό το γεγονός ότι μπορείτε να κάνετε με τη βοήθεια των ψευδο-στοιχείων CSS3: Πριν και: Επόμενη. Αξιολογήστε τα εντυπωσιακά τρισδιάστατα κουμπιά:

Διακόπτης CSS3.

Ένα παράδειγμα ενός κουμπιού διακόπτη στο CSS3 χωρίς χρήση JavaScript:

Την επίδραση ενός τρισδιάστατου κουμπιού κύλισης

Η επίδραση της τρισδιάστατης στροφής όταν πιέζεται το κουμπί που δημιουργήθηκε από το CSS3:

Κουμπιά μάρκας

Όμορφα κουμπιά CSS των δημοφιλών εμπορικών σημάτων χρησιμοποιώντας εικονίδια bootstrap:

Σκούρο στρογγυλό κουμπί

Στρογγυλό κουμπί χρησιμοποιώντας jquery για να δώσετε ένα αποτέλεσμα πτώσης ενώ πατάτε το κουμπί:

Διακόπτης CSS3.

Ο διακόπτης δημιουργήθηκε χρησιμοποιώντας CSS3:

Όμορφα επίπεδη κουμπιά

Συλλογή επίπεδων κουμπιών CSS για όλες τις περιπτώσεις, χωρίς κινούμενα σχέδια και εφέ:

Κουμπιά πρόσβασης κοινωνικού δικτύου

Πιο ελκυστική έκδοση κουμπιών Γενική Πρόσβασηαλλά χωρίς λειτουργικό. Σύμφωνα με τον προγραμματιστή, πρέπει να εργαστείτε στο IE7 +:

Χριστουγεννιάτικο κουμπί

Χριστουγεννιάτικο κουμπί CSS χρησιμοποιώντας δεδομένα: URLS - μέθοδος για την ενσωμάτωση εικόνων απευθείας στο έγγραφο:

Μαλακό κουμπί

Γυαλιστερό γυαλιστερό κουμπί που δημιουργήθηκε με CSS3:

Μαλακό κουμπί μαλακού κουμπιού

Τα κουμπιά χρησιμοποιούν μόνο χαρακτήρες Unicode, τα οποία σας επιτρέπει να χρησιμοποιείτε κείμενο ή εκροές:

Μεγάλα τρισδιάστατα κινούμενα κουμπιά CSS3

Ένα άλλο σύνολο τρισδιάστατων κινούμενων κουμπιών CSS για τοποθεσίες. Το Animation γίνεται χρησιμοποιώντας τις ιδιότητες κινούμενων εικόνων και κλειδιών:

Metal css3 κουμπιά

Συλλογή μεταλλικών κουμπιών CSS3, χαρακτήρες στους οποίους δημιουργήθηκαν χρησιμοποιώντας τη γραμματοσειρά Pigtos χρησιμοποιώντας @ Font-Face. Για μεταλλικό αποτέλεσμα, εμπλέκονται οι ιδιότητες της σκιάς του κουτιού και της γραμμικής κλίσης:

Στρογγυλά κουμπιά CSS3

Μια άλλη συλλογή στρογγυλών κινούμενων κουμπιών στο CSS3:

CSS3 Κουμπιά κοινωνικού δικτύου με Τύπου

Τα κουμπιά χρησιμοποιούν απλές ιδιότητες CSS3, όπως κλίσεις, σκιές κουτιού, σκιές κειμένου και ούτω καθεξής. Η κατάσταση της "αναμονής" και του "ενεργού" περιλαμβάνεται επίσης σε αυτό το σύνολο:

Απλά κουμπιά CSS3

Όμορφα κουμπιά CSS:

Τρισδιάστατο κουμπί λήψης

Αυτό το τρισδιάστατο κουμπί χρησιμοποιεί τον προοπτικό μετασχηματισμό. Λειτουργεί μόνο σε προγράμματα περιήγησης που βασίζονται στο webkit:

Κουμπιά κοινωνικού δικτύου CSS3

Μεγάλο κουμπί

Στερεό γυαλιστερό κουμπί CSS3 με αποτέλεσμα σκιάς στο κάτω μέρος. Το κουμπί χρησιμοποιεί μια γραμματοσειρά που ονομάζεται Sansita One από τη συλλογή Google:

Απλά κουμπιά

Μερικοί Απλά CSS. Κουμπιά:

CSS3-Κουμπί κοινωνικά δίκτυα

Απλά κουμπιά CSS

Ένα σύνολο απλών κουμπιών CSS. Είναι εύκολο να ρυθμιστούν και να χρησιμοποιηθούν. Μπορούν να ενσωματωθούν εύκολα με τη γραμματοσειρά ή άλλη βιβλιοθήκη:

Κουμπιά με τη μορφή τσιπ πόκερ

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

Πλήκτρο ολίσθησης

Εννοια Κουμπιά ολίσθησης CSS:

Κουμπιά μενού διαχειριστή

Πίνακα διαχειριστή ( Μενού ή πλοήγησης) Χρησιμοποιώντας το CSS3 και το fontawesome πλαίσιο. Κατά τη μετάβαση στο κουμπί, η ενεργή κλάση προστίθεται χρησιμοποιώντας το JQuery:

Ένα κουμπί ραμμάτων

Απλό κουμπί με γραμμή, επιδεικνύοντας δυνατότητες CSS3 χωρίς χρήση εικόνας φόντου:

Περιστρεφόμενο κουμπί

Στρογγυλό κουμπί με περιστρεφόμενο όριο για την ένδειξη καθοδήγησης του ποντικιού:

Κουμπί στο CSS3.

Το μαλακό κουμπί που δημιουργήθηκε από το CSS3 με βάση αυτό το παράδειγμα:

CSS3 κουμπί με εκτεταμένη κάρτα

Αυτά τα κουμπιά CSS μοιάζουν με κάρτες που γλιστρούν από το μανίκι. Μπορούν να χρησιμοποιηθούν για την εμφάνιση πληροφοριών που πρέπει να είναι κρυμμένες μέχρι να επιλέξει ο χρήστης:

CSS3 Κουμπιά κινούμενων εικόνων με τη μορφή καραμελών

Κουμπί κίνησης για να εμφανιστεί η κατάσταση λήψης:

CSS3 Switches

Όμορφους διακόπτες που χρησιμοποιούν jquery για να διακόπτη κλάσης:

Γυαλιστερά κουμπιά

Σετ όμορφων κουμπιών για τον ιστότοπο CSS. Διάφορες ιδιότητες χρησιμοποιούνται για να δώσουν τρισδιάστατο γυαλιστερό τύπο:

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

Κατεβάστε

Σχετικά άρθρα σχετικά με αυτό το θέμα:

Ανοίξτε το αρχείο στον επεξεργαστή index.html Από την πηγή, βρίσκουμε την ετικέτα ενδιαφέροντος για εμάς. Στην περίπτωσή μου:

Από αυτόν τον κώδικα πάρτε μια συμβολοσειρά με μια τάξη Κουμπί..

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

Αντιγράψτε το και εισάγετε μεταξύ ετικετών Στο αρχείο ευρετηρίου του έργου του.

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

Στην περίπτωσή μας, αυτή η τάξη Κουμπί-Winona. Επομένως, θα προστεθούν στυλ με το όνομα Winona.

Είναι πολύ βολικό, γιατί Εάν θέλετε να αλλάξετε το σχεδιασμό των κουμπιών, θα πρέπει να αντικαταστήσετε μόνο το όνομα της πρόσθετης κλάσης στην ετικέτα . Και τα στυλ έχουν ήδη διευκρινιστεί στο αρχείο button.css.!

Σε αυτό το άρθρο θα πούμε για διάφορους τρόπους για να δημιουργήσετε το κουμπί CSS. Αλλά η κατανόηση της διαφοράς μεταξύ επίπεδου UI και σχεδιασμού υλικού δεν έχει νόημα αν δεν γνωρίζετε ποια εξαρτήματα πρέπει να εφαρμοστούν. Ας μιλήσουμε γρήγορα στα βασικά στοιχεία της δημιουργίας κουμπιών χρησιμοποιώντας το CSS.

Βασικά κουμπιά CSS

Υπάρχουν πολλά "μη τεχνικά" πρότυπα κουμπιών:

1. Διαθεσιμότητα - έχει πρωταρχική σημασία. Οι χρήστες με αναπηρίες και τα παλιά προγράμματα περιήγησης πρέπει να έχουν εύκολη πρόσβαση στα κουμπιά.
2. Απλό κείμενο - Γράψτε στα κουμπιά Απλό και σύντομο κείμενο. Οι χρήστες πρέπει να κατανοήσουν αμέσως τον σκοπό του κουμπιού και όπου θα τους οδηγήσουν.

Σχεδόν όλα τα κουμπιά στη χρήση του Διαδικτύου με μια αλλαγή στο χρώμα των πλαισίων και των σκιών. Αυτό μπορεί να γίνει με τη βοήθεια της ψευδοκάλως. Θα επικεντρωθούμε σε δύο από αυτά :: Τοποθέτηση και: Ενεργός. Pseudo-class: Τοποθετήστε το δείκτη του αιτούντος για τη συμπεριφορά CSS όταν τοποθετείτε το δείκτη του ποντικιού. Κωδικός: Ενεργός όταν ο χρήστης πίεσε το κουμπί του ποντικιού, αλλά και δεν την άφησε να πάει.

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

Χρώμα

Αλλαγή κουμπιών CSS Χρώμα χρησιμοποιώντας διάφορες ιδιότητες: χρώμα, φόντο-φόντο και σύνορα. Πρώτα θα αντιμετωπίσετε πώς να επιλέξετε το χρώμα του κουμπιού:

1. Συνδυασμοί λουλουδιών - Χρησιμοποιήστε χρώματα που συμπληρώνουν ο ένας τον άλλον. Colorhexa. - ένα εξαιρετικό εργαλείο για την αναζήτηση συνδυασμένων χρωμάτων.
2. Παλέτα τήρηση - Εάν ψάχνετε για μια παλέτα χρωμάτων, πηγαίνετε lolcolors..

Σκιά

Με τη σκιά κουτί, μπορείτε να προσθέσετε τη σκιά γύρω από το αντικείμενο. Αυτή η ιδέα εφαρμόζεται σε επίπεδο UI και σχεδιασμό υλικού. Περισσότερες πληροφορίες σχετικά με την ιδιότητα Shadow Box-Shadow μπορούν να διαβαστούν MDN..

Χρόνος ομαλής μετάβασης

Η διάρκεια της μετάβασης σε ακίνητα προσθέτει ένα προσωρινό πλαίσιο CSS αλλάζει . Στυλ των κουμπιών χωρίς ομαλή μετάβαση αλλάζει άμεσα στα στυλ της ψευδοκλασιάς: το αιωρούμενο, το οποίο μπορεί να τρομάξει τον χρήστη. Στο ακόλουθο παράδειγμα, το στυλ του κουμπιού αλλάζει ομαλά (για 0,5 δευτερόλεπτα): on: hover:

Αλλαγή χρώματος (ακτίνα συνοριακών: 5px; Μέγεθος γραμματοσειράς: 20px; padding: 14px 80px; δρομέας: δείκτης; Χρώμα: # 00A6FF χρώμα: # 00A6FF; Γραμματοσειρά: "Roboto" Γραμματοσειρά γραμματοσειράς: 100; σύνορα: 1px στερεό #fff; box-σκιά: 2px 2px 5px # Afe9ff; διάρκεια μετάπτωσης: 0,5s; -Webkit-διάρκεια-διάρκεια: 0,5s; -MOZ-μετάβαση: 0,5 δευτερόλεπτα. ) .Color-Αλλαγή: Τοσίου (Χρώμα: # 006398; Σύνορα: 1px Στερεά # 006398; Box-Shadow: 2px 2px 20px # Afe9ff;)

Και μοιάζει με αυτό:

Προβολή παραδείγματος

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

Διάρκεια μετάπτωσης: 0,5s / * Κανονική καταχώρηση, έργα σε όλα τα σύγχρονα προγράμματα περιήγησης * / -Webkit-Διάρκεια: 0,5s. / * Βοηθά ορισμένες εκδόσεις του Safari, Chrome και Android * / -Moz-turitent: 0,5s. / * για τον Firefox * /

Επαναφορά στυλ κουμπιών

Για να δημιουργήσετε το πρόγραμμα περιήγησης ρυθμίζοντας την προεπιλεγμένη τιμή για το στυλ του CSS, μπορείτε να εγκαταστήσετε προσαρμοσμένα στυλ:

button.Your-Button-Class (-Webkit-Εμφάνιση: Κανένα; -moz-Εμφάνιση: Κανένα;)

Είναι καλύτερα να το εφαρμόσετε αυτό στις τάξεις των στοιχείων κουμπιού και όχι κάθε κουμπί ξεχωριστά.

Τρία κουμπιά στυλ

1 - απλό μαύρο και άσπρο

Προβολή παραδείγματος

Τέτοια κουμπιά συνδυάζονται καλά με πολλά διαφορετικά στυλ. Αυτό το αποτέλεσμα βασίζεται στην αντίθεση του ασπρόμαυρου.

Εξετάστε τον κώδικα του μαύρου κουμπιού με λευκό φόντο. Για να επαναφέρετε το κουμπί σε άλλο χρώμα, αλλάξτε το κουμπί cSS Styles Όλα τα λευκά και μαύρα σημάδια:

Suit_and_tie (Χρώμα: Λευκό, Μέγεθος γραμματοσειράς: 20px; Font-Face: Helvetica; Κείμενο-διακόσμηση: Κανένα; Σύνορα: 2px Στερεό λευκό; Σύνορα-ακτίνα: 20px; Διάρκεια: .2s; -Webkit-treation: .2S; -MOZ-TRASTITE-Διάρκεια :.2s; φόντο-Χρώμα: Μαύρο; Padding: 4px 30px;) .Suit_and_Tie: Τοποθέτηση (Χρώμα: Μαύρο, Χρώμα Ιστορικό :.2s; -Webkit- Διάρκεια μετάπτωσης: .2s; -MOZ-μετάβαση: .2s;)

Στα παραπάνω στυλ, μπορεί να φανεί ότι οι ιδιότητες της γραμματοσειράς και του φόντου-χρώματος αλλάζουν τις τιμές τους με την ιδιότητα μετάβασης.2S. Μπορείτε να πάρετε τα χρώματα των αγαπημένων σας εμπορικών σημάτων και να δημιουργήσετε το δικό σας κουμπί. Τα χρώματα των εμπορικών σημάτων μπορούν να βρεθούν Brandcors..

2- Κουμπιά επίπεδη UI

Το Flat Ui επικεντρώνεται στον μινιμαλισμό σε CSS HTML CSS - περισσότερες ενέργειες, λιγότερες κινήσεις. Συνήθως γυρίζω από τα μαύρα και λευκά κουμπιά σε επίπεδη UI, όταν το έργο μου αρχίζει να κερδίζει σχήμα. Τα επίπεδη κουμπιά UI έχουν μια μινιμαλιστική εμφάνιση και είναι κατάλληλα για τα περισσότερα σχέδια.

Βελτιώστε το κουμπί μας προσθέτοντας κίνηση σε αυτό για να μιμηθεί το εφέ 3D.

Προβολή παραδείγματος

Θα εξετάσουμε το πρώτο κουμπί:

Τυρκουάζ (περιθώριο: 10px; πλάτος: 100px; φόντο: # 1ABC9C; border-body: # 16A085 3px στερεό; στέλεχος περιθωρίου: # 16A085 1px στερεό; γραμμή-ακτίνα: 6px; Κείμενο-Ευθυγράμμιση: Κέντρο; Χρώμα: Λευκό, Padding: 10px; Float: Αριστερά, Μέγεθος γραμματοσειράς: 12px; Γραμματοσειρά: 800;) .Tuquoise: hover (αδιαφάνεια: 0.8;) .tuqueise: ενεργό (πλάτος: 100px; Ιστορικό: # 18b495; Border Body: # 16A085 1PX στερεό, στέλεχος περιθώρια: # 16A085 1PX στερεό; Στρίψτε δεξιά: # 16A085 1px στερεό; γραμμή ακτίνας: 6px; Κείμενο-ευθυγράμμιση: Κέντρο; Χρώμα: Περιθώριο -Το: 3PX;]] Float: Αριστερά;)

Το κουμπί CSS έχει τρία κράτη: κανονικά,: Τοποθετήστε το ποντίκι και: Ενεργό.

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

Αντί να προσδιορίζουν ένα στερεό πλαίσιο συνόρων, χρησιμοποιούνται εδώ οι ιδιότητες του συνοριακού πυθμένα, οι συνοριακές και οι σωστές ιδιότητες, οι οποίες δημιουργούν ένα αποτέλεσμα 3D βάθους.

Pseudo-class: ενεργή χρησιμοποιείται συχνά σε επίπεδη κουμπιά UI. Όταν το κουμπί μας γίνεται: ενεργή συμβαίνει δύο πράγματα:

1. : Μεταβολές του συνοριακού πυθμένα από το 3px έως το 1px. Η σκιά κάτω από το κουμπί μειώνεται και το κουμπί πέφτει σε ένα ζευγάρι εικονοστοιχείων. Αυτή η αλλαγή επιτρέπει στον χρήστη να αισθάνεται ότι πατάτε το κουμπί.
2. Το χρώμα του φόντου σκουραίνει, μιμείται την αντιστάθμιση του κουμπιού από το χρήστη στην οθόνη. Αυτό που υπενθυμίζει επίσης στον χρήστη ότι πίεσε ένα κουμπί.

Σε επίπεδη UI, οι μινιμαλιστικές κινήσεις των κουμπιών αποτιμώνται », αποτελεσματικός Μεγάλη ιστορία " Πολλοί προσομοιώνουν τη μετατόπιση του κουμπιού χρησιμοποιώντας: Border-Bottom. Αξίζει να σημειωθεί ότι σε επίπεδη UI υπάρχουν κουμπιά που δεν κινούνται καθόλου, αλλά αλλάζουν μόνο το χρώμα.

Σχεδιασμός υλικού.

Ο σχεδιασμός των υλικών είναι μια προσέγγιση του σχεδιασμού που προωθεί την ιδέα της μετάδοσης πληροφοριών με τη μορφή καρτών με διαφορετικά κινούμενα σχέδια για να προσελκύσουν την προσοχή. Google που αναφέρεται στη σελίδα Αρχική σελίδα σχεδιασμού υλικού. Τρεις βασικές αρχές:

• Η λέξη "υλικό" είναι μια μεταφορά.
• Μονοτονία, γραφικά, επιθετικότητα;
• Η κίνηση μεταδίδει μια τιμή.

Για να κατανοήσετε καλύτερα τις τρεις αυτές αρχές, ρίξτε μια ματιά στο σχεδιασμό υλικού σε δράση:

Προβολή παραδείγματος

Αυτά τα κουμπιά CSS εφαρμόζει δύο βασικές ιδέες - το κιβώτιο και το πολυμερές ιδιοκτησίας.

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

υποβάλλουν

/ * Αυτή η συμβολοσειρά προσθέτει επίδραση * /

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

Τώρα ας μιλήσουμε για τον κώδικα CSS που εφαρμόζει τις αρχές του σχεδιασμού των υλικών:

Σώμα (Χρώμα Ιστορικό: # F9F9F9; FONT-Face: RobotoDraft, "Helvetica Neue";) / * Κουμπί * / .Button (οθόνη: Inline-Block; θέση: συγγενής; πλάτος: 120px; Ύψος: 32px; ύψος γραμμής : 32px; συνοριακή ακτίνα: 2px, μέγεθος γραμματοσειράς: 0.9em; φόντο-Χρώμα: #FFF; Χρώμα: # 646464; Περιθώριο: 20px 10px; μετάβαση: 0,2s; μεταβατική καθυστέρηση: 0,2s; Box-Shadow: 0 2px 5px 0 rgba (0, 0, 0, 0,26).) .Button: ενεργή (σκιά κουτιού: 0 8px 17px 0 rgba (0, 0, 0, 0,2); μετάβαση-καθυστέρηση: 0s;) / * misc * / .Button.Grey (φόντο-χρώμα: #ee;) .Button.Blue (Χρώμα Ιστορικό: # 4285F4; Χρώμα: #FFF;) .Button.Green (Χρώμα: # 0f9d58; Χρώμα: # 0f9d58; .Center (κείμενο-ευθυγράμμιση: κέντρο;)

Όλα τα κουμπιά CSS χρησιμοποιούν την ιδιότητα σκιάς κουτιού. Διαγράψτε ολόκληρο τον κωδικό CSS και δείτε πώς λειτουργεί η σκιά κουτί:

Κουμπί (μετάβαση: 0,2s; μετάβαση-καθυστέρηση: 0,2s; σκιά κουτιού: 0 2px 5px 0 rgba (0, 0, 0,26);) .Button: ενεργή (μεταβατική καθυστέρηση: 0s; Box-Shadow: 0 8px 17px 0 RGBA (0, 0, 0, 0,2);)

Η ιδιότητα σκιάς κουτιού χρησιμοποιείται στο κουμπί CSS Styles για να προσθέσετε λεπτή σκιά προς τα αριστερά και κάτω από κάθε κουμπί. Όταν πατήσετε, η σκιά αυξάνεται ελαφρά και γίνεται ελαφρύτερα. Αυτό το κίνημα μιμείται την επίδραση μιας 3D σκιάς, η οποία, όπως ήταν, πηδάει από τη σελίδα στον χρήστη. Το αποτέλεσμα καταχωρείται σε στυλ σχεδιασμού υλικών και τις αρχές της.

Vlad merzehevich

Τα τυποποιημένα κουμπιά που δημιουργήθηκαν μέσω της ετικέτας

ή , Φυσικά, φαίνεται καλό, αλλά μια προσπάθεια να αλλάξει η εμφάνισή τους μέσα από στυλ οδηγεί σε ένα τρομερό αποτέλεσμα. Τα κουμπιά χαιρετούν τις διεπαφές του δέκα ετών με τη γωνιώδη τους (Εικ. 1). Φυσικά, μια τέτοια μεταμόρφωση εμφανίζεται μόνο όταν χρησιμοποιεί τις ιδιότητες του φόντου και των συνόρων, με άλλα λόγια, είναι αδύνατο να αλλάξετε το χρώμα του κουμπιού και το πλαίσιο γύρω από αυτό.

Σύκο. 1. Πηγή και τροποποιημένο κουμπί

Για να αλλάξετε δραματικά την προβολή του κουμπιού, μπορείτε να χρησιμοποιήσετε τις εικόνες, αλλά σε σύγκριση με τις δυνατότητες του CSS 3 Αυτή η επιλογή φαίνεται τώρα στο σπίτι.

Ως βάση, πάρτε το αρχικό κουμπί στο πρόγραμμα περιήγησης, το οποίο περιέχει γραμμική κατακόρυφη κλίση και στρογγυλεμένες άκρες.

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

Μοζ-συνοριακή ακτίνα: 5px; / * Firefox * / -Webkit-Border-Racius: 5px; / * Safari 4 * / Ακτίνα συνόρων: 5px; / * IE 9, Safari 5, Chrome * /

Προβολή κουμπιών Β. Διαφορετικά προγράμματα περιήγησης που φαίνεται στο ΣΧ. 2.

Σύκο. 2. Κουμπιά με στρογγυλεμένες γωνίες

Γενικά, όλα αναμένονται. Οι παλαιότερες εκδόσεις IE δεν υποστηρίζουν το CSS 3, τα υπόλοιπα κάνουν τις γωνίες που χρειάζεστε σωστά. Η όπερα για κάποιο λόγο δεν εμφανίζει το προεπιλεγμένο υπόβαθρο, καθώς άλλα προγράμματα περιήγησης, αλλά η όπερα θα έρθει επίσης σε μια ειδική συζήτηση.

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

Ιστορικό: -moz-γραμμική-κλίση (# 00BBD6, #EBFFFF);

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

Chrome, Safari.

Ιστορικό: -Webkit-κλίση (γραμμική, 0 0, 0 100%, από (# 00BBD6), σε (#EBFFFF)).

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

Internet Explorer.

Φίλτρο: Progid: dximagetransform.microsoft.gradient (startcolorstr \u003d "# 00BBD6", endcolorstr \u003d "# ebffff");

Το πρόγραμμα περιήγησης IE πηγαίνει τον δικό του τρόπο και για διαφορετικά αποτελέσματα εφαρμόζει την ιδιότητα του φίλτρου, συμπεριλαμβανομένης της κλίσης. Εδώ όλα είναι ασήμαντα, γράφεται μόνο το αρχικό και το τελικό χρώμα της κλίσης.

Η όπερα ανάπαυσης, στις κλίσεις της πληροφορικής δεν εφαρμόζονται ακόμη.

Συλλέγουμε όλες τις ιδιότητες για προγράμματα περιήγησης, γωνίες και κλίσεις (Παράδειγμα 1).

Παράδειγμα 1. Κουμπιά με Γραμμική κλίση

Κουμπί προέλευσης

Νέο κουμπί

Αποδείχθηκε αρκετά όμορφο (Εικ. 3), αλλά υπάρχει επίσης Ρητές διαφορές Από το αρχικό κουμπί - φαίνεται επίπεδη, σαν ένα διοικητικό συμβούλιο.

Σύκο. 3. Προβολή κουμπιού με κλίση

Μπορείτε να κάνετε το κουμπί της επιθυμητής φόρμας ξανά την κλίση, "παίζοντας" με λουλούδια. Δύο τιμές της κλίσης δεν κάνουν πλέον, ευτυχώς, ο Firefox και το Safari προσφέρουν μια λύση.

Ιστορικό: -Moz-γραμμική-κλίση (# D0ecf4, # 5BC9E1, # D0ecf4);

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

Chrome, Safari.

Ιστορικό: -Webkit-κλίση (γραμμική, 0 0, 0 100%, από (# d0ecf4), σε (# d0ecf4), χρώμα-στάση (0,5, # 5bc99e1)).

Η παράμετρος χρωμάτων-διακοπής καθορίζει το σημείο εφαρμογής του νέου χρώματος. Η τιμή ποικίλλει από 0 έως 1.

Παράδειγμα 2. Κουμπιά με βελτιωμένη κλίση

HTML 5 CSS 2.1 CSS 3 IE 9 CR OP SA FX

Το αποτέλεσμα του παραδείγματος φαίνεται στο ΣΧ. τέσσερα.

Σύκο. 4. Κλίση, ποια είναι η κλίση

Ομοίως, μπορείτε να δημιουργήσετε οποιεσδήποτε άλλες κλίσεις στο κουμπί ή άλλο στοιχείο (εικ. 5). Αλλά αυτό γίνεται ήδη μόνος σας, για το τι έχει προσθέσει το εργαστήριο.

Σύκο. 5. Τέτοια διαφορετικά κουμπιά

Θα συνοψίσω. Μπορείτε να κάνετε ένα κουμπί με μια κλίση και στρογγυλεμένες γωνίες χωρίς εικόνες. Ωστόσο, με τα προγράμματα περιήγησης, υπάρχει μια κατανομή και τατάρια. Η Όπερα δεν ξέρει πώς να εργάζεται με κλίσεις, στο IE 9 υπάρχει ένα δυσάρεστο σφάλμα με ένα συνδυασμό κλίσης με γωνίες (Εικ. 6).

Σύκο. 6. Υπόβαθρο επικάλυψης στις γωνίες στο IE 9

Λοιπόν, εφ 'όσον κάνουμε "ωραιότητα" για browsers Firefox, Σαφάρι και χρώμιο.