Научете како да креирате фенси почетни капи со користење на CSS и слики
Научете како да користите CSS за да креирате фенси почетна капи за вашите ставови. Постои дури и едноставна техника за замена на сликата за да се користи графичка слика за вашата почетна капа.
Основни стилови на почетните капи
Постојат три основни стилови на почетни букви во документи:
- подигната - најчестата, каде што првата буква е поголема и на иста линија како и сегашниот текст.
- падна - исто така прилично честа, каде што првата буква е поголема и падна под првата линија на текстот. Следниот текст потоа плови околу неа.
- соседните - каде што првата буква е во една колона покрај остатокот од текстот. Ова е почеста во печатена форма од веб-дизајнот.
Почетните капачиња или капките за капка се многу познати. Тие се одличен начин да се облекуваат инаку долги и здодевни распосланија на текстот. И со сопственост на CSS: прво писмо, можете лесно да дефинирате како да ги направите вашите први букви познавачите.
Направете едноставен почетен капак
Сè што треба да направите за да креирате едноставно подигната почетна капа е да ја направите првата буква од вашиот став поголема по големина со псевдо-елемент од прва буква:
p: прво писмо {font-size: 3em; }Но, многу прелистувачи гледаат дека првата буква е поголема од остатокот од текстот на линијата, така што тие го прават водечкиот еднаков на она што ќе има смисла за тоа прво писмо, а не за остатокот од линијата. За среќа, ова е лесно да се поправи со прва линија псевдо-елемент и својство на линија-висина:
p: прво писмо {font-size: 3em; } p: first-line {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 е да се користи сопственоста на текстот-отпечаток на првата линија за да се истегне (лево) негативна вредност. Исто така ќе треба да ја промените левата маргина на тој став за одредена сума. Играјте со овие броеви додека пасусот не изгледа добро.
p {текст-алинеја: -2.5em; маргина-лево: 3em; } p: прво писмо {font-size: 3em; } p: прва линија {line-height: 100%; }Добивање на вистински фенси почетнички капи
Најдобар начин да се создаде фенси почетна капа е да го смените фонтот во повеќе декоративно семејство на фонтови. Ако користите серија на фонтови проследени со генерички фонт , тоа ќе помогне да гарантирате дека вашата почетна капа покажува добро, за да можат вашите клиенти да го видат, без да стапат во проблеми со пристапноста и употребливоста.
p: прво писмо {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", курзив; } p: прва линија {line-height: 100%; }И, како и обично, можете да ги ставите сите овие предлози заедно за да создадете почетно ограничување на рекламниот стил на вашиот став.
Користење на графички почетен капак
Ако, сето ова, сеуште не ви се допаѓа како првичните капи изгледаат на страната, можете да прибегнете кон графика за да го добиете точниот ефект што го барате. Но, пред да одлучите да се движите директно на графика, треба да бидете свесни за недостатоците на овој метод:
- Клиентите без слики нема да го видат почетното капаче и можеби нема да го видат скриениот текст за кој сликата се заменува. Ова може да го направи ставот недостапен, или во најдобар случај тешко да се прочита.
- Сликите секогаш се додаваат во времето за преземање на страница. Ако имате многу почетна капи, може значително да го зголемите времето за преземање за нешто што многу луѓе ќе сметаат дека е незначително.
- Некои прелистувачи ќе ги прикажат и скриената прва буква и сликата - што може да го направи текстот од став да изгледа чудно.
- Многу е тешко да се автоматизира оваа опција, бидејќи треба точно да се знае што е првото писмо, така што ќе ја користите точната графичка. Значи, секој пат кога ставот е уреден, можеби ќе треба да креирате нова графичка.
Прво, треба да ја креирате графиката на првата буква. Јас користев Фотошоп за да го креирам писмото L со фонтот "Edwardian Script ITC". Го направив огромен - 300 пати во големина. Потоа ја исекоа сликата до најмалата минимум околу буквата и забележав ширина и висина на сликата.
Потоа создадов класа "capL" за мојот став. Ова е местото каде што дефинирам каква слика да ја користите, водечката (линија-висина) и така натаму.
Треба да ја користите ширината и висината на сликата за да го наместите текстот-алинеја и горниот дел на пасусот. За мојата слика L, ми требаше 95px алинеја и 72px дополнување.
p.capL {line-height: 1em; позадина-слика: url (capL.gif); позадина-повторување: нема повторување; текст-алинеја: 95px; додаток-врв: 72px; }Но, тоа не е сè. Ако го оставите таму, тогаш првото писмо ќе биде удвоено во параграф - прво со графиката, потоа во текстот. Значи, додадов опсег околу тој прв елемент со класата "почетна" - и му рече на прелистувачот дека нема да ја прикаже таа буква:
span.initial {display: none; }И графиката потоа се покажува правилно. Можете да репродуцирате со текст-алинеја на пасусот за да го добиете текстот до писмото, но сепак сакате да го прикажете.