Научете как да използвате CSS да създамфантазия първоначални капачки за вашите параграфи. Има дори проста техника за подмяна на изображения, за да се използва графично изображение за първоначалната ви капачка.
Основни стилове на първоначалните капачки
Има три основни стила на първоначалните капачки в документите:
- Повишен - най-често срещаната, когато първата буква е по-голяма и е на същия ред като текущия текст.
- Отпаднало - също доста често, когато първата буква е по-голяма и пада под първия ред на текста. След това следващият текст се носи около него.
- Съседни - където първата буква е в една колона до останалата част от текста. Това е по-често при печат, отколкото при уеб дизайн.
Първоначалните или капковите капачки са много познати. Те са чудесен начин да облечете иначе дългите и скучни интервали от текст. И със свойството CSS: първа буква, можете лесно да дефинирате как да направите първите си букви по-красиви.
Създайте проста начална капачка
Всичко, което трябва да направите, за да създадете просто повдигнато първоначално ограничение, е да направите първата буква на вашия абзац по-голяма по размер с псевдоелемента с първата буква:
p: първа буква {размер на шрифта: 3em; }
Но много браузъри вижте, че първата буква е по-голяма от останалата част от текста на реда, така че те правят водещата равна на това, което би имало смисъл за тази първа буква, а не останалата част от реда. За щастие това е лесно да се поправи с псевдоелемента на първия ред и свойството line-height:
p: първа буква {размер на шрифта: 3em; }
p: първи ред {line-height: 1em; }
Играйте с височината на реда в документа, докато намерите подходящия размер за вашия текст.
Играйте с първоначалната си капачка
След като разберете как да създадете първоначална капачка, можете да я облечете в модни дрехи, за да я откроите. Играйте с цветове, цветове на фона, граници или каквото ви харесва. Доста прост стил е да обърнете цветовете на вашия шрифт и цвета на фона само за първата буква:
p: първа буква {
размер на шрифта: 300%;
фон-цвят: # 000;
цвят: #fff;
}
p: първи ред {височина на линията: 100%; }
Друг трик е да центрирате първия ред. Това може да бъде сложно с CSS, тъй като средата на текстовия ред може да бъде различна, ако оформлението ви е гъвкаво. Но с някои игри около стойностите, можете да отстъпите първия ред достатъчно, за да изглежда първата буква да е в средата. Просто играйте с процента върху отстъпа на текста на абзаца, докато изглежда правилно:
p: първа буква {
размер на шрифта: 300%;
фон-цвят: # 000;
цвят: #fff;
}
p: първи ред {височина на линията: 100%; }
p {отстъп на текст: 45%; }
Съседните първоначални капачки са трудни за CSS
Съседните първоначални капачки могат да бъдат трудни с CSS, тъй като различните браузъри показват шрифтовете по различен начин. Идеята зад създаването на съседно ограничение в CSS е да се използва свойството text-indent на първия ред, за да се изтласне (отляво) отрицателна стойност. Също така ще трябва да промените лявото поле на този абзац с някаква сума. Играйте с тези числа, докато абзацът изглежда добре.
п {
текстово отстъп: -2.5em;
поле вляво: 3em;
}
p: първа буква {размер на шрифта: 3em; }
p: първи ред {височина на линията: 100%; }
Получаване на наистина фантастични първоначални капачки
Най-добрият начин да създадете изискана първоначална капачка е да промените шрифта на по-декоративно семейство шрифтове. Ако използвате поредица от шрифтове последвано от a родов шрифт, това ще ви помогне да гарантирате, че първоначалното ви ограничение се показва добре, за да могат клиентите ви да го видят, без да навлизате в проблеми с достъпността и използваемостта.
p: първа буква {
размер на шрифта: 3em;
семейство шрифтове: "Edwardian Script ITC", "Brush Script MT", скоропис;
}
p: първи ред {височина на линията: 100%; }
И, както обикновено, можете да съберете всички тези предложения, за да създадете първоначално ограничение, което рекламира стила на вашия абзац.
Използване на графично първоначално ограничение
Ако след всичко това все още не ви харесва как изглеждат първоначалните ви капачки на страницата, можете да прибегнете до графики, за да получите точния ефект, който търсите. Но преди да решите да преминете направо към графика, трябва да сте наясно с недостатъците на този метод:
- Клиентите без изображения няма да видят първоначалното ограничение и може да не видят скрития текст, който изображението заменя. Това може да направи абзаца недостъпен или в най-добрия случай труден за четене.
- Изображенията винаги се добавят към времето за изтегляне на страница. Ако имате много първоначални ограничения, можете значително да увеличите времето за изтегляне за нещо, което много хора биха почувствали незначително.
- Някои браузъри ще показват както скритата първа буква, така и изображението, което може да направи текста на абзаца да изглежда странно.
- Много е трудно да автоматизирате тази опция, тъй като трябва да знаете точно каква е първата буква, за да използвате правилната графика. Така че, всеки път, когато параграфът се редактира, може да се наложи да създадете нова графика.
Първо, трябва да създадете графиката на първата буква. Използвахме Photoshop, за да създадем буквата L с шрифт „Edwardian Script ITC“. Направихме го огромен - размер 300pt. След това изрязахме изображението до минимума около буквата и отбелязахме ширината и височината на изображението.
След това създадохме клас "capL" за нашия параграф. Тук дефинираме какво изображение да използваме, водещото (височина на линията) и т.н.
Трябва да използвате ширината и височината на изображението, за да зададете отстъп за текст и подложка на абзаца. За нашето L изображение ни трябваха отстъп 95px и подложка 72px.
p.capL {
височина на линията: 1em;
фоново изображение: url (capL.gif);
background-repeat: no-repeat;
отстъп на текст: 95px;
подложка: 72px;
}
Но това не е всичко. Ако го оставите там, тогава първата буква ще бъде дублирана в абзаца, първо с графиката, а след това в текста. Така че добавихме интервал около този първи елемент с класа "Initial" и казахме на браузъра да не показва тази буква:
span.initial {дисплей: няма; }
След това графиката се показва правилно. Можете да играете с отстъпа на текста на абзаца, за да приведете текста точно до буквата, но искате да се покаже.