Իմացեք, թե ինչպես ստեղծել Fancy Առաջին Caps օգտագործելով CSS եւ պատկերներ
Իմացեք, թե ինչպես օգտագործել CSS- ը ձեր պարբերությունների համար նախնական նախնական կափարիչները ստեղծելու համար: Կա նույնիսկ պարզ կերպարների փոխարինման տեխնիկա, ձեր սկզբնական գլխարկի համար գրաֆիկական պատկեր օգտագործելու համար:
Սկզբնաղբյուրների հիմնական ոճերը
Փաստաթղթերում նախնական գլխիկների երեք հիմնական ստանդարտ կա.
- բարձրացված - առավել տարածված, որտեղ առաջին տառը ավելի մեծ է եւ նույն տողում, ինչպես ներկայիս տեքստը:
- նվազել է նաեւ բավականին տարածված, որտեղ առաջին նամակը ավելի մեծ է եւ ներքեւում ներքեւում տեքստի առաջին տողում: Հետեւյալ տեքստը այնուհետեւ փչում է շուրջը:
- հարակից , որտեղ առաջին տառը մեկ սյունակում է տեքստի մնացած կողքին: Սա ավելի տարածված է տպարանում, քան վեբ դիզայնով:
Սկզբնական կափարիչները կամ կաթիլները շատ ծանոթ են: Նրանք տեքստը ձանձրալի ու երկարատեւ հագուստի հիանալի միջոց են: CSS- ի գույքով `առաջին տառը, դուք հեշտությամբ կարող եք սահմանել, թե ինչպես կատարել ձեր առաջին տառերը հավանաբար:
Ստեղծեք պարզ սկզբնական գլխարկ
Բոլորը, որ դուք պետք է անեք, որպեսզի ստեղծեք պարզ բարձրացրած նախնական գլխարկը, ձեր պարբերության առաջին նամակը չափի մեծ չափով առաջին տառի կեղծ տարրով:
p- առաջին տառը {font-size: 3em; }Սակայն շատ բրաուզերներ տեսնում են, որ առաջին նամակը ավելի մեծ է, քան գծի վրա մնացած տեքստը, այնպես որ նրանք առաջատարին հավասար են այն բանին, ինչը նշանակություն կունենա այդ առաջին տառը, այլ ոչ թե գծի մնացած մասը: Բարեբախտաբար, սա հեշտ է ամրագրել առաջին գծի կեղծ տարրը եւ գծի բարձրությունը:
p- առաջին տառը {font-size: 3em; } p: առաջին գծի {line-height: 1em; }Խաղալ ձեր գծի գծի բարձրության հետ, մինչեւ ձեր տեքստի համար ճիշտ չափը գտնեք:
Խաղալ ձեր սկզբնական գլխարկով
Երբ հասկանում եք, թե ինչպես պետք է ստեղծել նախնական գլխարկ, դուք կարող եք հագնվում այն հագնված հագուստով, որպեսզի այն առանձնանա: Խաղալ գույներով, ֆոնային գույներով, սահմաններով կամ ինչն է հարվածում ձեր հույզերին: Պարզ պարզ ոճը հենց ձեր առաջին տառի համար ձեր տառատեսակը եւ ֆոնի գույնն է:
p- առաջին տառը {font-size: 300%; background-color: # 000; գույնը `#fff; } p: առաջին գծի {line-height: 100%; }Մեկ այլ հնարք է առաջին գծի կենտրոնացումը: Սա CSS- ի հետ կարող է բարդ լինել, քանի որ տեքստի գծի կեսը կարող է տարբեր լինել, եթե ձեր դասավորությունը ճկուն է: Բայց որոշ արժեքների հետ խաղում, դուք կարող եք շեղել ձեր առաջին տողը, որպեսզի առաջին նամակը հայտնվի մեջտեղում: Պարզեք խաղադրույքի տեքստի պարունակության տոկոսը, քանի դեռ ճիշտ չէ:
p- առաջին տառը {font-size: 300%; background-color: # 000; գույնը `#fff; } p: առաջին գծի {line-height: 100%; } p {text-indent: 45% ; }Կապակցված սկզբնական սկիպիդարները դժվար է CSS- ի հետ
Հարեւան առաջին գլխարկները կարող են դժվար լինել CSS- ով, քանի որ տարբեր բրաուզերները տարբեր տառատեսակներ են ցուցադրում: CSS- ի հարակից գլխարկը ստեղծելու գաղափարը առաջին տողում օգտագործելու համար text-indent հատկությունը բացասական արժեք է մղել (ձախից): Դուք նույնպես պետք է փոխեք այդ կետի ձախ եզրը որոշ չափով: Play այս թվերի հետ, մինչեւ պարբերությունը լավ տեսք ունի:
p {text-indent: -2.5em; margin-left: 3em; } p: առաջին տառը {font-size: 3em; } p: առաջին գծի {line-height: 100%; }Getting Really Fancy Առաջին Caps
Լավագույն նախնական գլխարկ ստեղծելու լավագույն ձեւը տառատեսակը փոխելն է ավելի դեկորատիվ տառատեսակ ընտանիքի համար: Եթե օգտագործում եք մի շարք տառատեսակներ, որոնք հաջորդում են ընդհանուր տառատեսակ , այն կօգնի երաշխավորել, որ ձեր նախնական կափարիչը ցույց է տալիս, որ ձեր հաճախորդները կարող են տեսնել այն, առանց մատչելիության եւ հարմարավետության հարցերի:
p- առաջին տառը {font-size: 3em; font-family: «Edwardian Script ITC», «Brush Script MT», cursive; } p: առաջին գծի {line-height: 100%; }Եվ, ինչպես սովորաբար, դուք կարող եք այս բոլոր առաջարկությունները միասին տեղադրել ձեր նախնական գլխարկը, որի գովազդը ոճը ձեր պարբերությանը:
Օգտագործելով գրաֆիկական նախնական գլխարկ
Եթե, ի վերջո, դեռ չեք դիմանում, թե ինչպես ձեր նախնական գլխարկները նայել էջում, դուք կարող եք դիմել գրաֆիկայի, որպեսզի ստանաք ճշգրիտ արդյունք: Բայց նախքան որոշեք ուղիղ գրաֆիկայի տեղափոխել, դուք պետք է տեղյակ լինեք այս մեթոդի թերությունների մասին.
- Հաճախորդները, առանց պատկերների, չեն տեսնի սկզբնական գլխարկը եւ չեն կարող տեսնել այն պատկերը, որը փոխարինում է թաքնված տեքստը: Սա կարող է պարունակել անհասանելի կամ լավագույն դեպքում կարդալ:
- Պատկերները միշտ ավելացնում են էջի ներբեռնման ժամանակը: Եթե ունեք շատ նախնական գլխարկներ, դուք կարող եք զգալիորեն մեծացնել բեռնման ժամանակը, երբ շատ մարդիկ զգան, որ աննշան են:
- Որոշ բրաուզերներ կցուցադրեն ինչպես թաքնված առաջին տառը, այնպես էլ պատկերը, որը կարող է պարբերության տեքստը տարօրինակ նայել:
- Դա շատ դժվար է ավտոմատացնել այս տարբերակը, քանի որ դուք պետք է իմանաք, թե ինչ է առաջին նամակը, այնպես որ դուք օգտագործում եք ճիշտ գրաֆիկան: Այսպիսով, ամեն անգամ պարբերությունը խմբագրվում է, գուցե անհրաժեշտ է ստեղծել նոր գրաֆիկա:
Նախ, անհրաժեշտ է ստեղծել առաջին տառի գրաֆիկը: Ես օգտագործեցի Photoshop- ը, L- ի համար «Էդվարդ սցենարի ITC» տառով: Ես այն մեծ էի, չափսերով `300pt: Ես այնուհետեւ իջեցրեցի այն պատկերը, որը գրեթե նվազեցրեց նամակի շուրջ եւ նշեցի պատկերի լայնությունը եւ բարձրությունը:
Այնուհետեւ ստեղծեցի իմ դասի «capL» դասը: Սա այնտեղն է, որտեղ ես սահմանում եմ, թե ինչ պատկեր է օգտագործելու, առաջատարը (գծի բարձրությունը) եւ այլն:
Դուք պետք է օգտագործեք պատկերի լայնությունը եւ բարձրությունը, պարբերության տեքստի ներդիրը եւ լիցքաթափելու համար: Իմ L իմիջի համար անհրաժեշտ է 95px ներդիր եւ 72px լրացնել:
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: ոչ-կրկնել; text-indent: 95px; padding-top: 72px; }Բայց դա բոլորը չէ: Եթե այնտեղ եք թողնում, ապա առաջին նամակը կկատարվի պարբերությունում, նախ `գրաֆիկական, ապա տեքստում: Այսպիսով, ես ավելացրեցի այդ առաջին տարրը շրջապատող «նախնական» դասի հետ, եւ զրուցեցինք, որ չտեսնեն այդ նամակը.
span.initial {դրսեւորում `ոչ; }Իսկ գրաֆիկան ապա դրսեւորում է ճիշտ: Դուք կարող եք խաղալ պարբերության տեքստի ներդիրով `տեքստը սեղմված տառին հասնելու համար, սակայն ցանկանում եք այն ցուցադրել: