Μάθετε πώς να χρησιμοποιείτε το CSS για να δημιουργήσετε φανταχτά αρχικά ανώτατα όρια για τις παραγράφους σας. Υπάρχει ακόμη και μια απλή τεχνική αντικατάστασης εικόνας για να χρησιμοποιήσετε μια γραφική εικόνα για το αρχικό σας καπάκι.
Βασικές μορφές αρχικών κεφαλαίων
Υπάρχουν τρία βασικά στυλ αρχικών κεφαλαίων σε έγγραφα:
- Αυξήθηκε - το πιο συνηθισμένο, όπου το πρώτο γράμμα είναι μεγαλύτερο και στην ίδια γραμμή με το τρέχον κείμενο.
- Πτώση - επίσης αρκετά συνηθισμένο, όπου το πρώτο γράμμα είναι μεγαλύτερο και πέφτει κάτω από την πρώτη γραμμή του κειμένου. Το παρακάτω κείμενο επιπλέει γύρω του.
- Γειτονικός - όπου το πρώτο γράμμα βρίσκεται σε μια στήλη δίπλα στο υπόλοιπο κείμενο. Αυτό είναι πιο συνηθισμένο στην εκτύπωση από το Web design.
Τα αρχικά καλύμματα ή τα καπάκια είναι πολύ οικεία. Είναι ένας πολύ καλός τρόπος για να διανθίσετε αλλιώς μακριά και βαρετά διαστήματα του κειμένου. Και με την ιδιότητα CSS: το πρώτο γράμμα, μπορείτε εύκολα να ορίσετε τον τρόπο με τον οποίο θα κάνετε τις πρώτες σας φαντασιώσεις.
Δημιουργήστε ένα απλό αρχικό κάλυμμα
Το μόνο που χρειάζεται να κάνετε για να δημιουργήσετε ένα απλό ανασηκωμένο αρχικό καπάκι είναι να κάνετε το πρώτο γράμμα της παραγράφου σας μεγαλύτερο σε μέγεθος με το ψευδο στοιχείο του πρώτου γράμματος:
p: πρώτο γράμμα {font-size: 3em; }}
Αλλά πολλοί φυλλομετρητές βλέπουν ότι το πρώτο γράμμα είναι μεγαλύτερο από το υπόλοιπο κείμενο της γραμμής, έτσι ώστε να καταστήσει τον ηγέτη ίσο με αυτό που θα είχε νόημα για αυτό το πρώτο γράμμα, όχι το υπόλοιπο της γραμμής. Ευτυχώς, αυτό είναι εύκολο να διορθωθεί με το ψευδο-στοιχείο πρώτης γραμμής και την ιδιότητα ύψους γραμμής:
p: πρώτο γράμμα {font-size: 3em; }}
p: πρώτης γραμμής {line-height: 1em; }}
Παίξτε με το ύψος γραμμής μέσα στο έγγραφό σας μέχρι να βρείτε το σωστό μέγεθος για το κείμενό σας.
Παίξτε με το αρχικό σας καπάκι
Μόλις καταλάβετε πώς να δημιουργήσετε ένα αρχικό καπάκι, μπορείτε να το ντύσετε σε φανταχτερά ρούχα για να το ξεχωρίσετε. Παίξτε με τα χρώματα, τα χρώματα φόντου, τα σύνορα ή ό, τι χτυπά την φαντασία σας. Ένα αρκετά απλό στυλ είναι η αντιστροφή των χρωμάτων της γραμματοσειράς και του χρώματος φόντου μόνο για το πρώτο γράμμα:
p: πρώτο-γράμμα {
μέγεθος γραμματοσειράς: 300%;
φόντο-χρώμα: # 000;
χρώμα: #fff;
}
p: πρώτη γραμμή {ύψος γραμμής: 100%; }}
Ένα άλλο τέχνασμα είναι να κεντράρετε την πρώτη γραμμή. Αυτό μπορεί να είναι δύσκολο με το CSS, καθώς η μέση της γραμμής κειμένου μπορεί να είναι διαφορετική εάν η διάταξή σας είναι ευέλικτη. Αλλά με μερικούς παίκτες που παίζουν με τις αξίες, μπορείτε να περιγράψετε την πρώτη σας γραμμή αρκετά ώστε να εμφανιστεί το πρώτο γράμμα στο κέντρο. Απλά παίζετε με το ποσοστό στο κείμενο-παύλα της παραγράφου έως ότου φαίνεται σωστό:
p: πρώτο-γράμμα {
μέγεθος γραμματοσειράς: 300%;
φόντο-χρώμα: # 000;
χρώμα: #fff;
}
p: πρώτη γραμμή {ύψος γραμμής: 100%; }}
Τα γειτονικά αρχικά καπάκια είναι δύσκολα με το CSS
Τα γειτονικά αρχικά καλύμματα μπορεί να είναι δύσκολα με το CSS, επειδή τα διαφορετικά προγράμματα περιήγησης εμφανίζουν διαφορετικά τις γραμματοσειρές. Η ιδέα πίσω από τη δημιουργία ενός παρακείμενου καπακιού στο CSS είναι να χρησιμοποιήσετε την ιδιότητα text-indent στην πρώτη γραμμή για να την σπρώξετε (προς τα αριστερά) μια αρνητική τιμή. Θα χρειαστεί επίσης να αλλάξετε το αριστερό περιθώριο της συγκεκριμένης παραγράφου κατά κάποιο ποσό. Παίξτε με αυτούς τους αριθμούς μέχρι η παράγραφος να φαίνεται καλή.
Π {
κείμενο-παύλα: -2.5em;
περιθώριο-αριστερά: 3em;
}
p: πρώτο γράμμα {font-size: 3em; }}
p: πρώτη γραμμή {ύψος γραμμής: 100%; }}
Να πάρει πραγματικά φαντασία αρχικά καλύμματα
Ο καλύτερος τρόπος για να δημιουργήσετε ένα φανταστικό αρχικό καπάκι είναι να αλλάξετε τη γραμματοσειρά σε μια πιο διακοσμητική οικογένεια γραμματοσειρών. Εάν χρησιμοποιείτε μια σειρά γραμματοσειρών ακολουθούμενη από μια γενική γραμματοσειρά, θα σας βοηθήσει να διασφαλίσετε ότι το αρχικό σας καπάκι εμφανίζεται καλά, ώστε οι πελάτες σας να μπορούν να το δουν χωρίς να βρεθούν σε θέματα προσβασιμότητας και χρηστικότητας.
p: πρώτο-γράμμα {
μέγεθος γραμματοσειράς: 3em;
γραμματοσειρά-οικογένεια: "Edwardian Script ITC", "Brush Script MT", διαγραφή?
}
p: πρώτη γραμμή {ύψος γραμμής: 100%; }}
Και, ως συνήθως, μπορείτε να βάλετε μαζί όλες αυτές τις προτάσεις για να δημιουργήσετε ένα αρχικό ανώτατο όριο που στυλ διαφημίσεων στην παράγραφο σας.
Χρησιμοποιώντας ένα γραφικό αρχικό κάλυμμα
Εάν, μετά από όλα αυτά, εξακολουθείτε να μην σας αρέσει το πώς τα αρχικά σας caps φαίνονται στη σελίδα, μπορείτε να καταφύγετε σε γραφικά για να πάρετε το ακριβές αποτέλεσμα που ψάχνετε. Αλλά προτού αποφασίσετε να μετακινηθείτε κατευθείαν στα γραφικά, θα πρέπει να γνωρίζετε τα μειονεκτήματα αυτής της μεθόδου:
- Οι πελάτες χωρίς εικόνες δεν θα βλέπουν το αρχικό καπάκι και ενδέχεται να μην βλέπουν το κρυφό κείμενο που αντικαθιστά η εικόνα. Αυτό μπορεί να κάνει την παράγραφο απρόσιτη ή, στην καλύτερη περίπτωση, δύσκολη στην ανάγνωση.
- Οι εικόνες πάντα προστίθενται στον χρόνο λήψης μιας σελίδας. Εάν έχετε πολλά αρχικά caps, μπορείτε να αυξήσετε σημαντικά το χρόνο λήψης για κάτι που πολλοί άνθρωποι θα αισθανθούν ότι είναι ασήμαντο.
- Ορισμένα προγράμματα περιήγησης θα εμφανίζουν τόσο το κρυμμένο πρώτο γράμμα όσο και την εικόνα που μπορεί να κάνει το κείμενο της παραγράφου να φαίνεται περίεργο.
- Είναι πολύ δύσκολο να αυτοματοποιήσετε αυτήν την επιλογή, καθώς πρέπει να γνωρίζετε ακριβώς τι είναι το πρώτο γράμμα για να χρησιμοποιήσετε το σωστό γραφικό. Έτσι, κάθε φορά που επεξεργάζεστε την παράγραφο, μπορεί να χρειαστεί να δημιουργήσετε ένα νέο γραφικό.
Πρώτον, πρέπει να δημιουργήσετε το γράφημα του πρώτου γράμματος. Χρησιμοποιήσαμε το Photoshop για να δημιουργήσουμε το γράμμα L με τη γραμματοσειρά "Edwardian Script ITC". Το κάναμε τεράστιο - 300pt σε μέγεθος. Έπειτα κόψαμε την εικόνα κάτω στο ελάχιστο γύρω από το γράμμα και σημειώσαμε το πλάτος και το ύψος της εικόνας.
Στη συνέχεια δημιουργήσαμε μια κλάση "capL" για την παράγραφο μας. Εδώ καθορίζουμε ποια εικόνα πρέπει να χρησιμοποιήσετε, την κορυφή (ύψος γραμμής) και ούτω καθεξής.
Πρέπει να χρησιμοποιήσετε το πλάτος και το ύψος της εικόνας για να ορίσετε την περίληψη κειμένου και την επένδυση της παραγράφου. Για την εικόνα L, χρειαζόμασταν 95px indent και 72px padding.
p.capL {
γραμμή-ύψος: 1em;
εικόνα-φόντου: url (capL.gif);
αναπαράσταση φόντου: όχι-επανάληψη
κείμενο-παύλα: 95px;
padding-top: 72px;
}
Αλλά αυτό δεν είναι όλα. Εάν το αφήσετε εκεί, τότε το πρώτο γράμμα θα αντιγραφεί στην παράγραφο, πρώτα με το γραφικό και στη συνέχεια με το κείμενο. Έτσι, προσθέσαμε ένα εύρος γύρω από αυτό το πρώτο στοιχείο με την κλάση "αρχική" και είπαμε στο πρόγραμμα περιήγησης να μην εμφανίσει το γράμμα:
span.initial {εμφάνιση: κανένας; }}
Και το γραφικό εμφανίζεται τότε σωστά. Μπορείτε να παίξετε με το κείμενο-παύλα στην παράγραφο για να πάρετε το κείμενο άνετα μέχρι το γράμμα, ωστόσο θα θέλατε να εμφανιστεί.
