Foghlaim Conas Caipíní Tosaigh Fancy a Chruthú Úsáid CSS agus Íomhánna
Foghlaim conas CSS a úsáid chun caipíní tosaigh mhaisiúil a chruthú le haghaidh do mhíreanna. Tá teicníc athsholáthair íomhá simplí ann fiú chun íomhá grafach a úsáid le haghaidh do chaipín tosaigh.
Stíleanna Bunúsacha Caps Tosaigh
Tá trí stíl bhunúsach caipíní tosaigh i doiciméid:
- ardaíodh - an ceann is coitianta, áit a bhfuil an chéad litir níos mó agus ar an líne chéanna leis an téacs atá ann faoi láthair.
- thit - chomh coitianta chomh maith, i gcás ina bhfuil an chéad litir níos mó agus a thit síos thíos an chéad líne téacs. Ansin, téann an téacs seo a leanas ar siúl timpeall air.
- in aice láimhe - áit a bhfuil an chéad litir i gcolún amháin in aice leis an gcuid eile den téacs. Tá sé seo níos coitianta i gcló ná mar a dhearadh Gréasáin.
Tá caipíní tosaigh nó caipíní titim an-eolach. Is bealach iontach iad é a ghléasadh suas trasna fada agus leadránach ar théacs. Agus leis an maoin CSS: an chéad litir, is féidir leat a shainiú go héasca conas a dhéanamh do chéad litreacha fancier.
Cruthaigh Cap Tús Simplí
Is gá duit go léir a dhéanamh chun caipín tosaigh simplí a thógáil ná an chéad litir de do mhír a dhéanamh níos mó i méid leis an eilimint dhúthdhleasaithe:
p: an chéad litir {font-size: 3em; }Ach féachann go leor brabhsálaithe go bhfuil an chéad litir níos mó ná an chuid eile den téacs ar an líne, agus mar sin déanann siad an t-aon rud is fearr leis an gcéad litir, ní an chuid eile den líne. Go héasca, is furasta é seo a shocrú leis an eilimint fhíor-líne agus an t-ard-airde:
p: an chéad litir {font-size: 3em; } p: chéad líne {líne-airde: 1em; }Seinn leis an airde líne laistigh de do cháipéis go dtí go bhfaighidh tú an méid ceart do do théacs.
Seinn le do Cap Tosaigh
Nuair a thuigeann tú conas caipín tosaigh a chruthú, is féidir leat é a ghlanadh suas i éadaí mhaisiúil chun é a dhéanamh amach. Seinn le dathanna, dathanna cúlra, teorainneacha, nó is cuma cad é do mhaisiúil. Is é stíl sách simplí ná dathanna do chló agus dath cúlra a athrú ar ais don chéad litir:
p: an chéad litir {font-size: 300%; dath cúlra: # 000; dath: #fff; } p: chéad líne {líne-airde: 100%; }Is é cleas eile ná an chéad líne a ionad. D'fhéadfadh sé seo a bheith deacair le CSS, mar is féidir le lár an líne téacs a bheith difriúil má tá do leagan amach solúbtha. Ach le roinnt ag baint úsáide as na luachanna, is féidir leat do chéad líne a fhleasc go leor chun an chéad litir a bheith i lár. Just a imirt leis an gcéatadán ar fhleasc téacs na míre go dtí go bhfuil sé ceart:
p: an chéad litir {font-size: 300%; dath cúlra: # 000; dath: #fff; } p: chéad líne {líne-airde: 100%; } p {text-indent: 45% ; }Tá Caps tosaigh in aice láidre le CSS
Is féidir le caipíní tosaigh in aice láimhe a bheith deacair le CSS mar go léiríonn na brabhsálaithe éagsúla na clónna ar bhealach difriúil. Is é an smaoineamh atá taobh thiar de chaipín in aice le CSS a chruthú ná an t-iontráil téacs a úsáid ar an gcéad líne chun luach diúltach a chur air (ar chlé). Ní mór duit méid áirithe a athrú ar imeall chlé na míre sin. Seinn leis na huimhreacha seo go dtí go bhféachann an mhír go maith.
p {text-indent: -2.5em; imeall-chlé: 3em; } p: first-letter {font-size: 3em; } p: chéad líne {líne-airde: 100%; }Caipíní Tosaigh Fíorúil a Fháil
Is é an bealach is fearr chun caipín tosaigh mhaisiúil a chruthú ná an cló a athrú ar theaghlach cló níos maisiúla. Má úsáideann tú sraith clónna ina dhiaidh sin, beidh cló cineálach ina dhiaidh sin, cabhróidh sé le ráthaíocht go léiríonn do chaipiteal tosaigh go maith ionas gur féidir le do chustaiméirí é a fheiceáil, gan dul isteach ar shaincheisteanna inrochtaineachta agus inúsáideachta.
p: an chéad litir {font-size: 3em; cló-theaghlach: "Script Eolaíochta Edwardian", "Scuab Script MT", cursive; } p: chéad líne {líne-airde: 100%; }Agus mar is gnách, is féidir leat na moltaí seo go léir a chur le chéile chun caipín tosaigh a chruthú a stíl fógraí le do mhír.
Ag baint úsáide as Cap Tosaigh Grafach
Más rud é, tar éis an tsaoil sin, níl tú fós ar mhaith leat breathnú ar an leathanach ar na caipíní tosaigh, is féidir leat dul i ngleic le grafaicí chun an éifeacht chéanna atá á lorg agat a fháil. Ach sula n-aontaíonn tú bogadh díreach chuig grafaicí, ba chóir duit a bheith ar an eolas faoi mhíbhuntáistí an mhodh seo:
- Ní fheiceann custaiméirí gan íomhánna an caipín tosaigh, agus ní fhéadfaidh siad an téacs i bhfolach a fheiceáil go bhfuil an íomhá in áit. Is féidir leis an mír seo a dhéanamh nach bhfuil sé inrochtana, nó is deacra é a léamh.
- Cuireann íomhánna le híoslódáil an leathanaigh i gcónaí. Má tá a lán caipíní tosaigh agat, is féidir leat an t-am íosluchtaithe a mhéadú go mór le rud éigin a bhraitheann go leor daoine nach bhfuil tábhachtach.
- Taispeánfaidh roinnt brabhsálaithe an chéad litir i bhfolach agus an íomhá - rud a fhágann gur féidir breathnú ar an téacs mír.
- Tá sé an-deacair an rogha seo a uathoibriú, mar is gá duit a fháil amach go díreach cad é an chéad litir ionas go n-úsáideann tú an grafach ceart. Mar sin, gach uair a eagraítear an mhír, b'fhéidir go gcaithfí grafach nua a chruthú.
Ar dtús, ní mór duit grafach na chéad litir a chruthú. D'úsáid mé Photoshop chun an litir L a chruthú leis an gcló "Script Script Eolaíochta". Rinne mé ollmhór é - 300pt i méid. Chuir mé an íomhá síos go dtí an t-íosmhéid timpeall ar an litir agus thug sé faoi deara an leithead agus airde an íomhá.
Ansin chruthaigh mé "capL" ranga ar mo mhír. Seo é nuair a shainmhínigh mé an íomhá atá le húsáid, an tosaigh (líne-airde), agus mar sin de.
Ní mór duit an leithead agus airde an íomhá a úsáid chun téacsfhreastalaí agus barr-stuáil na míre a shocrú. Maidir le mo íomhá L, bhí gá le fleasc 95px agus padding 72px.
p.capL {líne-airde: 1em; background-image: url (capL.gif); cúl-athuair: gan athuair; téacsfhreastalaí: 95px; stuáil-barr: 72px; }Ach ní sin uile. Má fhágann tú ann ansin, déanfar an chéad litir a dhúbailt sa mhír - an chéad leis an grafach, ansin sa téacs. Mar sin, chuir mé réimse thart ar an gcéad eilimint sin leis an rang "tosaigh" - agus dúirt sé leis an bhrabhsálaí gan an litir sin a thaispeáint:
span.initial {taispeáint: none; }Agus taispeánann an grafach i gceart ansin. Is féidir leat imirt leis an téacsfhreastalaí ar an mír chun go gcuirfí an téacs ar bun go dtí an litir, áfach, gur mhaith leat é a thaispeáint.