Πώς να δημιουργήσετε μια Κορδέλα CSS
Μιλάμε για CSS κορδέλες στο σχεδιασμό ιστοσελίδων όταν α λωρίδα κουτιού (ονομάζεται κορδέλα) περιτυλίγει ένα άλλο κουτί. Είναι μια αρκετά διαδεδομένη τεχνική σχεδιασμού διακοσμήστε το κείμενο, ειδικά τις επικεφαλίδες. Στο δικτυακό τόπο του W3C μπορείτε να ελέγξετε πόσο σωστά χρησιμοποιούνται οι κορδέλες CSS περιεχόμενο δομής με λεπτό τρόπο.
Έτσι, σε αυτή τη θέση θα δούμε πώς να δημιουργήσετε μια απλή κορδέλα CSS που μπορείτε να χρησιμοποιήσετε για ενισχύσει τις επικεφαλίδες στον ιστότοπό σας. Χάρη σε Μετασχηματισμοί CSS, μπορούμε να δημιουργήσουμε αυτό το σχέδιο με μια πολύ απλούστερη βάση δεδομένων από πριν.
Μπορείτε να ρίξετε μια ματιά στο τελικό demo παρακάτω.
HTML & βασικά στυλ
Πρώτον, δημιουργούμε ένα ετικέτα που επισημαίνουμε με το .κάρτα επιλογέα που αντιπροσωπεύει a ορθογώνιο κουτί η κορδέλα θα κάλυμμα γύρω.
Επίσης, ορίσαμε το βασικές διαστάσεις και το χρώμα του φόντου με CSS.
.κάρτα χρώμα-φόντο: μπεζ; ύψος: 300px; περιθώριο: 40px; πλάτος: 500px;
Το μεσαίο τμήμα της κορδέλας
Θα χρησιμοποιήσουμε ένα Μεταβλητή CSS (μας επιτρέπει να αποθηκεύουμε και να επαναχρησιμοποιούμε μια τιμή CSS) που ονομάζεται --Π προς το αποθηκεύστε την τιμή γεμίσματος. Η αξία του υλικό παραγεμίσματος η ιδιοκτησία χρησιμοποιεί το var (- p) σύνταξη για το αριστερό και το δεξιό μαξιλάρι της κορδέλας έτσι ώστε να μπορεί να είναι διευρύνθηκε εύκολα. ο --Π μεταβλητή αργότερα θα είναι επαναχρησιμοποιήθηκαν πολλές φορές. που κάνει τον κώδικα μας ευέλικτο.
.κορδέλα - p: 15px; Χρώμα φόντου: rgb (170,170,170); ύψος: 60px; συμπύκνωση: 0 var (- p); πλάτος: 100%.
Στο παρακάτω στιγμιότυπο οθόνης μπορείτε να δείτε πώς θα εμφανιστεί το demo σας σε αυτό το σημείο:
Κεντράρισμα της κορδέλας
Πρέπει επίσης κεντράρετε την κορδέλα. Εμείς σπρώξτε το προς τα αριστερά με το μέγεθος του γεμιστήρα (που χαρακτηρίζεται από το --Π μεταβλητή) χρησιμοποιώντας τη σχετική τοποθέτηση.
.κορδέλα - p: 15px; Χρώμα φόντου: rgb (170,170,170); ύψος: 60px; συμπύκνωση: 0 var (- p); θέση: σχετική. δεξιά: var (- p); πλάτος: 100%.
Η ενημερωμένη επίδειξη:
Οι πλευρές της κορδέλας
Τώρα δημιουργούμε το αριστερή και δεξιά πλευρά της κορδέλας που θα έπρεπε να λυγίσει φαινομενικά γύρω από την άκρη της κάρτας. Για να γίνει αυτό, χρησιμοποιούμε και τα δύο :πριν και :μετά ψευδο-στοιχεία του .ταινία.
Και τα δύο ψευδο-στοιχεία κληρονομούν το χρώμα φόντου του .ταινία, και χρησιμοποιούμε το φίλτρο: φωτεινότητα (.5) για να σκουρύνουν λίγο το χρώμα τους. Είναι επίσης σε απόλυτη θέση μέσα στον (σχετικά τοποθετημένο) γονέα τους.
Το πλάτος τους πρέπει να είναι το ίδιο με το μέγεθος της επένδυσης, και τα τοποθετούμε προς τα αριστερά και τα δεξιά άκρα της κορδέλας χρησιμοποιώντας το αριστερά: 0 και δεξιά: 0 κανόνες στυλ.
.κορδέλα: πριν, .ribbon: μετά από background-color: inherit; Περιεχόμενα: "· εμφάνιση: μπλοκ · φίλτρο: φωτεινότητα (.5) · ύψος: 100% · θέση: απόλυτο · πλάτος: var (- p) δεξιά: 0;
Τώρα η κορδέλα με τις πλευρές που μόλις προσθέσαμε φαίνεται όπως παρακάτω:
Σμίκρυνση των πλευρών
Για να κάνετε τις πλευρές της κορδέλας κοιτάξτε λυγισμένα, εμείς πρέπει να λοξά τις πλευρές κατά 45 °. ο μετασχηματισμός: λοξή () Κανόνα CSS παραμορφώνει τα στοιχεία κάθετα.
.κορδέλα: πριν από αριστερά: 0; μετασχηματισμός: λοξή (45deg); .ribbon: μετά από δεξιά: 0; μετασχηματισμός: λοξή (-45deg);
Όπως μπορείτε να δείτε τις άκρες των πλευρών μην ευθυγραμμίζετε μετά τη μετατροπή, έτσι πρέπει τραβήξτε τα προς τα κάτω.
Ευθυγραμμίστε τις πλευρές
Προς το καθορίστε το σωστό μήκος με την οποία πρέπει να μετακινήσουμε τις πλευρές κάτω, γυρίζουμε στην τριγωνομετρία. Αυτό που πρέπει να βρούμε είναι Χ, όπως και y είναι το πλάτος των πλευρών (ισούται με το μέγεθος γεμίσματος του .ταινία) και τη γωνία θ είναι 45 ° (η γωνία της κλίσης).
Το αποτέλεσμα Χ έπειτα πρέπει να μειωθεί κατά το ήμισυ, καθώς υπάρχει και μια αριστερή και μια δεξιά πλευρά.
Αν χρησιμοποιείτε κάποιον προεπεξεργαστή CSS, ελέγξτε εάν έχει a ηλιοκαμένος , διαφορετικά ανατρέξτε σε ένα εφαπτομενικό διάγραμμα ή σε μια αριθμομηχανή μάθετε την εφαπτομένη τιμή της γωνίας. Είμαστε τυχεροί tan 45 ° είναι 1, που σημαίνει ότι η τιμή του Χ Ισούται με y στην περίπτωσή μας.
.κορδέλα: πριν, .ribbon: μετά από background-color: inherit; Περιεχόμενα: "· εμφάνιση: μπλοκ · φίλτρο: φωτεινότητα (.5) · ύψος: 100% · θέση: απόλυτο · κορυφή: calc (var (- p) / 2)
Από Χ έπρεπε να μειωθεί στο μισό, χρησιμοποιούμε το calc () CSS λειτουργία για να εκτελέσετε τη διαίρεση του --Π μεταβλητός.
Τελικά πρέπει να το κάνουμε ευθυγραμμίστε τις πλευρές κατά μήκος του άξονα z επίσης, ας το προσθέσουμε z-δείκτης: -1 κυβερνήστε στις πλευρές για να τοποθετήστε τα πίσω από το μεσαίο τμήμα της κορδέλας.
.κορδέλα: πριν, .ribbon: μετά από background-color: inherit; (var) - (ρ) / 2), πλάτος: var (- p), z - δείκτης: -1 ·
Τώρα που ευθυγραμμίσαμε τις πλευρές, γίνεται η κορδέλα μας CSS.
Παρακάτω μπορείτε να δείτε το ζωντανό demo ξανά, παρακαλούμε να σημειώσετε ότι χρησιμοποιεί και κάποια επιπλέον stylings.
