Web Συμβουλή: Για μια επαναχρησιμοποιούμενες "Κουμπί" Κλάση

Οι ιστοσελίδες είναι γεμάτα κουμπιά. Πλοήγηση, συνδέσεις, "δίπλα" κουμπιά, "υποβάλει" κουμπιά, "OK" κουμπιά, "κοντά" κουμπιά ... ο κατάλογος συνεχίζεται. Όταν πηγαίνετε για τη δημιουργία μιας νέας ιστοσελίδας, οι πιθανότητες είναι η μετάβασή του να έχουν πολλά κουμπιά. Κάνουν τη ζωή ευκολότερη για τον εαυτό σας, δημιουργώντας μια τάξη κουμπί που μπορείτε να επαναχρησιμοποιήσετε ξανά και ξανά σε μορφή HTML σας κάθε φορά που χρειάζεστε ένα κουμπί.

Δεν είναι μόνο αυτό χάρη σε εσάς, αλλά είναι καλό για τους χρήστες και την αισθητική σας επίσης. Συνοχή αποτελεί βασικό παράγοντα για την ευχρηστία. Ας ξεκινήσουμε.

Κλίση Πλαίσιο για το κουμπί

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

Αυτή η κλίση φόντο θα επαναλάβω σε οριζόντια θέση, έτσι κουμπιά μπορεί να είναι θετική ή αρνητική, όπως τους έχουμε ανάγκη, και δεν πρέπει να περιορίζεται από τις διαστάσεις του γραφικού. Ας δημιουργήσουμε την κλίση στο Photoshop. Δημιουργήστε ένα νέο έγγραφο 20px πλάτους 75px ψηλά. Γραφικό αυτό θα μπορούσε να είναι τόσο λεπτό όσο 1px δεδομένου ότι είναι ακριβώς πρόκειται να επαναληφθεί οριζόντια, αλλά θα την αφήσει σε 20px ώστε να μπορούμε να δούμε τι κάνουμε. Η διαφορά μέγεθος του αρχείου είναι αμελητέο έτσι κι αλλιώς.

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

Τώρα διπλό κλικ σε αυτό το στρώμα στην παλέτα στρώματα (Παράθυρο> Layer) για να εμφανιστεί το στυλ στρώμα. Κάντε κλικ στο στυλ Gradient Overlay. Από προεπιλογή, θα πρέπει να έχετε μια ευθεία επάνω και προς τα κάτω κλίση του λευκού σε μαύρο. Αυτό είναι καλό, κάντε κλικ στην κλίση προεπισκόπηση και να αλλάξει τα χρώματα σε κάτι πιο κατάλληλο για το ύφος κουμπί σχεδιασμό σας. Στην περίπτωση αυτή, μερικά ωραία κορεσμένα κόκκινα θα κάνει:

Έκπτωση από το έγγραφό σας (περιέργως, PNG-24 είναι συχνά η καλύτερη προκαθορισμένα για εικόνες όπως αυτή. Υψηλότερη ποιότητα, το χαμηλότερο μέγεθος αρχείου). Χρησιμοποιώντας ένα έξυπνο σύμβαση ονομασίας όπως το "κουμπί-bg.png". Βεβαιωθείτε ότι αποθηκεύετε PSD σας για αυτό, ποιος ξέρει πότε μπορεί να θέλετε να μεταβείτε πίσω εκεί και να τροποποιήσει τα χρώματα, τη θέση της, η κλίση, ή οποιαδήποτε άλλη λεπτές λεπτομέρειες.

CSS για το κουμπί

Τώρα θα πρέπει να δημιουργηθεί κάποια CSS για γενική κατηγορία κουμπί μας που χρησιμοποιεί αυτό το νέο πλαίσιο. Θα χρησιμοποιήσουμε μια τάξη ". Κουμπί". Απλό, σαφές, και γενικά. Αυτό είναι έξυπνο κώδικα. Δεν θέλουμε να κάνουμε κάτι για την συγκεκριμένη όπως "# # mainContent nav li a.button", επειδή το νόημα του παρόντος είναι ότι η κατηγορία είναι γενική και reseable οπουδήποτε στη σελίδα.

Εδώ είναι πώς θα δημιουργήσει αυτή την κατηγορία:

