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