Κουμπιά CSS. Πλεονεκτήματα. Στυλ. Αισθητική

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

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

Αρχικά, για να μην υπάρχει σύγχυση και παρεξήγηση, αξίζει να κατανοήσετε κάποιες έννοιες.

CSS τι είναι αυτό

Το CSS, το οποίο σημαίνει "cascading style sheets" σε μετάφραση, είναι σήμερα μια από τις κύριες τεχνολογίες στο Διαδίκτυο. Τουλάχιστον ένας ιστότοπος είναι απίθανο να κάνει χωρίς αυτή τη γλώσσα.

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

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

Κουμπί στην τοποθεσία. Τι είναι αυτό

Κουμπί ή γραφικό στοιχείο για πλοήγησηsite, θα πρέπει να προσελκύσει τον επισκέπτη να βλέπει ότι πίσω του κρύβει πληροφορίες που τον ενδιαφέρουν και, επιπλέον, θα ήθελα να κάνω κλικ σε αυτό. Όταν είναι φωτεινό και αρκετά ορατό, σίγουρα θα το παρατηρήσει. Ένα τέτοιο κουμπί μπορεί να ωθήσει τους επισκέπτες, για παράδειγμα, να αφήσει την αναθεώρησή σας στον ιστότοπο ή να στείλει ένα αίτημα, να εγγραφεί σε ένα ενδιαφέρον ενημερωτικό δελτίο και, φυσικά, απλά να μεταφερθεί στην ενότητα του ιστότοπου που ζητά ο χρήστης.

Τα κουμπιά είναι στατικά, κινούμενα, δυναμικά, με ή χωρίς ήχο.

Μπορούν να δημιουργηθούν ειδικά, για παράδειγμα, στο Photoshop και να μεταφορτωθούν στην εικόνα του ιστότοπου ή μπορείτε εύκολα και γρήγορα να τα βρείτε στο CSS.

Κουμπιά CSS

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

Όπως γνωρίζετε, τα κουμπιά έχουν τρεις θέσεις:

• ειρήνη όταν δεν κάνουν τίποτα μαζί της, αλλά απλά περιηγηθείτε στη σελίδα.
• θέση με το δρομέα πάνω από αυτό.
• και ενεργοποίηση όταν πατηθεί.

Τα πλήκτρα θα εμφανίζονται πλήρως σε αυτάπρογράμματα περιήγησης όπως το Firefox, το Safari, το Opera, το Chrome. Ταυτόχρονα, στον Internet Explorer 9, τα κουμπιά δεν μπορούν να εμφανιστούν πλήρως. Για παράδειγμα, η στρογγυλοποίηση των γωνιών, η σκιά του κειμένου και η διαδρομή γύρω από το κουμπί δεν θα είναι ορατές εδώ, λόγω του ότι αυτές οι ιδιότητες δεν υποστηρίζονται από αυτό το πρόγραμμα περιήγησης. Ωστόσο, γενικά, τα κουμπιά CSS για τον ιστότοπο φαίνονται αξιοπρεπή σε αυτή την έκδοση του προγράμματος περιήγησης. Στον Internet Explorer 8 και σε άλλες εκδόσεις κάτω από τον όγδοο, το κουμπί δεν θα δει την ένταση του ήχου, αλλά ταυτόχρονα θα διατηρηθεί η ορατότητα των κλίσεων.

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

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

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

Κουμπί τοποθετήστε στο χώρο

Μεταξύ των ετικετών του σώματος, γράφεται ο κώδικας:

όπου

id = "button2" εδώ σημαίνει το όνομα που έχει αντιστοιχιστεί στο κουμπί,

href = "HYPERLINK" εδώ παρέχει μια άμεση σύνδεση με το απαιτούμενο έγγραφο,

TEXT - το κείμενο εκτυπώνεται, το οποίο θα εμφανιστεί στο κουμπί.

Κουμπιά στυλ

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

2. Αρχικά, τα κουμπιά CSS γράφονται όταν είναι σε κατάσταση ηρεμίας:

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

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

CSS - ωραία κουμπιά

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

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

Αυτές οι παράμετροι είναι:

- το χρώμα του κειμένου στο κουμπί.

- μέγεθος και κουμπιά κειμένου.

- χρώμα κλίσης κουμπιού.

- ακτίνα των γωνιών του κουμπιού.

- και το χρώμα του εγκεφαλικού της.

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