Tgħallem Kif Oħloq Fancy Initial Caps Permezz ta 'CSS u Stampi
Tgħallem kif tuża CSS biex toħloq tappijiet inizjali fancy għall-paragrafi tiegħek. Hemm ukoll teknika sempliċi ta 'sostituzzjoni tal-immaġni biex tuża immaġni grafika għall-għatu inizjali tiegħek.
Stili Bażiċi ta 'Tappijiet Inizjali
Hemm tliet stili bażiċi ta 'limiti inizjali fid-dokumenti:
- imqajma - l-aktar komuni, fejn l-ewwel ittra hija akbar u fuq l-istess linja bħat-test attwali.
- niżel - ukoll pjuttost komuni, fejn l-ewwel ittra hija akbar u niżlet taħt l-ewwel linja tat-test. It-test li ġej imbagħad jidħol fih.
- adjaċenti - fejn l-ewwel ittra tinsab f'ġabra waħda ħdejn il-bqija tat-test. Dan huwa aktar komuni fl-istampar milli fid-disinn tal-Web.
L-għotjien tal-bidu jew il-qtar tal-qatra huma familjari ħafna Huma mod tajjeb ħafna biex jilbsu testi twal u twal mod ieħor ta 'test. U bil-proprjetà CSS: l-ewwel ittra, inti tista 'faċilment tiddefinixxi kif tagħmel l-ewwel ittri tiegħek fancier.
Oħloq Kap inizjali sempliċi
Kulma għandek bżonn tagħmel biex toħloq għatu inizjali sempliċi mqajjem huwa li tagħmel l-ewwel ittra tal-paragrafu tiegħek ikbar fid-daqs bl-ewwel sezzjoni pseudo-element:
p: l-ewwel ittra {font-size: 3em; }Iżda bosta browsers jaraw li l-ewwel ittra hija ikbar mill-bqija tat-test fuq il-linja, sabiex dawn jagħmlu l-aqwa ugwali għal dak li jagħmel sens għal dik l-ewwel ittra, mhux il-bqija tal-linja. B'xorti tajba, dan huwa faċli biex titwaħħal mas-psewdo-element tal-ewwel linja u l-proprjetà tal-għoli tal-linja:
p: l-ewwel ittra {font-size: 3em; } p: l-ewwel linja {l-għoli tal-linja: 1em; }Play bl-għoli tal-linja fid-dokument tiegħek sakemm issib id-daqs it-tajjeb għat-test tiegħek.
Play bil-Kap inizjali tiegħek
Ladarba tifhem kif toħloq għatu inizjali, tista 'tpittirha b'ħwejjeġ fancy biex tagħmilha ta' barra. Play b'kuluri, kuluri fl-isfond, fruntieri, jew kwalunkwe strajk fancy tiegħek. Stil pjuttost sempliċi huwa li nreġġa 'lura l-kuluri tat-tipa u l-kulur ta' l-isfond biss għall-ewwel ittra:
p: l-ewwel ittra {font-size: 300%; kulur fl-isfond: # 000; kulur: #fff; } p: l-ewwel linja [l-għoli tal-linja: 100%; }Trick ieħor huwa li ċ-ċentru ta 'l-ewwel linja. Dan jista 'jkun diffiċli ma' CSS, billi n-nofs tal-linja tat-test tista 'tkun differenti jekk it-tqassim tiegħek ikun flessibbli. Imma b'xi playing madwar mal-valuri, tista 'tibbaża l-ewwel linja tiegħek biżżejjed biex tagħmel l-ewwel ittra tidher li tkun fin-nofs. Agħmel il-persentaġġ biss fuq it-test inċiż tal-paragrafu sakemm jidher tajjeb:
p: l-ewwel ittra {font-size: 300%; kulur fl-isfond: # 000; kulur: #fff; } p: l-ewwel linja [l-għoli tal-linja: 100%; } p {text-indent: 45% ; }It-Tappijiet Inizjali ta 'Maġenb huma Hard b'CSS
Il-limiti inizjali adatti jistgħu jkunu diffiċli bis-CSS minħabba li l-browsers differenti juru t-tipi differenti. L-idea wara l-ħolqien ta 'għatu maġenb f'CSS hija li tuża l-proprjetà tat-test inċiż fl-ewwel linja biex timbottah (lejn ix-xellug) valur negattiv. Int ser ikollok bżonn ukoll li tbiddel il-marġni tax-xellug ta 'dak il-paragrafu b'xi ammont. Play ma 'dawn in-numri sakemm il-paragrafu jidher tajjeb.
p {test-inċiż: -2.5em; marġini tax-xellug: 3em; } p: l-ewwel ittra {font-size: 3em; } p: l-ewwel linja [l-għoli tal-linja: 100%; }Getting Tappijiet Inizjali ta 'Fancy
L-aħjar mod biex jinħoloq għatu inizjali fancy huwa li tinbidel il-font għal familja tat-tipa aktar dekorattiva. Jekk tuża serje ta 'fonts segwita minn font ġenerika , tgħin biex tiggarantixxi li l-għatu inizjali tiegħek juri sewwa sabiex il-klijenti tiegħek ikunu jistgħu jarawha, mingħajr ma jidħlu f'aċċessibbiltà u kwistjonijiet ta' użabilità.
p: l-ewwel ittra {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: l-ewwel linja [l-għoli tal-linja: 100%; }U, bħas-soltu, tista 'tpoġġi dawn is-suġġerimenti kollha flimkien biex toħloq għatu inizjali li tavża lill-paragrafu tiegħek.
Bl-użu ta 'Kap Inizjali Grafika
Jekk wara kollox dak kollu, inti xorta ma tixtieqx kif il-limiti inizjali tiegħek iħarsu lejn il-paġna, tista 'tirrikorri għall-grafika biex tikseb l-effett eżatt li tkun qed tfittex. Imma qabel ma tiddeċiedi li timxi dritti għall-grafika, għandek tkun konxju mill-iżvantaġġi ta 'dan il-metodu:
- Il-klijenti mingħajr immaġini ma jarawx l-għatu inizjali, u jistgħu ma jarawx it-test moħbi li l-immaġni qed tissostitwixxi. Dan jista 'jagħmel il-paragrafu inaċċessibbli, jew l-aħjar huwa diffiċli biex jinqara.
- Stampi dejjem iżidu mal-ħin tat-tniżżil ta 'paġna. Jekk għandek ħafna tappijiet inizjali, tista 'żżid b'mod sinifikanti l-ħin tat-tniżżil għal xi ħaġa li ħafna nies iħossu li hija insinifikanti.
- Xi browsers għandhom juru kemm l-ewwel ittra moħbija kif ukoll l-immaġni - li jistgħu jagħmlu t-test tal-paragrafu ħarsa fard.
- Huwa diffiċli ħafna li din l-għażla tiġi awtomatizzata, għax trid tkun taf eżattament liema hija l-ewwel ittra biex tuża l-grafika korretta. Allura, kull darba li l-paragrafu jiġi editjat, jista 'jkollok bżonn toħloq grafika ġdida.
L-ewwel, għandek bżonn toħloq il-grafika ta 'l-ewwel ittra. I użat Photoshop biex toħloq l-ittra L bil-font "Edwardian Script ITC". Jien għamilha enormi - 300pess fid-daqs. Imbagħad ħsad l-immaġni 'l isfel sal-minimu assolut madwar l-ittra u nnutat il-wisa' u l-għoli tal-immaġini.
Imbagħad ħloqjt klassi "capL" għall-paragrafu tiegħi. Hawn hu fejn niddefinixxi x'immaġini tuża, l-aqwa (l-għoli tal-linja), u l-bqija.
Għandek bżonn tuża l-wisa 'u l-għoli tal-immaġini biex tiffissa l-inċiż tat-test u l-ikkuttunar tal-paragrafu. Għall-immaġni L tiegħi, kont meħtieġa 95px inċiż u padding 72px.
p.capL {linja-għoli: 1em; immaġni ta 'sfond: url (capL.gif); irrepeti l-isfond: le-irrepeti; inċiż tat-test: 95px; padding-top: 72px; }Imma dak mhux kollu. Jekk titlaq hemmhekk, allura l-ewwel ittra ser tkun duplikata fil-paragrafu - l-ewwel bil-grafika, imbagħad fit-test. Allura, żiedet medda ta 'madwar dak l-ewwel element mal-klassi "inizjali" - u qal lill-browser li ma turix dik l-ittra:
span.initial {wiri: ħadd; }U l-grafika mbagħad turi sewwa. Int tista 'tilgħab bl-inċiż tat-test fuq il-paragrafu biex it-test jintrabat sa l-ittra, imma tixtieq li turi.