Κάνοντας ενδιαφέρουσες γραμμές αναζητήσεων σε ιστοσελίδες με ετικέτες HR
Αν χρειάζεστε να προσθέσετε οριζόντιες γραμμές διαχωριστικού στυλ στις ιστοσελίδες σας, έχετε μερικές επιλογές. Θα μπορούσατε να προσθέσετε στην σελίδα σας πραγματικά αρχεία εικόνας αυτών των γραμμών, αλλά αυτό θα απαιτούσε από το πρόγραμμα περιήγησής σας να ανακτήσει και να φορτώσει αυτά τα αρχεία, τα οποία θα μπορούσαν να έχουν αρνητικό αντίκτυπο στην απόδοση του ιστότοπου.
Μπορείτε να χρησιμοποιήσετε την ιδιότητα των συνόρων CSS για να προσθέσετε σύνορα που λειτουργούν ως γραμμές είτε στο επάνω είτε στο κάτω μέρος ενός στοιχείου, δημιουργώντας αποτελεσματικά τη γραμμή διαχωριστή σας.
Τέλος, μπορείτε να χρησιμοποιήσετε το στοιχείο HTML για τον οριζόντιο κανόνα - το
Το στοιχείο οριζόντιας διάταξης
Εάν έχετε βάλει ποτέ ένα στοιχείο σε μια ιστοσελίδα, ανακαλύψατε ότι ο προεπιλεγμένος τρόπος με τον οποίο εμφανίζονται αυτές οι γραμμές δεν είναι ιδανικός. Αυτό σημαίνει ότι πρέπει να στραφείτε στο CSS για να προσαρμόσετε την οπτική εμφάνιση αυτών των στοιχείων ώστε να είναι σύμφωνη με τον τρόπο που θέλετε να εμφανίζεται ο ιστότοπός σας.
Μια βασική ετικέτα HR εμφανίζεται με τον τρόπο που το πρόγραμμα περιήγησης θέλει να το εμφανίσει. Τα σύγχρονα προγράμματα περιήγησης εμφανίζουν τυπικά ετικέτες ασταθής HR με πλάτος 100%, ύψος 2px και τρισδιάστατο πλαίσιο με μαύρο χρώμα για τη δημιουργία της γραμμής.
Εδώ είναι ένα παράδειγμα ενός τυπικού στοιχείου HR ή μπορείτε να δείτε σε αυτήν την εικόνα πώς φαίνεται ένα unstyled HR σε σύγχρονα προγράμματα περιήγησης.
Το πλάτος και το ύψος είναι συνεπείς μεταξύ των φυλλομετρητών
Τα μόνα στυλ που είναι συνεπείς σε όλα τα προγράμματα περιήγησης ιστού είναι το πλάτος και τα στυλ. Αυτά ορίζουν πόσο μεγάλη είναι η γραμμή. Αν δεν ορίσετε το πλάτος και το ύψος, το προεπιλεγμένο πλάτος είναι 100% και το προεπιλεγμένο ύψος είναι 2px.
Σε αυτό το παράδειγμα, το πλάτος είναι 50% του γονικού στοιχείου (σημειώστε ότι όλα αυτά τα παραδείγματα περιλαμβάνουν όλα τα γραμμικά στυλ.) Σε μια ρύθμιση παραγωγής, αυτά τα στυλ θα γραφτούν σε εξωτερικό φύλλο στυλ για εύκολη διαχείριση σε όλες τις σελίδες σας.
style = "width: 50%;">
Και σε αυτό το παράδειγμα το ύψος είναι 2em:
style = "height: 2em">>
Η αλλαγή των συνόρων μπορεί να αποτελέσει πρόκληση
Στα σύγχρονα προγράμματα περιήγησης, το πρόγραμμα περιήγησης δημιουργεί τη γραμμή προσαρμόζοντας το περιθώριο. Επομένως, αν αφαιρέσετε το περίγραμμα με την ιδιότητα στυλ, η γραμμή θα εξαφανιστεί στη σελίδα. Όπως μπορείτε να δείτε (καλά, δεν θα δείτε τίποτα, καθώς οι γραμμές θα είναι αόρατες) σε αυτό το παράδειγμα:
style = "border: none">>
Η προσαρμογή του μεγέθους, χρώματος και στυλ των συνόρων θα κάνει τη γραμμή να φαίνεται διαφορετική και θα έχει το ίδιο αποτέλεσμα σε όλα τα σύγχρονα προγράμματα περιήγησης. Για παράδειγμα, σε αυτήν την επίδειξη το περίγραμμα είναι κόκκινο, διακεκομμένο και πλάτος 1px:
style = "border: 1px dashed # 000;">
Αλλά αν αλλάξετε το περίγραμμα και το ύψος, τα στυλ φαίνονται ελαφρώς διαφορετικά σε πολύ ξεπερασμένα προγράμματα περιήγησης από αυτά που χρησιμοποιούν τα σύγχρονα προγράμματα περιήγησης. Όπως βλέπετε σε αυτό το παράδειγμα, αν το δείτε σε IE7 και παρακάτω (ένα πρόγραμμα περιήγησης το οποίο είναι τρομακτικά παρωχημένο και δεν υποστηρίζεται πλέον από τη Microsoft), υπάρχει μια εσωτερική γραμμή που δεν εμφανίζεται στα άλλα προγράμματα περιήγησης (συμπεριλαμβανομένων των IE8 και επάνω) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Αυτά τα παλαιά προγράμματα περιήγησης στην πραγματικότητα δεν προκαλούν μεγάλη ανησυχία στον σχεδιασμό ιστοσελίδων σήμερα, δεδομένου ότι έχουν αντικατασταθεί σε μεγάλο βαθμό από πιο σύγχρονες επιλογές.
Κάντε μια διακοσμητική γραμμή με μια εικόνα φόντου
Αντί ενός χρώματος, μπορείτε να ορίσετε μια εικόνα φόντου για το ανθρώπινο δυναμικό σας έτσι ώστε να φαίνεται ακριβώς όπως θέλετε, αλλά εξακολουθεί να εμφανίζεται σημασιολογικά στο markup σας.
Σε αυτό το παράδειγμα χρησιμοποιήσαμε μια εικόνα που αποτελείται από τρεις κυματιστές γραμμές. Θέτοντας την ως εικόνα φόντου χωρίς επανάληψη, δημιουργεί ένα διάλειμμα στο περιεχόμενο που μοιάζει σχεδόν όπως βλέπετε στα βιβλία:
style = "height: 20px": background: #fff url (aa010307.gif) κέντρο περιστροφής χωρίς επανάληψη · border: none; ">
Μετασχηματισμός στοιχείων HR
Με το CSS3, μπορείτε επίσης να κάνετε τις γραμμές σας πιο ενδιαφέρουσες. Το στοιχείο HR είναι παραδοσιακά μια οριζόντια γραμμή, αλλά με την ιδιότητα μετασχηματισμού CSS, μπορείτε να αλλάξετε τον τρόπο εμφάνισής τους. Ένας αγαπημένος μετασχηματισμός στο στοιχείο HR είναι να αλλάξει η περιστροφή.
Μπορείτε να περιστρέψετε το στοιχείο HR σας έτσι ώστε να είναι ελαφρώς διαγώνιος:
hr {
-moz-transform: περιστρέψτε (10deg);
-webkit-transform: περιστρέψτε (10deg);
-o-μετασχηματισμός: περιστροφή (10deg);
-ms-μετασχηματισμός: περιστροφή (10deg);
μετασχηματισμός: περιστροφή (10deg);
}}
Ή μπορείτε να την περιστρέψετε έτσι ώστε να είναι τελείως κάθετη:
hr {
-moz-transform: περιστρέψτε (90deg);
-webkit-transform: περιστρέψτε (90deg);
-o-μετασχηματισμός: περιστροφή (90deg);
-ms-μετασχηματισμός: περιστροφή (90deg);
μετασχηματισμός: περιστροφή (90deg);
}}
Θυμηθείτε ότι αυτό περιστρέφει το HR με βάση την τρέχουσα θέση του στο έγγραφο, οπότε ίσως χρειαστεί να προσαρμόσετε την τοποθέτηση για να το πάρετε εκεί που το θέλετε. Δεν συνιστάται να χρησιμοποιείτε αυτό για να προσθέσετε κάθετες γραμμές σε ένα σχέδιο, αλλά είναι ένας τρόπος για να πάρετε ένα ενδιαφέρον αποτέλεσμα.
Ένας άλλος τρόπος να λάβετε γραμμές στις σελίδες σας
Ένα πράγμα που κάνουν μερικοί άνθρωποι αντί να χρησιμοποιούν το στοιχείο HR είναι να βασίζονται στα όρια άλλων στοιχείων. Αλλά μερικές φορές ένα HR είναι πολύ πιο βολικό και πιο εύκολο στη χρήση από ό, τι προσπαθεί να δημιουργήσει σύνορα. Τα τετραγωνικά μοντέλα ορισμένων προγραμμάτων περιήγησης μπορούν να κάνουν ακόμα πιο δύσκολη τη δημιουργία ενός συνόρου.