Για να προσθέσετε οριζόντιες γραμμές διαχωριστικού τύπου στους ιστότοπούς σας, μια επιλογή περιλαμβάνει την προσθήκη αρχείων εικόνας αυτών των γραμμών τη σελίδα σας, αλλά αυτό θα απαιτούσε από το πρόγραμμα περιήγησής σας να ανακτήσει και να φορτώσει αυτά τα αρχεία, τα οποία θα μπορούσαν να έχουν αρνητικό αποτέλεσμα επί απόδοση ιστότοπου. Θα μπορούσατε επίσης να χρησιμοποιήσετε το CSS περίγραμμα ιδιοτήτων για προσθήκη σύνορα που λειτουργούν ως γραμμές είτε στην κορυφή είτε στο κάτω μέρος ενός στοιχείου, δημιουργώντας αποτελεσματικά τη διαχωριστική σας γραμμή.
Ή — καλύτερα ακόμα — χρησιμοποιήστε το HTML στοιχείο για τον οριζόντιο κανόνα.
Το στοιχείο οριζόντιου κανόνα
Η προεπιλεγμένη εμφάνιση οριζόντιων κανόνων δεν είναι ιδανική. Για να φαίνονται πιο όμορφα, προσθέστε CSS για να προσαρμόσετε την οπτική εμφάνιση αυτών των στοιχείων ώστε να συμβαδίζει με τον τρόπο που θέλετε να εμφανίζεται ο ιστότοπός σας.
Μια βασική ετικέτα HR εμφανίζει τον τρόπο με τον οποίο το πρόγραμμα περιήγησης θέλει να την εμφανίσει. Τα σύγχρονα προγράμματα περιήγησης εμφανίζουν συνήθως αστεγείς ετικέτες HR με πλάτος 100 τοις εκατό, ύψος 2 pixel και 3D περίγραμμα σε μαύρο χρώμα για να δημιουργήσουν τη γραμμή.
Το πλάτος και το ύψος είναι συνεπή σε όλα τα προγράμματα περιήγησης
Τα μόνα στυλ που είναι συνεπή στα προγράμματα περιήγησης ιστού είναι τα πλάτος και στυλ. Αυτά καθορίζουν πόσο μεγάλη θα είναι η γραμμή. Εάν δεν ορίσετε το πλάτος και το ύψος, το προεπιλεγμένο πλάτος είναι 100 τοις εκατό και το προεπιλεγμένο ύψος είναι 2 pixel.
Σε αυτό το παράδειγμα το πλάτος είναι 50 τοις εκατό του γονικού στοιχείου (σημειώστε ότι αυτά τα παραδείγματα παρακάτω περιλαμβάνουν όλα τα ενσωματωμένα στυλ. Σε ένα περιβάλλον παραγωγής, αυτά τα στυλ θα γράφονταν πραγματικά σε ένα εξωτερικό φύλλο στυλ για ευκολία διαχείρισης σε όλες τις σελίδες σας):
style = "πλάτος: 50%;">
Και σε αυτό το παράδειγμα το ύψος είναι 2em:
style = "ύψος: 2em;">
Η αλλαγή των συνόρων μπορεί να είναι δύσκολη
Στα σύγχρονα προγράμματα περιήγησης, το πρόγραμμα περιήγησης δημιουργεί τη γραμμή προσαρμόζοντας το περίγραμμα. Επομένως, εάν καταργήσετε το περίγραμμα με την ιδιότητα στυλ, η γραμμή θα εξαφανιστεί στη σελίδα. Όπως μπορείτε να δείτε (καλά, δεν θα δείτε τίποτα, καθώς οι γραμμές θα είναι αόρατες) σε αυτό το παράδειγμα:
style = "border: none;">
Η προσαρμογή του μεγέθους, του χρώματος και του στυλ περιγράμματος κάνει τη γραμμή να φαίνεται διαφορετική και έχει το ίδιο αποτέλεσμα σε όλα τα μοντέρνα προγράμματα περιήγησης. Για παράδειγμα, σε αυτήν την επίδειξη το περίγραμμα είναι κόκκινο, διακεκομμένο και πλάτος 1px:
style = "περίγραμμα: 1px διακεκομμένη # 000;">
Δημιουργήστε μια διακοσμητική γραμμή με εικόνα φόντου
Αντί για ένα χρώμα, ορίστε μια εικόνα φόντου για τον οριζόντιο κανόνα σας, έτσι ώστε να μοιάζει ακριβώς όπως θέλετε, αλλά εξακολουθεί να εμφανίζεται σημασιολογικά στη σήμανση σας. Σε αυτό το παράδειγμα χρησιμοποιήσαμε μια εικόνα που αποτελείται από τρεις κυματιστές γραμμές. Ορίζοντας το ως το εικόνα φόντου χωρίς επανάληψη, δημιουργεί ένα διάλειμμα στο περιεχόμενο που μοιάζει σχεδόν όπως βλέπετε στα βιβλία:
style = "ύψος: 20px; φόντο: #fff url (aa010307.gif) κέντρο κύλισης χωρίς επανάληψη; περίγραμμα: κανένα; ">
Μετασχηματισμός στοιχείων HR
Με το CSS3, μπορείτε επίσης να κάνετε τις γραμμές σας πιο ενδιαφέρουσες. Το στοιχείο HR είναι παραδοσιακά α οριζόντιος γραμμή, αλλά με την ιδιότητα μετασχηματισμού CSS, μπορείτε να αλλάξετε την εμφάνισή τους. Ένας αγαπημένος μετασχηματισμός στο στοιχείο 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 είναι πολύ πιο βολικός και ευκολότερος στη χρήση από την προσπάθεια ρύθμισης ορίων. Τα ζητήματα μοντέλου κουτιού ορισμένων προγραμμάτων περιήγησης μπορούν να κάνουν τη ρύθμιση ενός περιγράμματος ακόμη πιο δύσκολη.