הרבה יותר קל לעשות את זה בעזרת המאפיין initial-letter של שירות CSS.
תמיכה בדפדפנים
איפה אפשר לנסות את initial-letter? המדיניות זמינה ב-Safari וב-Chrome 110. ב-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 מאפשר שליטה מדויקת יותר על הסגנון הזה של כותרות בענן. היא כוללת שני ערכים המופרדים ברווחים:
p::first-letter {
initial-letter: 3.5 3;
}
- הארגומנט הראשון מגדיר את גודל האות ואת מספר השורות שהיא תכיל. המכתב יוגדל תוך שמירה על יחס הגובה-רוחב שלו. אי אפשר להשתמש בערך שלילי, אבל אפשר להשתמש בערכים עשרוניים.
- הארגומנט השני מגדיר את האות sink. אפשר לחשוב על זה בתור הקיזוז למיקום המכתב. הערך השני הוא אופציונלי ולא יכול להיות שלילי. אם הוא לא נמצא, המערכת מניחה שהערך של גודל האות מוקטן למספר השלם הקרוב ביותר. הפעולה הזו מקבילה לשימוש במילת המפתח "ירידה". ה-sink מקבל גם ערך אחר של מילת מפתח, "rise" (הגדלה), שווה ערך ל-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. שימו לב איך בדוגמה הבאה נשתמש במילת המפתח "ירידה", שתהיה ברירת המחדל אם תשמיט אותה והיא שווה ל-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! האם הייתם מוסיפים אותיות רישיות לטיפוגרפיה? איך כדאי לעצב אותם? שלח לנו הודעה!