Μάθετε πώς μπορείτε να δημιουργήσετε φανταστικές αρχικές καπάκια χρησιμοποιώντας CSS και εικόνες
Μάθετε πώς να χρησιμοποιείτε το CSS για να δημιουργήσετε φανταχτά αρχικά ανώτατα όρια για τις παραγράφους σας. Υπάρχει ακόμη και μια απλή τεχνική αντικατάστασης εικόνας για να χρησιμοποιήσετε μια γραφική εικόνα για το αρχικό σας καπάκι.
Βασικές μορφές αρχικών κεφαλαίων
Υπάρχουν τρία βασικά στυλ αρχικών κεφαλαίων σε έγγραφα:
- ανυψωμένο - το συνηθέστερο, όπου το πρώτο γράμμα είναι μεγαλύτερο και στην ίδια γραμμή με το τρέχον κείμενο.
- έπεσε - επίσης αρκετά συνηθισμένο, όπου το πρώτο γράμμα είναι μεγαλύτερο και έπεσε κάτω από την πρώτη γραμμή του κειμένου. Το παρακάτω κείμενο επιπλέει γύρω του.
- δίπλα - όπου το πρώτο γράμμα βρίσκεται σε μια στήλη δίπλα στο υπόλοιπο κείμενο. Αυτό είναι πιο συνηθισμένο στην εκτύπωση από το Web design.
Τα αρχικά καλύμματα ή τα καπάκια είναι πολύ οικεία. Είναι ένας πολύ καλός τρόπος για να διανθίσετε αλλιώς μακριά και βαρετά διαστήματα του κειμένου. Και με την ιδιότητα CSS: το πρώτο γράμμα, μπορείτε εύκολα να ορίσετε τον τρόπο με τον οποίο θα κάνετε τις πρώτες σας φαντασιώσεις.
Δημιουργήστε ένα απλό αρχικό κάλυμμα
Το μόνο που χρειάζεται να κάνετε για να δημιουργήσετε ένα απλό ανασηκωμένο αρχικό καπάκι είναι να κάνετε το πρώτο γράμμα της παραγράφου σας μεγαλύτερο σε μέγεθος με το ψευδο στοιχείο του πρώτου γράμματος:
p: πρώτο γράμμα {font-size: 3em; }}Αλλά πολλοί φυλλομετρητές βλέπουν ότι το πρώτο γράμμα είναι μεγαλύτερο από το υπόλοιπο κείμενο της γραμμής, έτσι ώστε να καταστήσει τον ηγέτη ίσο με αυτό που θα είχε νόημα για αυτό το πρώτο γράμμα, όχι το υπόλοιπο της γραμμής. Ευτυχώς, αυτό είναι εύκολο να διορθωθεί με το ψευδο-στοιχείο πρώτης γραμμής και την ιδιότητα ύψους γραμμής:
p: πρώτο γράμμα {font-size: 3em; } p: πρώτη γραμμή {line-height: 1em; }}Παίξτε με το ύψος γραμμής μέσα στο έγγραφό σας μέχρι να βρείτε το σωστό μέγεθος για το κείμενό σας.
Παίξτε με το αρχικό σας καπάκι
Μόλις καταλάβετε πώς να δημιουργήσετε ένα αρχικό καπάκι, μπορείτε να το ντύσετε σε φανταχτερά ρούχα για να το ξεχωρίσετε. Παίξτε με τα χρώματα, τα χρώματα φόντου, τα σύνορα ή ό, τι χτυπά την φαντασία σας. Ένα αρκετά απλό στυλ είναι η αντιστροφή των χρωμάτων της γραμματοσειράς και του χρώματος φόντου μόνο για το πρώτο γράμμα:
p: πρώτο γράμμα {font-size: 300%; φόντο-χρώμα: # 000; χρώμα: #fff; } p: πρώτη γραμμή {line-height: 100%; }}Ένα άλλο τέχνασμα είναι να κεντράρετε την πρώτη γραμμή. Αυτό μπορεί να είναι δύσκολο με το CSS, καθώς η μέση της γραμμής κειμένου μπορεί να είναι διαφορετική εάν η διάταξή σας είναι ευέλικτη. Αλλά με μερικούς παίκτες που παίζουν με τις αξίες, μπορείτε να περιγράψετε την πρώτη σας γραμμή αρκετά ώστε να εμφανιστεί το πρώτο γράμμα στο κέντρο. Απλά παίζετε με το ποσοστό στο κείμενο-παύλα της παραγράφου έως ότου φαίνεται σωστό:
p: πρώτο γράμμα {font-size: 300%; φόντο-χρώμα: # 000; χρώμα: #fff; } p: πρώτη γραμμή {line-height: 100%; } p {κείμενο-παύλα: 45% ; }}Τα γειτονικά αρχικά καπάκια είναι δύσκολα με το CSS
Τα γειτονικά αρχικά καλύμματα μπορεί να είναι δύσκολα με το CSS, επειδή τα διαφορετικά προγράμματα περιήγησης εμφανίζουν διαφορετικά τις γραμματοσειρές. Η ιδέα πίσω από τη δημιουργία ενός παρακείμενου καπακιού στο CSS είναι να χρησιμοποιήσετε την ιδιότητα text-indent στην πρώτη γραμμή για να την σπρώξετε (προς τα αριστερά) μια αρνητική τιμή. Θα χρειαστεί επίσης να αλλάξετε το αριστερό περιθώριο της συγκεκριμένης παραγράφου κατά κάποιο ποσό. Παίξτε με αυτούς τους αριθμούς μέχρι η παράγραφος να φαίνεται καλή.
p {κείμενο-παύλα: -2.5em; περιθώριο-αριστερά: 3em; } p: πρώτο γράμμα {font-size: 3em; } p: πρώτη γραμμή {line-height: 100%; }}Να πάρει πραγματικά φαντασία αρχικά καλύμματα
Ο καλύτερος τρόπος για να δημιουργήσετε ένα φανταστικό αρχικό καπάκι είναι να αλλάξετε τη γραμματοσειρά σε μια πιο διακοσμητική οικογένεια γραμματοσειρών. Εάν χρησιμοποιείτε μια σειρά γραμματοσειρών ακολουθούμενη από μια γενική γραμματοσειρά , θα σας βοηθήσει να διασφαλίσετε ότι το αρχικό σας καπάκι εμφανίζεται καλά, ώστε οι πελάτες σας να μπορούν να το δουν χωρίς να βρεθούν σε θέματα προσβασιμότητας και χρηστικότητας.
p: πρώτο γράμμα {font-size: 3em; γραμματοσειρά-οικογένεια: "Edwardian Script ITC", "Brush Script MT", διαγραφή? } p: πρώτη γραμμή {line-height: 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 {εμφάνιση: κανένας; }}Και το γραφικό εμφανίζεται τότε σωστά. Μπορείτε να παίξετε με το κείμενο-παύλα στην παράγραφο για να πάρετε το κείμενο άνετα μέχρι το γράμμα, ωστόσο θα θέλατε να εμφανιστεί.