Ithute ho Etsa Fancy Initial Caps Ho Sebelisa CSS le Litšoantšo
Ithute hore na u ka sebelisa CSS joang ho etsa likhaba tse qalang tsa lirapa tsa hau. Ho na le mokhoa o bonolo oa ho fetola setšoantšo ho sebelisa setšoantšo sa setšoantšo sa sekhetho sa hau sa pele.
Litsela tsa motheo tsa Initial Caps
Ho na le mefuta e meraro ea motheo ea likhetho tsa pele ka litokomane:
- e phahamiselitsoeng - e tloaelehileng ka ho fetisisa, moo lengolo la pele le leng le leholoanyane le molaong o lekanang le mongolo o teng hona joale.
- e theohile - e boetse e le e tloaelehileng, moo lengolo la pele le leng le leholo 'me le theohile ka tlaase ho mola oa pele. Joale temana e latelang e potoloha ho potoloha eona.
- haufi - moo lengolo la pele le leng ka lehlakoreng le le leng ka thōko ho tse ling kaofela. Sena se atisa ho hatisoa ho feta Web design.
Li-caps kapa li-caps tsa pele li tloaelehile haholo. Ke tsela e ntle ea ho apara ka nako e telele le e tsitsitseng ea litemana. Le ka thepa ea CSS: lengolo la pele, o ka hlalosa habonolo hore na u ka etsa joang mangolo a hau a pele.
Etsa sekhetho sa pele sa pele
Lintho tsohle tseo u lokelang ho li etsa ho etsa kopo ea pele e tsositsoeng ke ho etsa lengolo la pele la serapa sa hau le leholo ka boholo le lengolo la pele la pseudo-element:
P: lengolo la pele {font-size: 3em; }}Empa li-browser tse ngata li bona hore lengolo la pele le leholo ho feta tse ling kaofela tse ngotsoeng molaong, kahoo li etsa hore ho be le se ka sehloohong se lekanang le se ka utloahalang bakeng sa lengolo leo la pele, eseng lehlakoreng le leng. Ka lehlohonolo, sena se bonolo ho lokisa le mohala oa pele oa pseudo-element le thepa ea bophahamo ba line:
P: lengolo la pele {font-size: 3em; } p: pele-line {line-height: 1em; }}Bapala ka bophahamo ba lineele ka har'a tokomane ea hau ho fihlela u fumana boholo bo nepahetseng ba temana ea hau.
Bapala le Cap ea hau ea pele
Hang ha u utloisisa hore na u ka etsa joang sekhetho sa pele, u ka se apara liaparo tse majabajaba hore u li hlahise. Bapala ka mebala, mebala ea mokokotlo, meeli, kapa ntho efe kapa efe eo u e bonang. Setaele se bonolo ke ho fetola mebala ea molaetsa oa hao le mobala oa mokokotlo bakeng sa lengolo la pele:
P: lengolo la pele {font-size: 300%; 'mala oa mokokotlo: # 000; 'mala: #fff; } p: mola oa pele {line-height: 100%; }}Ntho e 'ngoe e bolotsana ke ho kenya mohala oa pele. Sena se ka ba se qhekellang ka CSS, kaha bohareng ba molaetsa o ka ba o fapaneng haeba sebaka sa hau se fetoha. Empa le ba bang ba bapala ho pota-potiloe le litekanyetso tsa boitšoaro, u ka etsa molumo oa hau oa pele ho lekana ho etsa hore lengolo la pele le bonahala le le bohareng. Feela u bapala le peresente ho se ngotsoeng-sekhetho sa serapa ho fihlela se shebahale hantle:
P: lengolo la pele {font-size: 300%; 'mala oa mokokotlo: # 000; 'mala: #fff; } p: mola oa pele {line-height: 100%; } p {text-indent: 45% ; }}Lintlheng tsa pele tsa Caps li thata le CSS
Li-caps tse qalang tsa pele li ka ba thata ka CSS hobane li-browser tse sa tšoaneng li bonts'a li-fonts ka tsela e fapaneng. Sepheo sa ho bōpa sekoahelo se haufi le CSS ke ho sebelisa thepa-sekheo sa thepa ka lehlakoreng la pele ho e sutumelletsa ka ntle (ka ho le letšehali) boleng bo bobe. Hape ho tla hlokahala hore u fetole karolong e ka morao ea serapa seo ka chelete e itseng. Bapala ka linomoro tsena ho fihlela serapa se shebahala hantle.
p {text-indent: -2.5em; marginal-left: 3em; } p: lengolo la pele {font-size: 3em; } p: mola oa pele {line-height: 100%; }}Ho Fumana Li-caps tsa Kannete
Tsela e molemo ka ho fetisisa ea ho bopa sekhahla sa majoe a qalang ke ho fetola fonte ho lelapa la mapolesa le khabisang. Haeba u sebelisa letoto la fonte le lateloang ke fonte ea generic , e tla thusa ho netefatsa hore cap ea hau ea pele e bontša hantle hore bareki ba hao ba e bone, ba sa khone ho kena lipapaling le maemo a ho sebetsa.
P: lengolo la pele {font-size: 3em; mongolo-oa lelapa: "Edwardian Script ITC", "Brush Script MT", cursive; } p: mola oa pele {line-height: 100%; }}'Me, ka mokhoa o tloaelehileng, u ka kenya litlhahiso tsena kaofela hammoho ho etsa sekhetho sa pele sa lipapatso ho serapa sa hau.
Ho sebelisa Capal Initial Cap
Haeba, ka mor'a tsohle, o ntse o sa rate kamoo likheo tsa hau tsa pele li shebahalang kateng leqepheng, u ka sebelisa litšoantšo ho fumana hantle hore na u batla eng. Empa pele u etsa qeto ea ho ea litšoantšong tse fapaneng, u lokela ho hlokomela litsietsi tsa mokhoa ona:
- Barekisi ba se nang litšoantšo ba ke ke ba bona sekhetho sa pele, 'me ba se ke ba bona mongolo o patiloeng oo setšoantšo se o nkang sebaka. Sena se ka etsa hore serapa se se ke sa atleha, kapa ha ho bonolo ho bala.
- Litšoantšo li atisa ho eketsa nako ea ho qeta ea leqephe. Haeba u na le likheo tse ngata tsa pele, u ka eketsa nako ea ho lekola bakeng sa ntho e itseng eo batho ba bangata ba ka ikutloang e le ea bohlokoa.
- Liwebsaete tse ling li tla bontša lengolo la pele le patehileng le setšoantšo - se ka etsang hore lirapa tsa serapa li shebahale eka li makatsa.
- Ho thata haholo ho khetha kgetho ena, kaha u tlameha ho tseba hantle hore na lengolo la pele ke eng hore u sebelise papiso e nepahetseng. Kahoo, nako le nako ha serapa se hlophisitsoe, u ka 'na ua hloka ho etsa moqapi o mocha.
Ntlha ea pele, o hloka ho etsa papiso ea lengolo la pele. Ke sebelisitse Photoshop ho hlahisa lengolo L ka fonte "Edwardian Script ITC". Ke e entse e kholo - 300pt ka boholo. Ka mor'a moo ke ile ka kopanya setšoantšo ho fihlela ho se na letho le ka tlase ho lengolo lena mme ke hlokomela bophara ba setšoantšo le bophahamo.
Eaba ke theha "capL" ea sehlopha sa serapa sa ka. Mona ke moo ke hlalosang setšoantšo sa ho sebelisa, ho etella pele (bophahamo ba line), joalo-joalo.
U lokela ho sebelisa bophara ba setšoantšo le bophahamo ho beha setempe sa temana le sepakapaka. Bakeng sa setšoantšo sa ka sa L, ke ne ke hloka indemane ea 95px le 72px padding.
p.capL {line-height: 1em; setšoantšo sa mokokotlo: url (capL.gif); mokokotlo-pheta-pheta: ha o pheta; sesebeliso-taba: 95px; padding-top: 72px; }}Empa hase sona feela. Haeba ue siea moo, joale lengolo la pele le tla phetoa ka serapeng-pele ka ho hlahisa maikutlo, ebe joale ho ngoloa. Ka hona, ke kentse sekhahla ho potoloha ntlha eo ea pele le sehlopha sa "pele" - 'me ke bolele sebapali hore se se ke sa bontša lengolo leo:
span.initial {bonts'a: ha ho letho; }}'Me moqapi o bonts'a hantle. U ka bapala le sepheo-sekhukhu se hlahang serapeng ho etsa hore temana e finyelletse ho fihlela ho lengolo, leha ho le joalo u ka rata hore e bontše.