המאפיין initial-letter ב-CSS יעזור לכם לעשות זאת בקלות רבה יותר.
תמיכה בדפדפנים
איפה אפשר לנסות את initial-letter? התכונה זמינה ב-Safari ובגרסה 110 של Chrome. ב-Safari, הנכס צריך לכלול את הקידומת -webkit-. יש בעיה פתוחה בנושא הטמעה של התכונה ב-Firefox.
כדי לבדוק אם יש תמיכה ב-initial-letter:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
הפתרונות הקיימים
איך אפשר להוסיף עיצוב לאות גדולה בתחילת הפסקה ב-CSS היום?
רכיב הסיווג ::first-letter עוזר לנו בחלק מהדרך.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
אבל לאחר מכן סביר להניח שתצטרכו להשתמש במאפיינים כמו 'float' בזמן חישוב הגודל של האות הראשונה.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
הכנסת יחידות CSS חדשות כמו lh יכולה להקל על הבעיה הזו. עם זאת, גם להם יש תמיכה מוגבלת (lh נתמך כרגע רק ב-Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
חדש: initial-letter
המאפיין initial-letter מאפשר לכם לשלוט בצורה מדויקת יותר בסגנון של אות הפתיחה הגדולה. הוא מקבל שני ערכים מופרדים ברווחים:
p::first-letter {
initial-letter: 3.5 3;
}
- הארגומנט הראשון מגדיר את גודל האות ואת מספר השורות שהיא תתפוס. האימייל יתרחב תוך שמירה על יחס הגובה-רוחב שלו. אי אפשר להשתמש בערך שלילי, אבל אפשר להשתמש בערכים עשרוניים.
- הארגומנט השני מגדיר את בור היציאה של האות. אפשר לחשוב על זה כעל הזזה של המיקום שבו האות תשב. הערך השני הוא אופציונלי ולא יכול להיות שלילי. אם הוא לא קיים, המערכת מניחה שהערך של גודל האות הוא הרצפה של המספר השלם הקרוב ביותר. זה שווה ערך לשימוש במילת המפתח 'drop'. הערך 'sink' מקבל גם ערך אחר של מילת מפתח, 'raise', שווה ערך ל-sink של 1.
כדאי לעיין בדמו הזה, שבו אפשר לשנות את הערכים כדי לראות איך הם משפיעים על העיצוב של האות הגדולה בתחילת הפסקה.
אפשר לשלב את זה עם ::first-line ולקבל משהו כזה
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
או אולי border. שימו לב שבדוגמה הבאה נעשה שימוש במילות המפתח 'drop', שהיא ברירת המחדל אם לא יצוין ערך אחר, והיא שווה ל-3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
אולי כדאי להוסיף background או כמה box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
לחלופין, אפשר לחתוך את הרקע לטקסט:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
יש לכם המון אפשרויות!
וזהו, עכשיו יש לכם שליטה טובה יותר על סגנון האותיות הגדולות בתחילת הפסקה באמצעות initial-letter! רוצה להוסיף אותיות גדולות בתחילת הפסקה לטיפוגרפיה? איך אפשר לעצב אותם? שלח לנו הודעה!