.button { background: url(images/button-bg.png) repeat-x top center #650606; border: 1px solid white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 8px; color: white; font-weight: bold; font-size: 12px; text-align: center; } .button:hover { background: white; border: 1px solid red; color: black; } 

Πω πω ότι είναι ένα κομμάτι από μια μπουκιά για huh δήλωση CSS; Κάθε κομμάτι της, είναι σημαντικό όμως. Ας περάσουν από κάθε χαρακτηριστικό.

• Ιστορικό: αυτό είναι που εφαρμόζεται η κλίση εικόνα που δημιουργήσαμε. Ανακοίνωση για την "κορυφή" ρύθμιση, η οποία διατηρεί κάθετα ευθυγραμμιστεί με την κορυφή του κουμπιού και ότι η εικόνα επαναλαμβάνει οριζόντια με "επαναλαμβάνω-x". Επίσης ανακοίνωση υπάρχει ένα hex-κωδικό που δηλώθηκαν για το χρώμα φόντου. Αυτή η τιμή έχει οριστεί για το ίδιο χρώμα με το κάτω μέρος της εικόνας της κλίσης. Ακριβώς σε περίπτωση που αυτό το κουμπί μεγαλώνει πιο ψηλή από την εικόνα, το χρώμα θα πρέπει να συνεχιστεί όμορφα.
• Border: A single-pixel λευκό περιθώριο εφαρμόζεται εδώ. Αν το κουμπί μας είναι πάνω από λευκό, αυτό θα αόρατο, αλλά επειδή θέλω να χρησιμοποιήσετε ένα χείλος για την κατάσταση αιωρείται, η κανονική κατάσταση θα χρειαστεί μια πολύ σύνορα. Διαφορετικά, θα υπάρξει μια μικρή "άλμα" για κυμανθούν ότι είναι ανεπιθύμητη. Τα επόμενα δύο μορφές είναι να γύρο στις γωνίες για το κουμπί. Το πρώτο είναι ειδικά για Mozilla βάση φυλλομετρητές (Firefox, κοπάδι ...), η δεύτερη είναι ειδικά για Webkit με βάση browsers (Safari, Konqueror ...). Άλλα προγράμματα πλοήγησης (IE) δεν θα δείτε τη στρογγυλεμένη γωνία, αλλά δεν πειράζει καθόλου δεν φάουλ.
• Padding: Αυτό είναι ζωτικής σημασίας να διατηρήσει το κείμενο μακριά από τα άκρα του κουμπιού. Δίνει το κουμπί κάποια σώμα. Καθιστά πιο κουμπί-όπως και πιο εύκολο να κάνετε κλικ.
• Χρώμα: Το παρελθόν μας είναι ένα σκούρο κόκκινο χρώμα, ώστε να δείξει το κείμενο επάνω, λευκό είναι καλό. Ακριβώς σε περίπτωση που οι εικόνες απενεργοποιηθεί σε ένα πρόγραμμα περιήγησης, το φόντο του κουμπιού μας θα εξακολουθήσει να είναι σκούρο κόκκινο επειδή θέσαμε ότι το κουμπί της, καθώς, τόσο λευκό εδώ είναι απολύτως ασφαλής.
• Font-size/weight/text-align: Λίγο πολύ αυτονόητα εδώ. Κανονικά θα μπορούσα να μην κείμενο σε μέγεθος PX αξίες, αλλά στην περίπτωση ενός κουμπιού, καθιστώντας το επόμενο δεν είναι το μέγεθος-θέση σε IE 6 θα μπορούσε να είναι ιδανικό για τη συνοχή.
• Hover: Αυτό είναι ό, τι είναι απαραίτητο για να καταστεί το κουμπί μας πραγματικά αισθάνεται σαν ένα κουμπί. Κουμπιά κάνουν κάτι όταν μεταφερθεί. Μας θα στραφούν άμεσα σε ένα άσπρο φόντο με μαύρο κείμενο και με ένα κόκκινο περίγραμμα. Πολύ έντονη, πολύ προφανώς ένα κουμπί.

Χρήση του κουμπιού μας σε κώδικα

Επειδή η τάξη μας είναι τόσο γενικής χρήσης, μπορούμε να το χρησιμοποιήσουμε οπουδήποτε!

Υπερσυνδέσμου Τακτική ol »:

 <a href="/home" class="button">Go Back Home</a> 

Πραγματικά μεγάλη σύνδεση:

 <a href="/contact" class="button">Visit The General Contact Form Page</a> 

Υποβολή κουμπί:

 <input type="submit" class="button">Submit</input>