CSS Initial Caps

Pagkat-on Kon Unsaon sa Paghimo sa Fancy Inisyal nga mga Kapote Paggamit sa CSS ug mga Imahe

Hibal-i kon unsaon paggamit ang CSS sa paghimo og mga pasiunang pasiuna alang sa imong mga parapo. Adunay bisan usa ka yano nga pamaagi nga kapilian sa paggamit nga gamiton ang usa ka graphical nga larawan alang sa imong inisyal nga cap.

Mga Sukaranan sa mga Initial Caps

Adunay tulo ka nag-unang mga estilo sa unang mga takip sa mga dokumento:

Labing pamilyar ang unang mga takup o drop caps. Maayo kini nga paagi sa pagsul-ob sa taas nga panahon ug sa pagdamo sa mga teksto. Ug uban sa CSS property: first-letter, dali nimo masabtan kon unsaon paghimo ang imong unang mga sulat nga mas gusto.

Paghimo og usa ka Simple nga Cap

Ang tanan nga imong kinahanglan nga buhaton aron sa paghimo sa usa ka yano nga gibutang nga inisyal nga cap mao ang paghimo sa una nga letra sa imong parapo nga mas dako ang gidak-on uban sa unang-sulat nga pseudo-elemento:

p: first-letter {font-size: 3em; }

Apan daghan nga mga browsers ang nakakita nga ang una nga sulat mas dako kay sa ubang mga teksto sa linya, mao nga sila ang nagapanguna nga sama sa unsay kahulogan alang sa unang sulat, dili sa uban nga linya. Suwerte, kini sayon ​​nga ayuhon uban sa unang linya nga pseudo-element ug ang linya-taas nga kabtangan:

p: first-letter {font-size: 3em; } p: first-line {line-height: 1em; }

Pagdula uban ang gitas-on sa linya sulod sa imong dokumento hangtud imong makita ang husto nga gidak-on alang sa imong teksto.

Dulaa ang Initial Cap

Sa higayon nga imong masabtan kon unsaon paghimo ang una nga kalo, mahimo nimo kini sul-oban sa nindot nga mga sinina aron kini makalantaw. Pagdula uban sa mga kolor, mga kolor sa background, mga utlanan, o bisan unsa nga mahitabo sa imong gusto. Ang usa ka simple nga estilo mao ang pagbag-o sa mga kolor sa imong font ug kolor sa background nga alang lamang sa unang letra:

p: first-letter {font-size: 300%; background-color: # 000; kolor: #fff; } p: first-line {line-height: 100%; }

Ang laing lansis mao ang pagsentro sa unang linya. Kini mahimo nga malisud sa CSS, tungod kay ang tunga sa linya sa teksto mahimo nga lahi kung ang imong layout sayon. Apan uban sa pipila nga nagdula sa palibot uban sa mga mithi, mahimo nimo nga indent ang imong unang linya nga igo aron mahimo nga ang unang letra makita sa tunga-tunga. Pagdula lamang sa porsyento sa indent sa teksto sa parapo hangtud nga husto kini:

p: first-letter {font-size: 300%; background-color: # 000; kolor: #fff; } p: first-line {line-height: 100%; } p {text-indent: 45% ; }

Ang mga kasikbit nga Initial Caps nga lisud adunay CSS

Ang kasikatan sa una nga mga takup mahimong lisud sa CSS tungod kay ang lainlaing mga browser nagpakita sa lainlaing mga font. Ang ideya sa paghimo sa kasikbit nga cap sa CSS mao ang paggamit sa propiedad sa indent sa teksto sa unang linya aron iduso kini (sa wala) usa ka negatibo nga bili. Kinahanglan usab nimo nga usbon ang wala nga margin sa maong parapo pinaagi sa usa ka kantidad. Pagdula uban niini nga mga numero hangtud ang paragraph daw maayo.

p {text-indent: -2.5em; kilid-wala: 3em; } p: first-letter {font-size: 3em; } p: first-line {line-height: 100%; }

Pagbaton og Tinuod nga mga Kapanguhaan sa una nga mga bungkoy

Ang labing maayo nga paagi sa paghimo sa usa ka nindot nga inisyal nga cap mao ang pag-usab sa font ngadto sa usa ka labaw nga pangdekorasyon nga font pamilya. Kon naggamit ka og sunod-sunod nga mga font nga gisundan sa usa ka generic nga font , kini makatabang sa paggarantiya nga ang imong unang cap nagpakita nga maayo aron ang imong mga kostumer makakita niini, nga dili makakuha sa mga isyu sa accessibility ug usability.

p: first-letter {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: first-line {line-height: 100%; }

Ug, sama sa naandan, mahimo nimong ibutang ang tanan niini nga mga sugyot aron sa paghimo usa ka inisyal nga cap nga estilo sa patalastas sa imong parapo.

Paggamit sa usa ka Graphical Initial Cap

Kung, pagkahuman sa tanan niana, wala ka pa ganahi kung giunsa pagtan-aw sa imong una nga mga panid sa panid, mahimo ka nga magamit sa mga graphic aron makuha ang tukmang epekto nga imong gipangita. Apan sa dili pa ikaw modesisyon sa pagbalhin diretso ngadto sa mga graphic, kinahanglan nga imong nahibal-an ang mga kakulangan sa niini nga pamaagi:

Una, kinahanglan nimong himoon ang graphic sa unang sulat. Gigamit nako ang Photoshop sa paghimo sa letrang L nga may font nga "Edwardian Script ITC". Gihimo nako kini nga dako - 300pt ang gidak-on. Akong gitan-aw ang larawan hangtud sa kinagamyang bahin sa sulat ug nakita ang lapad nga hulagway ug gitas-on.

Dayon akong gimugna ang klase nga "capL" alang sa akong parapo. Dinhi kini akong gipatin-aw kon unsa nga imahe ang gamiton, ang nag-unang (taas nga linya), ug uban pa.

Kinahanglan nimo gamiton ang gilapdon ug gitas-on sa hulagway aron i-set ang parapo-ang indent ug padding-ibabaw. Para sa akong L nga larawan, gikinahanglan ko ang 95px indent ug 72px padding.

p.capL {line-height: 1em; background-image: url (capL.gif); balik sa background-balik-balik-balik-balik; text-indent: 95px; padding-top: 72px; }

Apan dili kana tanan. Kon ibilin nimo kini, nan ang unang letra doblehon sa parapo - una nga may graphic, dayon sa teksto. Busa, nagdugang ko og usa ka dangaw sa unang elemento sa klase nga "inisyal" - ug misulti sa browser nga dili ipakita kana nga sulat:

span.initial {display: wala; }

Ug ang graphic dayon nagpakita sa husto. Mahimo ka nga makadula sa text-indent sa parapo aron makuha ang teksto nga hugot sa sulat, apan gusto nimo nga ipakita kini.