Για να προσθέσετε οριζόντιες γραμμές διαχωριστικού στυλ στους ιστότοπούς σας, μια επιλογή περιλαμβάνει την προσθήκη αρχείων εικόνας αυτών των γραμμών στη σελίδα σας, αλλά αυτό θα απαιτούσε από το πρόγραμμα περιήγησής σας να ανακτήσει και να φορτώσει αυτά τα αρχεία, τα οποία θα μπορούσαν να έχουν αρνητική επίδραση στην απόδοση του ιστότοπου. Θα μπορούσατε επίσης να χρησιμοποιήσετε την ιδιότητα περιγράμματος CSS για να προσθέσετε περιγράμματα που λειτουργούν ως γραμμές είτε στην κορυφή είτε στο κάτω μέρος ενός στοιχείου, δημιουργώντας αποτελεσματικά τη διαχωριστική σας γραμμή. Ή – ακόμα καλύτερα – χρησιμοποιήστε το στοιχείο HTML για τον οριζόντιο κανόνα.
Το στοιχείο οριζόντιου κανόνα
Η προεπιλεγμένη εμφάνιση οριζόντιων κανόνων δεν είναι ιδανική. Για να φαίνονται πιο όμορφα, προσθέστε CSS για να προσαρμόσετε την οπτική εμφάνιση αυτών των στοιχείων ώστε να συμβαδίζει με τον τρόπο που θέλετε να εμφανίζεται ο ιστότοπός σας. Μια βασική ετικέτα HR εμφανίζει τον τρόπο με τον οποίο το πρόγραμμα περιήγησης θέλει να την εμφανίσει. Τα σύγχρονα προγράμματα περιήγησης εμφανίζουν συνήθως αστεγείς ετικέτες HR με πλάτος 100 τοις εκατό, ύψος 2 pixel και 3D περίγραμμα σε μαύρο χρώμα για να δημιουργήσουν τη γραμμή.
Το πλάτος και το ύψος είναι συνεπή σε όλα τα προγράμματα περιήγησης
Τα μόνα στυλ που είναι συνεπή στα προγράμματα περιήγησης ιστού είναι το πλάτος και τα στυλ. Αυτά καθορίζουν πόσο μεγάλη θα είναι η γραμμή. Εάν δεν ορίσετε το πλάτος και το ύψος, το προεπιλεγμένο πλάτος είναι 100 τοις εκατό και το προεπιλεγμένο ύψος είναι 2 pixel. Σε αυτό το παράδειγμα, το πλάτος είναι 50 τοις εκατό του γονικού στοιχείου (σημειώστε αυτά τα παραδείγματα παρακάτω περιλαμβάνουν όλα τα ενσωματωμένα στυλ. Σε μια ρύθμιση παραγωγής, αυτά τα στυλ θα γράφονταν πραγματικά σε ένα εξωτερικό φύλλο στυλ για ευκολία διαχείρισης σε όλες τις σελίδες σας): πλάτος: 50%; «>
Και σε αυτό το παράδειγμα το ύψος είναι 2em: ύψος: 2em; «>
Η αλλαγή των συνόρων μπορεί να είναι δύσκολη
Στα σύγχρονα προγράμματα περιήγησης, το πρόγραμμα περιήγησης δημιουργεί τη γραμμή προσαρμόζοντας το περίγραμμα. Επομένως, εάν καταργήσετε το περίγραμμα με την ιδιότητα στυλ, η γραμμή θα εξαφανιστεί στη σελίδα. Όπως μπορείτε να δείτε (καλά, δεν θα δείτε τίποτα, καθώς οι γραμμές θα είναι αόρατες) σε αυτό το παράδειγμα: border: none; «>
Η προσαρμογή του μεγέθους, του χρώματος και του στυλ περιγράμματος κάνει τη γραμμή να φαίνεται διαφορετική και έχει το ίδιο αποτέλεσμα σε όλα τα μοντέρνα προγράμματα περιήγησης. Για παράδειγμα, σε αυτήν την επίδειξη το περίγραμμα είναι κόκκινο, διακεκομμένο και πλάτος 1px: περίγραμμα: 1px διακεκομμένο # 000; «>
Δημιουργήστε μια διακοσμητική γραμμή με εικόνα φόντου
Αντί για ένα χρώμα, ορίστε μια εικόνα φόντου για τον οριζόντιο κανόνα σας, έτσι ώστε να φαίνεται ακριβώς όπως θέλετε, αλλά εξακολουθεί να εμφανίζεται σημασιολογικά στη σήμανση σας. Σε αυτό το παράδειγμα χρησιμοποιήσαμε μια εικόνα που αποτελείται από τρεις κυματιστές γραμμές. Ορίζοντάς το ως εικόνα φόντου χωρίς επανάληψη, δημιουργεί ένα διάλειμμα στο περιεχόμενο που μοιάζει σχεδόν όπως βλέπετε στα βιβλία: ύψος: 20 εικονοστοιχεία; φόντο: #fff url (aa010307.gif) κέντρο κύλισης χωρίς επανάληψη · περίγραμμα: κανένα ; «>
Μετασχηματισμός στοιχείων HR
Με το CSS3, μπορείτε επίσης να κάνετε τις γραμμές σας πιο ενδιαφέρουσες. Το στοιχείο HR είναι παραδοσιακά α οριζόντιος γραμμή, αλλά με την ιδιότητα μετασχηματισμού CSS, μπορείτε να αλλάξετε την εμφάνισή τους. Ένας αγαπημένος μετασχηματισμός στο στοιχείο HR είναι η αλλαγή της περιστροφής. Περιστρέψτε το στοιχείο HR ώστε να είναι ελαφρώς διαγώνιο: hr {
-moz-transform: περιστροφή (10deg);
-webkit-transform: περιστροφή (10deg).
-o-transform: περιστροφή (10deg).
-ms-transform: περιστροφή (10deg).
μετασχηματισμός: περιστροφή (10deg);
}
Ή μπορείτε να το περιστρέψετε έτσι ώστε να είναι εντελώς κατακόρυφο: ω {
-moz-transform: περιστροφή (90deg);
-webkit-transform: περιστροφή (90deg);
-o-transform: περιστροφή (90deg);
-ms-transform: περιστροφή (90deg)
μετασχηματισμός: περιστροφή (90deg);
}
Αυτή η τεχνική περιστρέφει το HR με βάση την τρέχουσα θέση του στο έγγραφο, οπότε ίσως χρειαστεί να προσαρμόσετε τη θέση για να το πάρετε εκεί που θέλετε. Δεν συνιστάται η χρήση αυτού για την προσθήκη κάθετων γραμμών σε ένα σχέδιο, αλλά είναι ένα ενδιαφέρον αποτέλεσμα.
Ένας άλλος τρόπος για να λάβετε γραμμές στις σελίδες σας
Ένα πράγμα που κάνουν μερικοί άνθρωποι αντί να χρησιμοποιούν το στοιχείο HR είναι να βασίζονται σε όρια άλλων στοιχείων. Αλλά μερικές φορές ένας HR είναι πολύ πιο βολικός και πιο εύκολος στη χρήση από το να προσπαθούμε να δημιουργήσουμε σύνορα. Τα ζητήματα μοντέλου κουτιού ορισμένων προγραμμάτων περιήγησης μπορούν να κάνουν τη ρύθμιση ενός περιγράμματος ακόμη πιο δύσκολη.