Κουμπιά CSS: Tutorials και παραδείγματα
Η δημιουργία κουμπιών με το CSS είναι ένα από τα πιο πειραματικά - με τις τεχνικές σχεδιασμού ιστοσελίδων γύρω. Παραδείγματα και σεμινάρια αφθονούν.
Η μεγαλύτερη πρόσφατη τάση στο σχεδιασμό κουμπιών CSS φαίνεται να εξαλείφει εικόνες, ειδικά εικόνες φόντου, από κουμπιά. Αλλά υπάρχουν πολλά άλλα πράγματα που κάνουν οι σχεδιαστές με κουμπιά, μερικά που περιλαμβάνουν εικόνες.
Παρακάτω έχουμε συγκεντρώσει πάνω από είκοσι μαθήματα, παραδείγματα και εργαλεία για τη δημιουργία κουμπιών CSS, τα περισσότερα από τα οποία χρησιμοποιούν το CSS3.
Περιλαμβάνονται κουμπιά που ταιριάζουν σχεδόν σε κάθε στυλ σχεδιασμού. Προσπαθήσαμε να επικεντρωθούμε σε νεώτερες τεχνικές εδώ, αφήνοντας εκτός από τις μακρόχρονες τεχνικές (όπως το συρόμενη πόρτα για τη δημιουργία στρογγυλεμένων γωνιών) που οι περισσότεροι σχεδιαστές είναι ήδη εξοικειωμένοι.
Αν έχετε άλλα μαθήματα ή παραδείγματα που θέλετε να μοιραστείτε, παρακαλούμε να το κάνετε στα σχόλια!
Εκπαιδευτικά σεμινάρια και άρθρα
Ανακαλύψτε ξανά το στοιχείο κουμπιού
Ένα πραγματικά χρήσιμο άρθρο που συζητά το button στοιχείο στο CSS, το οποίο συχνά παραβλέπεται από τους σχεδιαστές. Είναι λίγο παλαιότερο, αλλά εξακολουθεί να έχει αρκετούς χρήσιμες πληροφορίες για τη δημιουργία πιο κομψών κουμπιών με το CSS.
Όμορφα κουμπιά CSS με σύνολο εικονιδίων
Εδώ είναι ένα άλλο άρθρο που μιλά για το πώς να δημιουργήσετε κουμπιά με εικονίδια, αν και χρησιμοποιώντας span τάξεις και όχι το button στοιχείο.
Δημιουργήστε πρακτικά κουμπιά CSS3
Αυτό το φροντιστήριο βίντεο από το Nettuts + δείχνει πώς μπορείτε να δημιουργήσετε πρακτικά κουμπιά CSS3 που συμπεριλαμβάνουν ακόμη και αυτό που φαίνεται να είναι εικόνα είδωλου πτηνών Twitter, αλλά στην πραγματικότητα δημιουργείται εξ ολοκλήρου με το CSS3.
Όμορφα κουμπιά τύπου Photoshop με CSS3
Ενώ τα κουμπιά εδώ δεν είναι ιδιαίτερα προνοητικά όσον αφορά την εμφάνιση, αυτό που είναι εκπληκτικό είναι ότι δημιουργήθηκαν εξ ολοκλήρου χρησιμοποιώντας το CSS3, χωρίς να χρησιμοποιούν εικόνες και βασίζονταν μόνο σε κουμπιά που δημιουργήθηκαν στο Photoshop.
Καλύτερη αλληλεπίδραση κουμπιών και πλοήγησης
Αυτό είναι ένα μεγάλο, απλό σεμινάριο από τον Darren Hoyt για τη δημιουργία καλύτερων συμπεριφορών για τα κουμπιά σας που ενθαρρύνουν τους επισκέπτες να αλληλεπιδρούν με τον ιστότοπό σας.
Super awesome κουμπιά με CSS3 και RGBA
Αυτό το σεμινάριο από το Zurb καλύπτει τη χρήση του CSS3 και του blending alpha χρησιμοποιώντας το RGBA για τη δημιουργία κλιμακωτών κουμπιών με μόνο μία εικόνα PNG.
Δημιουργία όμορφα κουμπιά με κλίση CSS
Ένα σεμινάριο για την κατασκευή ενός κουμπιού χρησιμοποιώντας κλίσεις CSS παρόμοιες με εκείνες που χρησιμοποιούνται από τα Personas του Mozilla για Firefox.
Πώς να σχεδιάσετε ένα σέξι κουμπί χρησιμοποιώντας το CSS
Αυτό το σεμινάριο δείχνει πώς μπορείτε να δημιουργήσετε ένα μεγάλο, ζωντανό κουμπί χωρίς να χρησιμοποιήσετε εικόνες.
Ρεαλιστικά κουμπιά CSS3
Αυτά είναι απλά κουμπιά, που δημιουργήθηκαν εξ ολοκλήρου με το CSS3, συμπεριλαμβανομένων μερικών ψευδο-στοιχείων.
Αρκετά κουμπιά CSS3
Αυτό το σεμινάριο δείχνει πώς μπορείτε να δημιουργήσετε ένα απλό κουμπί ελαφρώς στιλπνότητας, το οποίο είναι κλιμακωτό και μπορεί να δημιουργηθεί σε οποιοδήποτε χρώμα χωρίς εικόνες.
Κουμπιά CSS3 χωρίς εικόνες
Ένα απλό σεμινάριο για τη δημιουργία δυναμικών κουμπιών που χρησιμοποιούν μόνο CSS3 και καμία εικόνα. Υπάρχουν τέσσερις καταστάσεις για κάθε κουμπί, συμπεριλαμβανομένων των αναπήρων, των κυλιόμενων και των πατημένων καταστάσεων.
5 διαφορετικά σεμινάρια δυναμικών κουμπιών σύνδεσης στρογγυλών γωνιών CSS
Αυτή είναι μια συλλογή από πέντε διαφορετικά μαθήματα για τη δημιουργία κουμπιών CSS με στρογγυλεμένες γωνίες. Δύο περιλαμβάνουν τη χρήση εικόνων, αλλά οι άλλες τρεις δεν το κάνουν.
Δημιουργήστε ένα κουμπί CSS3 που υποβαθμίζει όμορφα
Μέχρις ότου όλα τα προγράμματα περιήγησης υποστηρίζουν σωστά το CSS3, πρόκειται να αντιμετωπίσουμε προβλήματα κατά τη χρήση του για να δημιουργήσουμε στοιχεία όπως κουμπιά. Αυτό το σεμινάριο δείχνει πώς μπορείτε να δημιουργήσετε υπέροχα κουμπιά CSS3 που φαίνονται επίσης ωραία σε παλαιότερα προγράμματα περιήγησης, όπως τα IE6 και 7.
Η γραμμή πλοήγησης της Apple χρησιμοποιεί μόνο CSS
Αυτό το σεμινάριο δείχνει πώς μπορείτε να αναδημιουργήσετε το μενού πλοήγησης σε μορφή κουμπιού στην τοποθεσία Web της Apple. Λειτουργεί καλύτερα στο Safari 3+, αλλά εξακολουθεί να φαίνεται ωραία σε άλλα προγράμματα περιήγησης.
Δημιουργήστε ένα κουμπί κλήσης για δράση CSS3
Αυτό το σεμινάριο δείχνει πώς μπορείτε να δημιουργήσετε ένα πλήκτρο κλήσης για δράση εξ ολοκλήρου με το CSS που περιλαμβάνει διαφορετικές καταστάσεις προεπιλογής και αιωρισμού.
Σέξυ κουμπιά με CSS3
Αυτό το απλό σεμινάριο δείχνει πώς μπορείτε να δημιουργήσετε ωραία στυλ κουμπιά με μοναδικές κραδασμούς και ενεργές καταστάσεις. Τα κουμπιά μπορούν να τροποποιηθούν και το χρώμα τους να αλλάξει εύκολα.
Γυαλιστερά κουμπιά χωρίς εικόνες που χρησιμοποιούν μόνο CSS3
Κοιτάζοντας αυτά τα κουμπιά, είναι δύσκολο να πιστέψουμε ότι είναι κατασκευασμένα χωρίς εικόνες, εκτός και αν κοιτάξετε πολύ προσεκτικά. Ο κώδικας είναι περίπλοκος, αλλά το τελικό αποτέλεσμα φαίνεται υπέροχο, γεμάτο με εφέ κίνησης.
Κουμπιά CSS3 με εικονίδια
Αυτό το σεμινάριο δείχνει πώς μπορείτε να δημιουργήσετε κουμπιά CSS3 με διαβαθμίσεις που περιλαμβάνουν επίσης εικόνες εικονιδίων και είναι συμβατά με το πρόγραμμα περιήγησης.
Αναπτύξτε τα δικά σας κουμπιά Google
Αυτό το σεμινάριο δείχνει πώς μπορείτε να δημιουργήσετε επεκτάσιμα κουμπιά στυλ Google με έγχρωμα σύνορα. Τα τελικά αποτελέσματα είναι μινιμαλιστικά και καθαρά.
Παραδείγματα και εργαλεία
10 υπέροχα κουμπιά CSS3 για χρήση στον ιστότοπό σας
Ακολουθεί μια συλλογή από δέκα κουμπιά που μπορείτε να χρησιμοποιήσετε στον ιστότοπό σας. Όλα είναι αρκετά βασικά αλλά δημιουργούνται χρησιμοποιώντας μόνο CSS3 χωρίς εικόνες.
CSS3 κουμπιά κλίσης
Αυτή είναι μια τεράστια συλλογή από κουμπιά CSS3 από το Web Designer Wall. Περιλαμβάνονται ποικίλα σχήματα, μεγέθη και χρώματα, όλα με κλίσεις. Ένα από τα καλύτερα μέρη για αυτούς, όμως, είναι πόσο χαριτωμένα αυτά τα κουμπιά υποβαθμίζονται σε προγράμματα περιήγησης που δεν έχουν πλήρη υποστήριξη CSS3.
Κουζινομηχανή
Το CSS-Tricks προσφέρει αυτόν τον ελεύθερο δημιουργό κουμπιών CSS3. Απλά ορίστε τα χρώματα φόντου για κάθε κατάσταση του κουμπιού, το μέγεθος και τα χαρακτηριστικά κειμένου και θα δημιουργήσει τον κωδικό CSS για εσάς.
Ραδιενεργά κουμπιά
Αυτά τα κουμπιά χρησιμοποιούν κινούμενα γραφικά CSS στο Safari για να δημιουργήσουν ένα παλλόμενο, λαμπερό εφέ. Σε άλλα προγράμματα περιήγησης που υποστηρίζουν το CSS3, είναι ακόμα απόλυτα λειτουργικά και φαίνονται καλά.
Γνωρίστε άλλες τεχνικές για τη δημιουργία φοβερών κουμπιών CSS που δεν αναφέρονται εδώ; Ή έχετε ένα αγαπημένο παράδειγμα; Παρακαλώ μοιραστείτε τα με τα σχόλια!