Jifunze jinsi ya Kujenga Caps ya awali Fancy Kutumia CSS na Picha
Jifunze jinsi ya kutumia CSS kuunda kofia za awali za dhana kwa aya zako. Kuna hata mbinu rahisi ya kubadilisha nafasi ya kutumia picha ya picha kwa cap yako ya kwanza.
Mitindo ya Msingi ya Caps ya awali
Kuna mitindo ya msingi ya kofia za awali katika nyaraka:
- alimfufua - ya kawaida, ambapo barua ya kwanza ni kubwa na kwenye mstari sawa na maandiko ya sasa.
- imeshuka - pia ni ya kawaida, ambapo barua ya kwanza ni kubwa na imeshuka chini ya mstari wa kwanza wa maandiko. Nakala ifuatayo kisha inazunguka.
- karibu - ambapo barua ya kwanza iko kwenye safu moja kando ya maandishi yote. Hii ni kawaida zaidi katika kuchapishwa kuliko Mtandao wa kubuni.
Vipu vya awali au kofia za kuacha hujitokeza sana. Wao ni njia nzuri ya kuvaa hadi vinginevyo vya muda mrefu na vyema vya maandishi. Na kwa mali ya CSS: barua ya kwanza, unaweza kufafanua kwa urahisi jinsi ya kufanya barua zako za kwanza za fancier.
Unda Cap ya Kwanza ya Kwanza
Wote unahitaji kufanya ili kuunda kipaji cha kwanza kilichofufuliwa ni kufanya barua ya kwanza ya kifungu chako kikubwa kwa ukubwa na kipengele cha kwanza cha pseudo-kipengele:
p: kwanza barua {font-size: 3em; }Lakini vivinjari vingi wanaona kwamba barua ya kwanza ni kubwa zaidi kuliko maandiko yote kwenye mstari, kwa hivyo hufanya uongozi sawa na kile kinachoweza kuwa na maana kwa barua hiyo ya kwanza, sio mstari wa pili. Kwa bahati, hii ni rahisi kurekebisha na kipengele cha kwanza cha pseudo-kipengele na mali ya urefu wa mstari:
p: kwanza barua {font-size: 3em; } p: mstari wa kwanza {urefu-mstari: 1m; }Jaribu na urefu wa mstari ndani ya hati yako mpaka upe ukubwa sahihi wa maandishi yako.
Kucheza na Cap yako ya kwanza
Mara unapoelewa jinsi ya kuunda kofia ya kwanza, unaweza kuivaa nguo za dhana ili iweze kuimarisha. Jaribu na rangi, rangi ya asili, mipaka, au chochote cha mgomo wako. Mtindo rahisi ni kurejesha rangi ya font na rangi ya asili kwa barua ya kwanza tu:
p: kwanza barua {font-size: 300%; rangi ya background: # 000; rangi: #fff; } p: mstari wa kwanza {urefu-mstari: 100%; }Hila nyingine ni kuuweka mstari wa kwanza. Hii inaweza kuwa ya kushangaza na CSS, kama katikati ya mstari wa maandishi inaweza kuwa tofauti ikiwa mpangilio wako unafanana. Lakini pamoja na baadhi ya kucheza karibu na maadili, unaweza kuacha mstari wako wa kwanza kutosha kufanya barua ya kwanza kuonekana kuwa katikati. Tu kucheza na asilimia juu ya fungu la maandishi ya kifungu mpaka itaonekana sawa:
p: kwanza barua {font-size: 300%; rangi ya background: # 000; rangi: #fff; } p: mstari wa kwanza {urefu-mstari: 100%; } p {maandishi-indent: 45% ; }Vipande vya awali vya awali ni ngumu na CSS
Vipu vya awali vya awali vinaweza kuwa vigumu na CSS kwa sababu vivinjari tofauti vinaonyesha fonts tofauti. Wazo nyuma ya kujenga kamba karibu katika CSS ni kutumia mali ya maandishi ya mstari kwenye mstari wa kwanza kushinikiza nje (upande wa kushoto) thamani hasi. Pia utahitaji kubadili margin ya kushoto ya aya hiyo kwa kiasi fulani. Jaribu na namba hizi mpaka aya inaonekana nzuri.
p {maandishi-indent: -2.5em; margin-kushoto: 3m; } p: kwanza barua {font-size: 3em; } p: mstari wa kwanza {urefu-mstari: 100%; }Kupata Caps ya awali ya Fancy
Njia bora ya kujenga kofia ya awali ya dhana ni kubadili font kwa familia zaidi ya mapambo ya font. Ikiwa unatumia mfululizo wa fonts ikifuatiwa na font ya generic , itasaidia kuthibitisha kwamba cap yako ya awali inaonyesha vizuri ili wateja wako waweze kuiona, bila kupata upatikanaji na masuala ya usability.
p: kwanza barua {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: mstari wa kwanza {urefu-mstari: 100%; }Na, kama kawaida, unaweza kuweka mapendekezo haya yote pamoja ili kuunda cap ya kwanza ya matangazo kwa aya yako.
Kutumia Cap Graphic Initial
Ikiwa, baada ya yote, bado hupenda jinsi caps yako ya kwanza inaangalia kwenye ukurasa, unaweza kutumia picha ili kupata athari halisi unayotafuta. Lakini kabla ya kuamua kuhamia moja kwa moja kwenye michoro, unapaswa kuwa na ufahamu wa vikwazo vya njia hii:
- Wateja wasio na picha hawataona cap ya kwanza, na hawawezi kuona maandishi yaliyofichwa ambayo picha inashiriki. Hii inaweza kufanya kifungu kisichofikia, au kwa vigumu kusoma.
- Picha daima zinaongeza wakati wa kupakua wa ukurasa. Ikiwa una vifuniko vingi vya awali, unaweza kuongeza kasi ya muda wa kupakua kwa kitu ambacho watu wengi wanajisikia si cha maana.
- Vivinjari vingine vinaonyesha barua ya kwanza iliyofichwa na picha - ambayo inaweza kufanya maandiko ya kifungu yataonekana isiyo ya kawaida.
- Ni ngumu sana kusonga chaguo hili, kwa kuwa unahitaji kujua hasa barua ya kwanza ni nini ili kutumia graphic sahihi. Kwa hiyo, kila wakati aya imebadilishwa, huenda ukahitaji kuunda graphic mpya.
Kwanza, unahitaji kujenga alama ya barua ya kwanza. Nilitumia Photoshop kuunda barua L na font "Edwardian Script ITC". Nilifanya kuwa kubwa - 300pt kwa ukubwa. Kisha nilipiga picha hadi chini ya kiwango cha chini karibu na barua hiyo na nilibainisha upana wa picha na urefu.
Kisha nikaunda darasa "capL" kwa aya yangu. Hii ndio ninafafanua picha ya kutumia, uongozi (urefu wa mstari), na kadhalika.
Unahitaji kutumia upana wa picha na urefu ili kuweka vifungu vya maandishi ya kifungu na juu ya padding. Kwa picha yangu L, nilihitaji indeni ya 95px na padp 72px.
p.capL {urefu wa mstari: 1m; picha ya background: url (capL.gif); Rudi nyuma-kurudia: usirudia; indeni ya maandishi: 95px; padding-top: 72px; }Lakini sio wote. Ikiwa utaondoka hapo, basi barua ya kwanza itachunguzwa katika aya - kwanza na kielelezo, kisha katika maandiko. Kwa hiyo, niliongeza kipengee kote kipengele hiki cha kwanza na darasa "awali" - na aliiambia kivinjari ili asionyeshe barua hiyo:
span.initial {kuonyesha: hakuna; }Na picha hiyo inaonyesha kwa usahihi. Unaweza kucheza na kipengee cha maandiko kwenye kifungu ili kupata maandishi yaliyohifadhiwa mpaka kwenye barua, hata hivyo ungependa kuionyesha.