למד כיצד ליצור מפואר ראשוני Caps באמצעות CSS ותמונות
למד כיצד להשתמש ב- CSS כדי ליצור כובעים ראשוניים מהודרים לפסקאות שלך. יש אפילו טכניקה פשוטה החלפת תמונה להשתמש בתמונה גרפית עבור הכובע הראשוני שלך.
סגנונות בסיסיים של כובעים ראשוניים
ישנם שלושה סגנונות בסיסיים של כובעים ראשוניים במסמכים:
- העלה - הנפוץ ביותר, שבו האות הראשונה גדולה יותר על אותו קו כמו הטקסט הנוכחי.
- ירד - גם נפוץ למדי, שבו האות הראשונה היא גדולה יותר וירד מתחת לשורה הראשונה של הטקסט. הטקסט הבא מרחף סביבו.
- סמוכים - כאשר האות הראשונה נמצאת בעמודה אחת לצד שאר הטקסט. זה נפוץ יותר להדפיס מאשר עיצוב אתרים.
כובעים ראשוניים או כובעים טיפה מוכרים מאוד. הם דרך נהדרת להתלבש אחר ארוך ומשעמם של טקסטים. ועם המאפיין CSS: האות הראשונה, אתה יכול בקלות להגדיר כיצד להפוך את האותיות הראשונות שלך fancier.
יצירת שווי ראשוני פשוט
כל שעליך לעשות כדי ליצור כובע ראשוני פשוט שהועלה הוא להפוך את האות הראשונה של הפיסקה שלך לגודל גדול יותר עם האות הראשונה של פסאודו:
p: first-letter {font-size: 3em; }אבל דפדפנים רבים רואים כי האות הראשונה גדולה יותר משאר הטקסט על הקו, כך שהם הופכים את ההובלה שווה מה יהיה הגיוני עבור המכתב הראשון, לא את שאר הקו. למרבה המזל, זה קל לתקן עם הקו הראשון pseudo-element ואת גובה קו גובה:
p: first-letter {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 {text-indent: 45% ; }כובעים ראשוניים קרובים הם קשים עם CSS
כובעים ראשוניים סמוכים יכולים להיות קשים ב- CSS מכיוון שהדפדפנים השונים מציגים את הגופנים בצורה שונה. הרעיון מאחורי יצירת כובע סף ב- CSS הוא להשתמש בטקסט הזחה טקסט בשורה הראשונה לדחוף אותו (בצד שמאל) ערך שלילי. אתה גם צריך לשנות את השוליים שמאלה של סעיף זה על ידי סכום כלשהו. שחק עם מספרים אלה עד שהפיסקה נראית טוב.
p {text-indent: -2.5em; שוליים-שמאל: 3em; } p: אות ראשונה {font-size: 3em; } p: השורה הראשונה {line-height: 100%; }איך באמת מפואר ראשוני Caps
הדרך הטובה ביותר ליצור כובע ראשוני מהודר היא לשנות את הגופן למשפחה גופן דקורטיבי יותר. אם אתה משתמש בסדרה של גופנים ואחריו גופן כללי , זה יעזור להבטיח כי הכובע הראשונית שלך מראה טוב כל כך הלקוחות שלך יכולים לראות את זה, בלי להיכנס בעיות נגישות ונוחות.
p: first-letter {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: השורה הראשונה {line-height: 100%; }וכרגיל, אתה יכול לשים את כל ההצעות האלה יחד כדי ליצור מכסה ראשונית כי סגנון המודעות לפסקה שלך.
באמצעות שווי ראשוני גרפי
אם, אחרי כל זה, אתה עדיין לא אוהב איך הכובעים הראשוני שלך נראה על הדף, אתה יכול לפנות גרפיקה כדי לקבל את האפקט המדויק שאתה מחפש. אבל לפני שאתה מחליט לעבור ישר גרפיקה, אתה צריך להיות מודעים החסרונות של שיטה זו:
- לקוחות ללא תמונות לא יראו את הכובע הראשוני, וייתכן שלא יראו את הטקסט החבוי שהדימוי מחליף. זה יכול להפוך את הפסקה לא נגיש, או במקרה הטוב קשה לקרוא.
- תמונות תמיד להוסיף את זמן ההורדה של הדף. אם יש לך הרבה כמוסות ראשוניות, אתה יכול להגדיל באופן משמעותי את זמן ההורדה למשהו שאנשים רבים יחושו הוא חסר משמעות.
- חלק מהדפדפנים יציגו הן את האות הראשונה הנסתרת והן את התמונה - מה שיגרום לטקסט הפיסקה להיראות מוזר.
- זה מאוד קשה להפוך את האפשרות הזו, כמו שאתה צריך לדעת בדיוק מה האות הראשונה היא כך שאתה משתמש גרפי הנכון. לכן, בכל פעם את הפיסקה הוא נערך, ייתכן שיהיה עליך ליצור גרפיקה חדשה.
ראשית, עליך ליצור את הגרפיקה של האות הראשונה. השתמשתי Photoshop כדי ליצור את האות L עם הגופן "אדוארדיאן סקריפט ITC". עשיתי את זה ענק - 300pt בגודל. אז אני קצוץ את התמונה עד למינימום חשוף סביב המכתב וציין את רוחב התמונה ואת גובה.
לאחר מכן יצרתי בכיתה "CAPL" עבור הפיסקה שלי. זה המקום שבו אני מגדיר מה התמונה להשתמש, המובילים (קו גובה), וכן הלאה.
אתה צריך להשתמש ברוחב התמונה וגובה כדי להגדיר את הפיסקה של טקסט הכניסה ואת הדף ריפוד. עבור התמונה L שלי, הייתי צריך 95px הכניסה ו 72px ריפוד.
p.capL {line-height: 1em; background-image: url (capL.gif); רקע לחזור: לא לחזור; הזנת טקסט: 95px; padding-top: 72px; }אבל זה לא הכל. אם אתה משאיר את זה שם, אז את האות הראשונה יהיה כפולות בפסקה - הראשון עם הגרפיקה, ולאחר מכן את הטקסט. אז, הוספתי תוחלת סביב האלמנט הראשון עם הכיתה "הראשונית" - ואמר לדפדפן לא להציג את המכתב:
span.initial {display: none; }ואת הגרפיקה מכן מוצג כראוי. אתה יכול לשחק עם הזנת טקסט על הפסקה כדי לקבל את הטקסט snugged ממש עד המכתב, אבל אתה רוצה את זה כדי להציג.