Научите како да користите ЦСС створитифенси почетне капе за ваше пасусе. Постоји чак и једноставна техника замене слика да бисте користили графичку слику за почетни слој.
Основни стилови почетних слова
У документима постоје три основна стила почетних ограничења:
- Одгојена - најчешћи, где је прво слово веће и налази се у истој линији као и тренутни текст.
- Испао - такође прилично уобичајено, где је прво слово веће и спушта се испод првог реда текста. Следећи текст затим лебди око њега.
- Суседни - где је прво слово у једној колони поред остатка текста. Ово је чешће у штампи него у веб дизајну.
Почетне капе или капице су врло познате. Они су одличан начин за облачење иначе дугачких и досадних распона текста. А са својством ЦСС: прво слово, лако можете да дефинишете како да ваша прва слова постану лепша.
Направите једноставну почетну капу
Све што треба да урадите да бисте направили једноставну повишену почетну капу је да прво слово вашег пасуса буде веће псеудо-елементом из првог слова:
п: прво слово {фонт-сизе: 3ем; }
Али многи претраживачи уверите се да је прво слово веће од остатка текста на линији, тако да чине водеће једнако ономе што би имало смисла за то прво слово, а не остатак реда. Срећом, ово је лако поправити помоћу псеудо-елемента првог реда и својства лине-хеигхт:
п: прво слово {фонт-сизе: 3ем; }
п: први ред {лине-хеигхт: 1ем; }
Играјте се са висином линије унутар документа док не пронађете праву величину текста.
Играјте се са почетном капом
Једном када схватите како да направите почетну капу, можете је обући у фенси одећу како бисте је истакли. Поиграјте се бојама, бојама позадине, обрубима или било чиме другим што вам се допада. Прилично једноставан стил је обрнути боје фонта и боје позадине само за прво слово:
п: прво слово {
величина слова: 300%;
боја позадине: # 000;
боја: #ффф;
}
п: први ред {висина линије: 100%; }
Још један трик је центрирање прве линије. Ово може бити незгодно са ЦСС-ом, јер средина реда текста може бити другачија ако је ваш распоред флексибилан. Али ако се мало поиграте са вредностима, можете увући први ред довољно да се чини да је прво слово у средини. Само се играјте са процентом на увлачењу текста одломка док не изгледа исправно:
п: прво слово {
величина слова: 300%;
боја позадине: # 000;
боја: #ффф;
}
п: први ред {висина линије: 100%; }
п {увлачење текста: 45%; }
Суседне почетне капе су тешке са ЦСС-ом
Суседна почетна ограничења могу бити тешка са ЦСС-ом, јер различити прегледачи приказују фонтове различито. Идеја стварања суседног ограничења у ЦСС-у је да се употреби својство увлачења текста у првом реду да би се истиснула (лево) негативна вредност. Такође ћете морати да промените леву маргину тог пасуса за неки износ. Играјте се са овим бројевима док одломак не изгледа добро.
п {
увлачење текста: -2,5ем;
маргина-лева: 3ем;
}
п: прво слово {фонт-сизе: 3ем; }
п: први ред {висина линије: 100%; }
Добијање заиста фенси почетних капа
Најбољи начин да направите фенси почетну капу је да промените фонт у декоративнију породицу фонтова. Ако користите низ фонтова након чега следи а генерички фонт, то ће вам гарантовати да се почетна граница добро приказује како би је купци могли видети, без упадања у проблеме приступачности и употребљивости.
п: прво слово {
величина фонта: 3ем;
породица фонтова: „Едвардиан Сцрипт ИТЦ“, „Брусх Сцрипт МТ“, курзив;
}
п: први ред {висина линије: 100%; }
И, као и обично, можете све ове предлоге саставити да бисте креирали почетно ограничење које ће обликовати огласе према вашем пасусу.
Коришћење графичког почетног слова
Ако вам се, после свега тога, и даље не свиђа како изгледају почетни слови на страници, можете посегнути за графиком како бисте постигли тачан ефекат који тражите. Али пре него што одлучите да пређете директно на графику, требало би да будете свесни недостатака ове методе:
- Купци без слика неће видети почетно ограничење и можда неће видети скривени текст који слика замењује. Ово може учинити одломак неприступачним или га је у најбољем случају тешко прочитати.
- Слике се увек додају времену преузимања странице. Ако имате пуно почетних ограничења, можете знатно повећати време преузимања за нешто што би многи људи сматрали безначајним.
- Неки прегледачи ће приказати и скривено прво слово и слику због чега текст пасуса изгледа необично.
- Тешко је аутоматизовати ову опцију, јер морате тачно знати шта је прво слово како бисте користили тачну графику. Дакле, сваки пут када се одломак уређује, можда ћете требати да направите нову графику.
Прво треба да направите графику првог слова. Користили смо Пхотосхоп за стварање слова Л са фонтом „Едвардиан Сцрипт ИТЦ“. Направили смо га огромним - величином од 300 пт. Затим смо слику обрезали на најмањи минимум око слова и забележили ширину и висину слике.
Затим смо креирали класу „цапЛ“ за наш пасус. Овде дефинишемо коју слику да користимо, водећу (висина линије) итд.
Морате да користите ширину и висину слике да бисте поставили увлачење текста и паддинг-топ пасуса. За нашу Л слику били су нам потребни увлака од 95 пиксела и облога од 72 пиксела.
п.цапЛ {
висина линије: 1ем;
позадина-слика: урл (цапЛ.гиф);
позадина-понављање: без понављања;
увлачење текста: 95 пиксела;
облога: 72пк;
}
Али то није све. Ако га оставите тамо, прво слово биће дуплирано у пасусу, прво графиком, а затим текстом. Тако смо додали распон око тог првог елемента са класом „почетно“ и рекли прегледачу да не приказује то слово:
спан.инитиал {дисплаи: ноне; }
Затим се графика правилно приказује. Можете се поиграти увлачењем текста на пасусу да бисте текст угурали до слова, како год желите да се прикаже.