Παράδειγμα κουμπιού με ανατροπή 1 σε CSS

Ανατροπή 1 CSS
Για αυτό το παράδειγμα πρέπει να έχουμε 3 εικόνες που θα λειτουργούν ως?
Ανάπαυση

Επάνω σε

Κρατήθηκε

Στη συνέχεια, στο σώμα του ιστότοπού μας έχουμε αυτό
Κώδικας:


ΑΡΧΗ

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

# bot1 {
περίγραμμα: 0 0 0 0;
γέμιση: 0;
text-align: κέντρο;
}
Εκεί που λέμε ότι δεν θέλουμε εξωτερικό και εσωτερικό περιθώριο, ευθυγραμμίζουμε το κείμενο στο κέντρο, τώρα συνεχίζουμε με αυτόν τον κωδικό:
Κώδικας:

# bot1 έως {
φόντο-εικόνα: url (bg_menu_1.jpg);
φόντο-θέση: κεντρικό επάνω;
ύψος: 30 px;
πλάτος: 100 px;
οθόνη: μπλοκ;
χρώμα: # 990000;
κείμενο-διακόσμηση: κανένα;
padding-top: 5px;
φόντο-επανάληψη: χωρίς επανάληψη.
βάρος γραμματοσειράς: έντονη γραφή;
}
Ότι πρακτικά είναι αυτός που κάνει τα πάντα, ας το δούμε γραμμή προς γραμμή
φόντο-εικόνα: url (bg_menu_1.jpg);
Με αυτό λέμε ότι θέλουμε εικόνα φόντου και δίνουμε το μονοπάτι αυτού
φόντο-θέση: κεντρικό επάνω;
Με αυτό υποδεικνύουμε ότι η θέση της εικόνας φόντου θα είναι στο κέντρο και προς τα πάνω.

φόντο-επανάληψη: χωρίς επανάληψη.
Για να μην επαναλαμβάνεται το φόντο σαν να είναι μοτίβο.
ύψος: 30 px;
πλάτος: 100;
Του λέμε ότι το ύψος θα είναι 30 και το πλάτος 100 px που είναι οι διαστάσεις των εικόνων φόντου μας.
οθόνη: μπλοκ;
Έτσι ώστε να δημιουργεί και να σέβεται ένα κουτί με τα μέτρα που βάλαμε πριν.
χρώμα: # 990000
Με αυτό δίνουμε μόνο χρώμα στο κείμενο που βρίσκεται μέσα στο κουτί μας.
κείμενο-διακόσμηση: κανένα;
Είναι για να αποφύγετε τη γραμμή που βρίσκεται κάτω από τους συνδέσμους.
padding-top: 5px;
Έτσι ώστε να εξοικονομήσω χώρο 5px στο πάνω μέρος του συνδέσμου μας και με αυτό να κατεβάσει τη θέση στο κέντρο του κουτιού μας.
βάρος γραμματοσειράς: έντονη γραφή;
Κάνει τα γράμματα έντονα
Στη συνέχεια, πρέπει απλώς να προσθέσετε κλάσεις για τα ψευδοστοιχεία "hover" και "focus"
Κώδικας:

# bot1 a: τοποθετήστε το δείκτη του ποντικιού {
φόντο-εικόνα: url (bg_menu_2.jpg);
}
# bot1 σε: εστίαση {
φόντο-εικόνα: url (bg_menu_3.jpg);
}
Αλλά όπως συνειδητοποιούμε, αλλάξαμε μόνο τη διαδρομή των εικόνων φόντου μας για να πετύχουμε το αποτέλεσμα που αναζητούσαμε.
Ο κωδικός μας Παράδειγμα ανατροπής στο css Φαίνεται παρακάτω:
Κώδικας:








ΑΡΧΗ


Και οι εικόνες μπορούν να ληφθούν από αυτήν τη σελίδα, κάνοντας δεξί κλικ στην εικόνα και αποθηκεύοντας ως.