Дізнайтеся, як використовувати CSS для створення фантазії початкових ковпачок для абзаців. Існує навіть проста методика заміни зображення для використання графічного зображення для початкового обмеження.
Основні стилі початкових літер
У документах є три основні стилі початкових заголовних букв:
- Піднятий - найпоширеніший, де перша літера більше і знаходиться на тому ж рядку, що і поточний текст.
- Опущено - також досить часто, коли перша буква більше і опускається нижче першого рядка тексту. Наступний текст потім плаває навколо нього.
- Суміжний - де перша буква знаходиться в одному стовпчику поруч з іншим текстом. Це частіше зустрічається в друку, ніж у веб-дизайні.
Початкові літери або великі літери дуже знайомі. Це чудовий спосіб нарядити довгі та нудні ділянки тексту. А за допомогою властивості CSS: first-letter ви можете легко визначити, як зробити ваші перші літери більш привабливими.
Створити простий початковий ковпачок
Все, що вам потрібно зробити, щоб створити просту початкову заголовну букву, це збільшити першу букву вашого абзацу за допомогою псевдоелемента з першою буквою:
p: перша буква {font-size: 3em; }
Але багато переглядачів бачать, що перша літера більша, ніж інша частина тексту у рядку, тому вони роблять початковий символ рівним тому, що має сенс для цієї першої літери, а не решти частини рядка. На щастя, це легко виправити за допомогою псевдоелемента першого рядка і властивості line-height:
p: перша буква {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 {текст: 45%; }
Суміжні початкові літери складні з CSS
Суміжні початкові заголовні літери можуть бути важкими з CSS, тому що різні браузери по-різному відображають шрифти. Ідея створення суміжного ковпачка в CSS полягає в тому, щоб використовувати властивість text-indent в першому рядку, щоб виштовхнути його (ліворуч) з негативним значенням. Вам також потрібно буде змінити ліве поле цього абзацу на деяку кількість. Грайте з цими числами, поки абзац не виглядатиме добре.
p {
text-indent: -2.5em;
поле ліворуч: 3em;
}
p: перша буква {font-size: 3em; }
p: перший рядок {line-height: 100%; }
Отримання модних початкових літер
Найкращий спосіб створити незвичайний початковий ковпачок - це змінити шрифт на більш декоративне сімейство. Якщо ви використовуєте серію шрифтів, за якими слід використовувати спільний шрифт, це допоможе гарантувати, що ваша початкова межа буде добре відображатися, щоб ваші клієнти могли його бачити, не вдаючись в проблеми доступності і зручності використання.
p: перша буква {
font-size: 3em;
сімейство шрифтів: «Edwardian Script ITC» «», Brush Script MT «», курсив;
}
p: перший рядок {line-height: 100%; }
І як правило, ви можете об'єднати всі ці пропозиції, щоб створити початковий ковпачок, який буде відповідати стилю реклами для вашого абзацу.
Використання початкового колпачка
Якщо після всього цього вам все ще не подобається, як ваші початкові заголовні літери виглядають на сторінці, ви можете вдатися до графіки, щоб отримати саме той ефект, який ви шукаєте. Але перш ніж ви вирішите перейти прямо до графіка, ви повинні знати про недоліки цього методу:
- Клієнти без зображень не побачать початковий ковпачок і можуть не побачити прихований текст, який замінює зображення. Це може зробити абзац недоступним або, в кращому випадку, важким для читання.
- Зображення завжди додають до часу завантаження сторінки. Якщо у вас багато початкових заголовних літер, ви можете значно збільшити час завантаження того, що багато хто вважає незначним.
- Деякі переглядачі відображають як приховану першу літеру, так і зображення, що може зробити текст абзацу дивним.
- It’s very hard to automate this option, as you have to know exactly what the first letter is so that you use the correct graphic. So, every time the paragraph is edited, you may need to create a new graphic.
First, you need to create the graphic of the first letter. We used Photoshop to create the letter L with the font «Edwardian Script ITC.» We made it huge — 300pt in size. We then cropped the image down to the bare minimum around the letter and noted the image width and height.
Then we created a class «capL» for our paragraph. This is where we define what image to use, the leading (line-height), and so on.
You need to use the image width and height to set the paragraph’s text-indent and padding-top. For our L image, we needed 95px indent and 72px padding.
p.capL {
line-height: 1em;
background-image: url(capL.gif);
background-repeat: no-repeat;
text-indent: 95px;
padding-top: 72px;
}
But that’s not all. If you leave it there, then the first letter will be duplicated in the paragraph, first with the graphic, then in the text. So we added a span around that first element with the class «initial» and told the browser to not display that letter:
span.initial { display: none; }
The graphic then displays correctly. You can play with the text-indent on the paragraph to get the text snuggled right up to the letter, however you’d like it to display.