כובעים ראשוניים של CSS ליצירת אותיות ראשונות דקורטיביות

למד כיצד להשתמש CSS ליצורלְחַבֵּב מכסה ראשונית לפסקאות שלך. יש אפילו טכניקת החלפת תמונות פשוטה לשימוש בתמונה גרפית עבור הכובע הראשוני שלך.

סגנונות בסיסיים של מכסים ראשוניים

ישנם שלושה סגנונות בסיסיים של מכסה ראשונית במסמכים:

• מוּרָם - הנפוץ ביותר, שבו האות הראשונה גדולה יותר ובאותה שורה כמו הטקסט הנוכחי.
• צנח - גם שכיח למדי, כאשר האות הראשונה גדולה יותר ויורדת מתחת לשורת הטקסט הראשונה. לאחר מכן מרחף הטקסט הבא.
• סמוך - כאשר האות הראשונה נמצאת בעמודה אחת לצד שאר הטקסט. זה נפוץ יותר בדפוס מאשר עיצוב אתרים.

מכסים ראשוניים או מכסי ירידה מוכרים מאוד. הם דרך נהדרת להתחפש לטווחי טקסט ארוכים ומשעממים אחרת. ועם מאפיין 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%; }
p {כניסה לטקסט: 45%; }

מכסים ראשוניים סמוכים קשים עם CSS

מכסות ראשוניות סמוכות יכולות להיות קשות עם CSS מכיוון שהדפדפנים השונים מציגים את הגופנים באופן שונה. הרעיון מאחורי יצירת מכסה סמוך ב- CSS הוא להשתמש במאפיין הכנסת טקסט בשורה הראשונה כדי לדחוף אותו (משמאל) לערך שלילי. יהיה עליך לשנות את השוליים השמאלים של הפסקה באותה מידה. שחקו עם המספרים האלה עד שהפסקה נראית טוב.

p {
כניסה לטקסט: -2.5em;
שוליים-שמאל: 3em;
}
p: אות ראשונה {font-size: 3em; }
p: קו ראשון {קו גובה: 100%; }

מקבל כובעים ראשוניים מפוארים באמת

הדרך הטובה ביותר ליצור כיפה ראשונית מהודרת היא לשנות את הגופן למשפחת פונטים דקורטיבית יותר. אם אתה משתמש ב- סדרת גופנים ואחריו א גופן כללי, זה יעזור להבטיח כי המכסה הראשונית שלך תוצג היטב, כך שלקוחותיך יוכלו לראות אותה, מבלי להיכנס לבעיות נגישות ושימושיות.

p: אות ראשונה {
גודל גופן: 3em;
משפחת הגופנים: "Script Edwardianian ITC", "Script Brush MT", קלסיבי;
}
p: קו ראשון {קו גובה: 100%; }

וכרגיל, אתה יכול להרכיב את כל ההצעות הללו כדי ליצור מכסה ראשוני שמאפיין מודעות לפסקה שלך.

שימוש בכובע ראשוני גרפי

אם אחרי כל זה אתה עדיין לא אוהב את האופן שבו הכיסות הראשוניות שלך נראות בעמוד, תוכל להשתמש בגרפיקה כדי לקבל את האפקט המדויק שאתה מחפש. אך לפני שתחליט לעבור ישר לגרפיקה, עליך להיות מודע לחסרונות של שיטה זו:

• לקוחות ללא תמונות לא יראו את הכובע הראשוני, וייתכן שלא יראו את הטקסט הנסתר שהתמונה מחליפה. זה יכול להפוך את הפסקה לנגישה, או במקרה הטוב קשה לקריאה.
• תמונות תמיד מוסיפות לזמן ההורדה של דף. אם יש לך הרבה כובעים ראשוניים, אתה יכול להגדיל משמעותית את זמן ההורדה למשהו שאנשים רבים ירגישו שהוא לא משמעותי.
• חלק מהדפדפנים יציגו את האות הראשונה הנסתרת וגם את התמונה שיכולים לגרום לטקסט הפיסקה להיראות מוזר.
• קשה מאוד להפוך אפשרות זו לאוטומטית, מכיוון שאתה צריך לדעת בדיוק מה האות הראשונה כדי שתשתמש בגרפיקה הנכונה. לכן, בכל פעם שעורכים את הפסקה, יתכן שתצטרך ליצור גרפיקה חדשה.

ראשית, עליך ליצור את הגרפיקה של האות הראשונה. השתמשנו בפוטושופ כדי ליצור את האות L עם הגופן "Script Edwardus ITC." עשינו את זה ענק - 300pt בגודל. לאחר מכן חתכנו את התמונה למינימום מוחלט סביב האות וציינו את רוחב התמונה וגובהה.

ואז יצרנו כיתת "capL" לפסקה שלנו. זה המקום בו אנו מגדירים באיזו תמונה להשתמש, המוביל (גובה קו) וכן הלאה.

עליכם להשתמש ברוחב ובגובה התמונה כדי להגדיר את כניסת הטקסט וריפוד החלק של הפסקה. עבור תמונת ה- L שלנו, היינו צריכים כניסה של 95 פיקסלים וריפוד של 72 פיקסלים.

p.capL {
קו גובה: 1em;
תמונת רקע: url (capL.gif);
רקע-חזרה: אין לחזור;
כניסה לטקסט: 95 פיקסלים;
ריפוד עליון: 72 פיקסלים;
}

אבל זה לא הכל. אם תשאיר אותו שם, האות הראשונה תשוכפל בפסקה, תחילה עם הגרפיקה, ואז בטקסט. אז הוספנו טווח סביב האלמנט הראשון עם הכיתה "ראשונית" ואמרנו לדפדפן לא להציג את האות הזו:

span.initial {display: none; }

הגרפיקה מוצגת כהלכה. אתה יכול לשחק עם כניסת הטקסט בפסקה כדי להעביר את הטקסט עד האות, אולם ברצונך שהוא יופיע.