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