Научете как да създавате фантастични начални капачки, използващи 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 {текст-indent: -2.5em; margin-left: 3em; } p: първа буква {font-size: 3em; } p: първа линия {линия-височина: 100%; }Получаване на истински фантастични начални капачки
Най-добрият начин да създадете фантастичен начален капак е да промените шрифта в по-декоративно семейство шрифтове. Ако използвате серия от шрифтове, последвани от общ шрифт , това ще ви помогне да гарантирате, че вашият начален капак се показва добре, така че вашите клиенти да могат да го видят, без да се намират в проблеми с достъпността и използваемостта.
p: първа буква {font-size: 3em; шрифт-семейство: "Edwardian Script ITC", "Brush Script MT", курсив; } p: първа линия {линия-височина: 100%; }И както обикновено, можете да сложите всички тези предложения заедно, за да създадете начална горна граница, която рекламите да подхождат на вашия параграф.
Използване на графичен първоначален капак
Ако след всичко това все още не ви харесва как изглеждат началните ви капачки на страницата, можете да прибягвате до графики, за да получите точния ефект, който търсите. Но преди да решите да се придвижите направо към графиката, трябва да сте наясно с недостатъците на този метод:
- Клиентите без изображения няма да виждат първоначалната горна граница и може да не виждат скрития текст, който изображението заменя. Това може да направи този параграф недостъпен или в най-добрия случай трудно да се чете.
- Изображенията винаги добавят към времето за изтегляне на страница. Ако имате много първоначални капачки, можете значително да увеличите времето за изтегляне за нещо, което много хора смятат за незначително.
- Някои браузъри ще покажат както скритата първа буква, така и изображението - което може да направи парчето текст странно.
- Много е трудно да автоматизирате тази опция, тъй като трябва да знаете точно коя е първата буква, за да използвате правилната графика. Така че всеки път, когато се редактира параграфът, може да се наложи да създадете нова графика.
Първо, трябва да създадете графиката на първото писмо. Използвах Photoshop, за да създам буквата L с шрифта "Edwardian Script ITC". Направих го огромен - с големина 300 пиксела. Тогава изрязах изображението надолу до голия минимум около буквата и забелязах ширината и височината на изображението.
След това създадох клас "capL" за моя абзац. Това е мястото, където определям изображението, което да използвам, водещата (височина на линията) и т.н.
Трябва да използвате ширината и височината на изображението, за да настроите текста на абзаца и типа на подложката. За моето L изображение имах нужда от 95px indent и 72px padding.
p.capL {ред-височина: 1em; фоново изображение: url (capL.gif); background-repeat: no-repeat; текст-тире: 95px; подложка: 72px; }Но това не е всичко. Ако го оставите там, първата буква ще бъде дублирана в абзаца - първо с графиката, после с текста. Така че, добавих интервал около този първи елемент с класа "initial" - и казах на браузъра да не показва това писмо:
span.initial {display: няма; }След това графиката се показва правилно. Можете да играете с текста на абзаца в абзаца, за да получите стикера до буквата, но искате да се показва.